The Anchor Tag Unleashed- Part 1
First, I've always wanted to write a post with this title. I know most developers and content editors don't even give HTML a second thought, but it's a very powerful structural mark-up language that is the basis for all usability, accessibility, and SEO on the web. I think about 95% of all SEO, accessibility, usability, and web standards compliance comes from good HTML. And where else should we start talking about good HTML than with the anchor tag.
You are all probably aware that the anchor tag or
<a> is the basis of hypertext mark-up language allowing developers to create a hyperlink to a URL. But most people don't utilize it's full potential or worse yet; misuse it. So I'm going to go through the proper use of the anchor tag and things to avoid.
The basis for the anchor tag is to create a link to another URL. The anchor tag helps inform the user where this link will take them using many different attributes and values.
- AVOID empty anchor tags, all anchor tags must have a value. Bad Example:
The most important part of the anchor tag is the text. This is the value placed between the opening anchor tag
<a> and the closing anchor tag
</a>. The value should clearly inform the user where the link will take them.
- USE text that is the same as the title of the destination page or section whenever possible. This is the easiest way to inform the user where the link will take them. Good Example: "Google" for http://www.google.com.
- AVOID using an image inside an anchor tag, especially for navigation, as it is difficult for users and machines to read the text value of an image.
- AVOID using words that are generic or do not let the user know where the link will take them. Bad Example: "View this page"
- USE values that would make sense even if the link was removed from it's surrounding content. Good Example: For more information visit "Groove Interactive." Bad Example: "For more information" visit Groove Interactive.
- USE values that are the same if there are multiple links on one page that goto the same destination. Good Example:
Link1: "Groove Interactive Home" for http://www.grooveinteractive.com,
Link2: "Groove Interactive Home" for http://www.grooveinteractive.com.
- AVOID values that are the same if there are multiple links on the page that goto different destinations. Bad Example:
Link1: "Home" for http://www.grooveinteractive.com,
Link2: "Home" for http://www.google.com.
The best way to audit your link values is to list all the links values on a page and see if their destinations make sense, both by themselves and when compared to other links in the list. This is the same thing that a machine would do when crawling your website and evaluating the links on your page for inclusion in a search engine. Users of screen readers may also get this list in order to more quickly navigate through a website, ignoring all other content on a page. Is it clear to the user or machine where each link will take them?
The destination of an anchor tag is set using the href attribute. The value of the href should be a section in the current page, the local path on the current site, or a full URL to another site.
- USE the full url to link to pages on other sites or to https pages on the current site. Good Example: "http://www.google.com"
- USE absolute links when pointing to other pages on the current site. This makes it much easier to manage vs relative links. Bad Example: "../../../company/information.html" Good Example: "/company/information.html"
- USE "#" and the id of the section to link to that section on the same page. Add that id to the first element of the section using the "id" attribute. Pick section id's that have contextual meaning to make it easier to manage. Avoid "a names" for this. Bad example:
<a name="about"></a>. Good Example: href="#about"...links to <h2 id="about">About</h2>.
So you can now create a simple, accessible, machine readable, SEO optimized, and usable link. I know you couldn't imagine the anchor tag taking up more than 1 post, but there is more to come about all the other exciting attributes of the anchor tag.