The Purpose of HTML Placeholder Links

HTML code

hamzaturkkol / Getty Images

Until HTML5 was released, the <a> tag has required one attribute: href. 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, a programmer would write the following as a placeholder:

<a href="#">link text</a>

The problem with using a hashtag (#) as a placeholder link is that the link is clickable, and this can cause confusion for your clients. And, if a developer forgets to update them with the correct URLs, those links will simply show the same page the user is on if clicked.

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

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

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 lot of extra 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. For development, a quick tip to help is to store the entire navigation list as a code snippet in your editor, so it's just a quick copy-paste. You can then simply delete the href. You can also get your content management system (CMS) to do the same thing.

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. Regular links will be of normal weight, blue and underlined though.

Remember to reset any styles you don't want to be carried over from the a tag. For example, the font-weight is set to bold for the placeholder links, so you'll have to set it to:

font-weight: normal;

for 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 didn't put it back.