Marking up the current page with HTML5 links

31 July 2011

Code things

Updated on 3rd July 2017: this post is out of date, please read Using the aria-current attribute instead.

When you’re browsing a website using its primary navigation, it’s helpful to know which page you’re on, and which pages you can go to. HTML5 makes it simple to do this, but the technique moves away from a common approach used in HTML4.01.

When you’re looking at a website’s navigation, the current page should be visually distinct from the other pages. When you’re using a screen reader, the separation needs to be programmatic rather than visual.

A common technique used with HTML4.01 is to use the strong element to markup the current page:

                Code language
                HTML
              

                <ul>
  <li><a href="home.html">Home</a></li>
  <li><strong>About us</strong></li>
  <li><a href="contact.html">Contact us</a></li>
  … 
</ul>
              

This has the advantage of creating both the visual effect and the programmatic effect needed to differentiate the current page from the rest.

The HTML5 specification subtly changes the purpose of the strong element though. Instead of marking up content with strong emphasis, it should be used to markup content of strong importance. More on this (and other similar changes) within the HTML5 spec can be found on the HTML5 Doctor website.

This change in the specification probably doesn’t make it wrong to use the above technique, since it could be argued that the current page is something of strong importance. It is one of those potentially murky areas though, and besides, the HTML5 spec recommends a much cleaner approach instead.

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor).
If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

In other words you can strip out all the usual attributes from the a element, to turn it into a placeholder instead:

                Code language
                HTML
              

                <ul>
  <li><a href="home.html">Home</a></li>
  <li><a>About us</a></li>
  <li><a href="contact.html">Contact us</a></li>
  …
</ul>
              

As far as the screen reader is concerned, the current page link is deactivated. This provides the separation needed to understand which page you’re on, and which pages you can go to. To create the same separation visually, you can apply a CSS class that gives the current page a different appearance from the other links within the navigation.

Tagged with

Html