HTML5 Placeholder Links

Uses for the HTML5 placeholder link, a link element but without the href attribute.

In HTML5 the humble anchor element has changed so it no longer requires any attributes, even the href attribute is optional and without any attributes the resulting element is known as a placeholder link, for example:

<a>Placeholder Link</a>

Placeholder links are therefore a good replacement for links to a "#" frequently used by web designers to indicate a link in a page when the link destination is not yet finalised, for example:

<a href="#">Example Link</a>

Using placeholder links should therefore save some client confusion as they still allow normal styling but cannot actually be clicked.

Another use for placeholder links could be the current state in navigation menus. Rather than adding a class of "current" or similar to the anchor or parent element the href attribute could simply be removed. It's then possible to style the placeholder links differently, firstly by styling the anchor elements which styles all the links including the placeholder links and then style the a:link selector which only targets anchor elements that have a href attribute.

Styling the anchor elements in this way isn't great as it's likely you may need to undo some styling added to the anchor elements when styling the a:link selector so you could use a:not([href]) to target just the placeholder links although without using Selectivzr that wouldn't work in older versions of IE.

Tagged with:

You might also like...

Speeding up the web

Michael Walsh by Michael Walsh