HTML5 24-Hour Trainer

Chapter 8. Linking to Content

Try to imagine the World Wide Web without links. For every new page, you'd have to enter the full web address and you couldn't quickly navigate content in a long page. Links are central to the Web.

The traditional term for a link is hypertext. However, you can create a link from more than just text, especially in HTML5. An image — or a portion of a graphic — can also be used to link to other content. As you see in this lesson, you can create a link to other web pages (in or out of your site), other sections of the same page, images, or documents. You can even open an e-mail for sending with a link.

LINKING TO OTHER PAGES

To jump from one page to another, you use the <a> tag, also known as the anchor tag. The text or image enclosed by the <a> tag anchors one side of the link to the current page, and the href attribute (short for hypertext reference) specifies the other side, the destination. Here's a simple example:

<a href="home.html">Home</a>

With this example, when a user clicks the word Home, the browser would jump to the home.html page.

Same Site Links

The href value is always some form of URL. When linking to pages within your own site, you can use a shortened format called a document relative URL. If the page you are linking to is within the same folder as the current page, all you need is the name of the page itself, like these examples:

<a href="home.html">Home</a>
<a href="services.html">Services</a>
<a href="products.html">Products</a>

Note

Sites are ...