HTML5 Links

A link in an HTML document represents a connection between two documents, one is the current document and the other is where the link points. And there are two types of links: hyperlinks created by the A and AREA elements and links to external resources created by the LINK element.

Changes in HTML5 to the A, AREA, and LINK Elements

At first it may not seem like there are a lot of changes to links in HTML5. There are all the new global attributes and event attributes, but there are also changes to the link elements themselves.

A Element Changes

These are the changes to the attributes on the A element.

• The name attribute is obsolete. If you need to name a hyperlink or anchor, you should use the id attribute.
• The target attribute is no longer deprecated. You use it along with the IFRAME element to point to specific frames.
• You can now use the media attribute uses media queries to define specific media that the linked document is for.

But there are two other changes that make the A element more useful:

• Placeholder links—Now if you leave the A element empty (<a>) it creates a placeholder link in the document
• Block-level links—Links can now be placed around block-level elements. So if you need to link an image, headline, and paragraph text to the same place you can do it with just one link.

Here's an example. In HTML4 you had to write:

<h2><a href="site.html">Headline</a></h2>
<p>
<a href="site.html"><img src="site.jpg" alt="site"></a>
<a href="site.html">Text about the site. Read More...</a>
</p>

But with HTML5, you need only one link around the entire block of HTML:

<a href="site.html">
<h2>Headline</h2>
<p>
<img src="site.jpg" alt="site">
Text about the site. Read More...
</p>
</a>

AREA Element Changes

There are several new attributes to the AREA element.

• The rel attribute can now be added to AREA elements to define the relationship of the linked area to the current document.
• The AREA element also gets the new media attribute to define the media of the link.
• And the hreflang attribute lets you specify the language of the destination document.

The nohref attribute is now obsolete. If you want to specify a non-linked area of an image map, now you simply leave off the href attribute.

Changes to the LINK Element

There aren't a lot of changes to this element in HTML5. There is one new attribute and five obsolete attributes. The new attribute is the sizes attribute. This defines the sizes of icons for visual media. The obsolete attributes are:

• target
• urn—use href instead
• charset—use a content-type header on the linked resource instead
• methods—use HTTP options instead
• rev—use the rel attribute instead with a keyword of the opposite meaning