Marking up links (or anchors)
Posted Aug 12, 2004 at 12:16 AM
Arguably one of the most beneficial characteristics of the World Wide Web is the interconnectedness of it. I challenge you to find a page on the web today that does not have a link to some other page on it. They’re easy to add, and certainly make the end user experience more meaningful. What follows are some thoughts on marking up links in standard ways.
Consistency around link appearance
- To ensure that links are perceived as clickable, underline and color the link text. Don’t force users to guess or explore what is actually clickable. In cases of navigation and lists of links, it may not be necessary to underline the links, assuming that such areas are clearly implemented, an more importantly understood by users, as such.
- Underlining is critical if links are colored red or green to prevent creating problems for color blind users.
- Underlining assists users with low-vision in determining what text is clickable.
- Reserve underlining exclusively for links, even if you don’t underline links, since underlining is widely accepted and understood to be associated with clickable links. Underlined text that is not clickable can create confusion because it breaks away from this generally accepted model.
- Style visited links differently from unvisited ones. One good approach is to use two shades of the same color so that the relationship is clear. Generally, links that the user has already visited should appear clicked, used or stale. Shades of blue for links are often best, because most browsers default to blue for links, and users have become accustomed to this approach.
- When coloring links, avoid repeating link colors for text that is not a link.
- When following these guidelines, it is most often not necessary to change link appearance on hover or click. When you stray from these recommendations, it is good practice to make up for it in changing link appearance on hover or click (for example, to actually undeline the link in such events).
- When appropriate, use link titles to help users understand the destination. This can be especially valuable in navigational areas.
- Use care in the text sizes you select for links. Remember that they are clickable areas, and should be easy for users to click on. Small fonts and short link text compete with this fundamental requirement for making a site accessible. One generally accepted exception to this is for links that very few users will actually use (such as secondary links to copyright or legal information in a footer that users will generally ignore).
Thoughts around link text
As mentioned above, when creating the text associated with a link, it’s important to remember that you’re creating a clickable area. Short text will result in a small clickable region. Short text can also appear vague or misleading, and the actual destination may be inconsistent with the user’s expectations.
One common problem seen too often on sites is using click here or other widely applicable, narrowly meaningless text for for. In practice, this is not good for the following reasons:
- Not every visitor to your page uses a mouse (or even has one), thereby making the word click entirely inappropriate in some situations.
- Repeating the same text for different destinations gets in the way of skimming the page in search of something specific.
- When used repeatedly on a page, click here gets repeated over and over and over and over by assistive technologies such as screen readers, making your page sound more like a scratched record than a usable web page. Avoid repetition, and be precise.
External page lnks
When possible, use the <base> tag in the <head> section to define a base url, so that the href attributes of links do not repeat the base URL over and over. Or even better, use relative links whenever possible.
Internal page links
Sometimes it is desirable to create a link that navigates not to a different page, but rather to a specific location on the same page. Often times this is accomplished like so:
<a href="#bottom">Go to the bottom</a>...<a name="bottom"></a><div id="footer">This is the bottom.</div>- Download this code: /code/links_01.html
While this may work, it is not ideal for the following reasons:
- It usually requires a meaningless <a> tag (in most cases with no content) that is semantically meaningless and only adds weight to the page.
- It can create styling problems or force additional style rules (and additional download costs) because the <a> tag defining the target location in this case is usually not desired to be visually displayed like other links.
A better and lighter way to accomplish this is as follows:
<a href="#footer">Go to the bottom</a>...<div id="footer">This is the bottom.</div>- Download this code: /code/links_02.html
Benefits:
- We’ve removed the unnecessary <a> tag. We just link to the id of an already existing tag. This is known as linking to a fragment identifier.
- Since in most cases the page layout will be established with CSS against elements that have id attributes, the only additional markup is directly related to “Go to the bottom” link itself. This makes perfect sense, and is completely justifiable. Because the id value for each element must be unique, it further ensures that we’re linking to the right place, because we can be certain that there are not more than one of them on the page. If there were, the markup would not pass validation.
Tip: as I have written about in another post about deciding between class and ID, care should be taken when using the id and deciding its value. In addition to the uniqueness requirement, reserved words in javascript or the DOM are bad choices because they can cause script errors. Additionally, id values should not start with a number. A more detailed discussion on this topic is also available.
Avoiding styling problems with internal page links
The core issue that usually creates problems here is that rules such as the following are used:
a{color: blue;text-decoration: underline;}- Download this code: /code/links_01.css
This will actually apply the style to all <a> tags, regardless of whether they are links to external pages or internal sections. To apply styles so that they avoid internal page links, use the :link pseudo class in CSS. This is exactly what it’s defined for. Here’s an example:
a:link{color: blue;text-decoration: underline;}- Download this code: /code/links_02.css
The sequence of pseudo class stylesheet rules is important
To define the behaviors correctly across browsers, the order of rules within a specific scope need to be specified in the following order: link, visited, hover, active. Tip: an easy way to remember this is LoVe, HAte.
Here’s an example:
a:link{color: blue;}a:visited{color: lightblue;}a:hover{color: red;}a:active {color: orange;}- Download this code: /code/links_03.css
A brief note on URL’s and fragment identifiers
I always get mixed up on the correct placement of fragment identifiers in URL’s that use querystrings, so I thought I would take a moment here and explain how it should be done. According to the RFC on relative URL’s, the correct format of a URL is:
http://www.foo.com/page.aspx?param1=value¶m2=value#footer
So always place the fragment identifer at the end of the URL, and you should be good… provided that you also properly encode the URL value.
About this page
This page contains a single post from Daniel Boerner's blog, of which Boot Camp + Windows Vista = no more Airport Extreme reboots is the latest post.
Are there more posts like this one?
Possibly. Within this blog, this post is categorized under webdev and it was posted on August 12, 2004. Those would be good places to start looking for related posts.
This post is closed to new comments.