How to Create Hyperlinks with HTML5

Hyperlinks, or simply links, connect HTML pages and other resources on the web. When you include a link on your page, you enable visitors to travel from your page to another website, another page on your site, or even another location on the same page.

Without links, a page stands alone, disconnected from the rest of the web. With links, that page becomes part of the almost boundless collection of information that is the World Wide Web.

To create a link, you need

  • A web address (called a Uniform Resource Locator; URL) for the website or file that’s your link target. This usually starts with http://.

  • Some text in your web page to label or describe the link. Make sure that the text you use says something useful about the resource being linked.

  • An anchor element (<a>) with an href attribute to bring it all together. The element to create links is called an anchor element because you use it to anchor a URL to some text on your page.

    When users view your page in a browser, they can click the text to activate the link and visit the page whose URL you specified in that link. You insert the full URL in the href attribute to tell the link where to go.

You can think of the structure of a basic link as a cheeseburger (or your preferred vegan substitute). The URL is the patty, the link text is the cheese, and the anchor tags are the buns. Tasty, yes?

For example, if you have a web page that describes HTML standards, you may want to refer web surfers to the World Wide Web Consortium (W3C) — the organization that governs all things related to HTML standards. A basic link to the W3C website looks like this:

<p>The <a href="http://www.w3.org">World Wide Web Consortium</a> is the
   standards body that oversees the ongoing development of the HTML
   specifications, and the WHATWG helps out with HTML5.</p>

You specify the link URL (http://www.w3.org) in the anchor element’s href attribute. The text (World Wide Web Consortium) between the anchor element’s opening and closing tags (<a> and </a>) describes the link.

The figure shows how a browser displays this bit of markup.

image0.jpg

You can also anchor URLs to images so that users can click an image to activate a link.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com