A placeholder link looks like this:
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:
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.