Marking up the current page with HTML5 links

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:

<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 had 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:

<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.

3 comments on “Marking up the current page with HTML5 links”

Skip to Post a comment
  1. Comment by Matt Lawson

    Great article pointing out some of the more subtle differences introduced in the HTML5 spec!

    It’s also worth nothing that whilst using a class to style the current page is probably a more reliable approach; the :link pseudo element could also be used to differentiate between element with and without a href attribute. CSS attribute selectors might also be another possibility but they are a little flaky in older versions of IE.

  2. Comment by Thomas Hooper

    I’ve always swapped out the <a> with a <strong> using JavaScript to diable pseudo buttons*, but this puts your keyboard focus back to the top of the page. Using your method, focus stays where it is on the link.

    That’s fantastic, thanks Tink 🙂

    * I know I should just use <button>, but it’s a bitch to style

  3. Comment by Mathias Bynens

    This is nothing new in HTML5. It’s just HTML. Btw, you can use `a:not([href])` to target these links using CSS.

Comment on this post

Will not be published
Optional