HTML5 Placeholder Links

What are HTML5 Placeholder Links For?

Up until HTML5, the tag has required one attribute: . But HTML5 makes even that attribute optional. When you write the a tag without any attributes it is called a placeholder link.

A placeholder link looks like this:

<a>Previous</a>

Using Placeholder Links During Development

Nearly every web designer has created placeholder links at one time or another while designing and building a website. Before HTML5, we would write <a href="#">link text</a> as the placeholder.

And I have sent mockup sites to clients with those placeholders only to have the client ask me “why don't the links in the text work?”

The problem with using a hash tag (#) as a placeholder link is that the link is clickable, and this can cause confusion for your clients. And, if someone forgets to update them with the correct URLs, those links can appear broken on the live site because they don't link to anything.

Instead, you should start using a tags without any attributes. You can style these to look like any other link on your page, but they won't be clickable because they are just placeholders.

Using Placeholder Links on Live Sites

But placeholder links have a place in web design for more than just development. One place that a placeholder link can shine is in navigation. In many cases, website navigation lists have some way of indicating which page you are on. These are often called “you are here” indicators.

You can see an example of a navigation with this feature in my free vertical menu template (with you are here).

Most sites rely on id attributes on the element that needs the “you are here” marker, but some use the class attribute as well. However, whatever attribute you use, you need to do a bunch of work to every page that has the navigation on it, adding and removing the attribute from the correct elements.

With a placeholder link, you can write your navigation however you would like, and then simply remove the href attribute from the appropriate link when you add the navigation to a page. I store my entire navigation list as a snippet in my editor, so it's just a quick copy-paste and then delete the href. You can also get your CMS to do the same thing.

And besides adding special styling (I'll show you how below) to a placeholder link, the link is not clickable. So customers don't get confused thinking that they might get something else if they click on the navigation link where they currently are.

Styling Placeholder Links

Placeholder links are easy to style, and style differently from the other links on your web page. Simply be sure to style both the a tag and the a:link tag. For example:

a {
  color: red;
  font-weight: bold;
  text-decoration: none;
}

a:link {
  color: blue;
  font-weight: normal;
  text-decoration: underline;
}

This CSS will make placeholder links bold and red, with no underline. While regular links will be in normal weight, blue and underlined.

Remember to reset any styles you don't want carried over from the a tag. For example, I set the font-weight to bold for the placeholder links, so I had to set it to font-weight: normal; for the standard links.

The same is true with the text-decoration, by removing it with the a selector, it would have been removed for the a:link selector if I hadn't put it back.