The Elements of an HTML Link
Links. We often talk about why we want them and how to get them, but today I'd like to go back to basics and look at the constituent parts of the HTML code behind them. This is definitely a post for the new SEO, or web-developer looking to expand their experience, but even experienced search marketers may want to comment the nuances of some parts of the humble anchor tag's attributes.
Here's a couple of example links; the first is a link to the White House's website, the other is to Distilled's new US website.
Both links follow the same structure: an opening <a> tag which can include a variety of attributes, the content of the link (the 'clickable' part or 'anchor text'), and the closing part of the anchor tag, </a>.
For each part of an HTML link mentioned below, I've indicated which are of interest from Search Engine Optimisation (SEO), User Interface (UI) and User Experience (UX) perspectives.
href - the 'destination' of the link (SEO UX)
As seen in both examples above, the href (which probably stands for 'hypertext reference') is the destination URL if the user clicks on the link. For links to pages in the same site, SEOmoz recommends giving the full URL including http:// and domain name here (the 'absolute' URL.) For a breakdown of the individual parts of a URL, I'd recommend the Anatomy of a URL cheat sheet.
The href can also be set to 'mailto:[email protected]', providing a link which usually launches the visitor's email client. I have mixed feelings about the use of this feature, and recommend that if you do use it, then it's made clear to the user what the link will do (There are examples below of how this can be done.)
rel - the relationship of the linked page, to the linked-to page (SEO UI UX)
As SEOs, we most often see this when it is set to 'nofollow' (required by Google to identify paid links) but it has a variety of other potential uses. The list of values that can be used here will be expanded in HTML5, and currently includes 'alternate' (intended for pointing to page mirrors, print versions, etc) and 'previous' / 'next' (for navigating paginated lists; some browsers may always display 'next' links in the same way to make browsing easier, or preload the next page to make browsing faster.)
target - the window in which the link should open (UX)
This attribute was particularly useful when sites were built using frames; it's now most often see when set to '_blank', which instructs the web-browser to open the link in a new window (or more often now: a new tab). I'd recommend not using this feature, and letting the user decide which links they'd like to open in a new tab.
class / id - most often used for applying CSS styles (UI UX)
Like most HTML elements, links can be given class or id attributes - these are typically used to apply styles to the link using CSS. One particular use case here may be to add a small icon to mailto: links, indicating that they'll open a blank email rather than a webpage.
Links benefit in particular from the :hover and :visited pseudo-classes in CSS. Allowing links to have a different style when they've already been visited or when the cursor is hovering over them gives opportunity to improve the user interface and the user experience.
title - the 'tooltip' of the link (UI UX)
The text given in the title attribute of a link usually appears in a floating box, when the cursor is held over the link. This can be used to give the user more information about the destination page. Again: it could also be used to highlight if a link is going to launch an email client.
If a link has an image rather than anchor text, it doesn't mean you have to miss out on passing term relevancy to your destination page. Image tags can have an 'alt' attribute - this is the text which will show up if the image cannot be displayed. In most cases, search engines will look at this text, and use it as a substitute for other anchor text.
If you aim for the alt text to match any text in the image and avoid the temptation to stuff keywords here, then you should see very similar benefits to using a straight text link.
HTML:
<a href="http://twitter.com/RobOusbey" rel="author" title="Follow Rob on Twitter">Rob Ousbey</a>
Rendered as:
Please feel free to follow me, Rob Ousbey, on Twitter.
Here's a couple of example links; the first is a link to the White House's website, the other is to Distilled's new US website.
Both links follow the same structure: an opening <a> tag which can include a variety of attributes, the content of the link (the 'clickable' part or 'anchor text'), and the closing part of the anchor tag, </a>.
For each part of an HTML link mentioned below, I've indicated which are of interest from Search Engine Optimisation (SEO), User Interface (UI) and User Experience (UX) perspectives.
Attributes
There's a variety of parameters that appear in anchor tags - some are required, some are optional and some are almost never used. They're each of interest to different people, and they are:href - the 'destination' of the link (SEO UX)
eg: href="https://moz.rankious.com/_moz/seminar/series"
As seen in both examples above, the href (which probably stands for 'hypertext reference') is the destination URL if the user clicks on the link. For links to pages in the same site, SEOmoz recommends giving the full URL including http:// and domain name here (the 'absolute' URL.) For a breakdown of the individual parts of a URL, I'd recommend the Anatomy of a URL cheat sheet.
The href can also be set to 'mailto:[email protected]', providing a link which usually launches the visitor's email client. I have mixed feelings about the use of this feature, and recommend that if you do use it, then it's made clear to the user what the link will do (There are examples below of how this can be done.)
rel - the relationship of the linked page, to the linked-to page (SEO UI UX)
eg: rel="nofollow"
As SEOs, we most often see this when it is set to 'nofollow' (required by Google to identify paid links) but it has a variety of other potential uses. The list of values that can be used here will be expanded in HTML5, and currently includes 'alternate' (intended for pointing to page mirrors, print versions, etc) and 'previous' / 'next' (for navigating paginated lists; some browsers may always display 'next' links in the same way to make browsing easier, or preload the next page to make browsing faster.)
target - the window in which the link should open (UX)
eg: target="_blank"
This attribute was particularly useful when sites were built using frames; it's now most often see when set to '_blank', which instructs the web-browser to open the link in a new window (or more often now: a new tab). I'd recommend not using this feature, and letting the user decide which links they'd like to open in a new tab.
class / id - most often used for applying CSS styles (UI UX)
eg: class="menu decorated"
Like most HTML elements, links can be given class or id attributes - these are typically used to apply styles to the link using CSS. One particular use case here may be to add a small icon to mailto: links, indicating that they'll open a blank email rather than a webpage.
Links benefit in particular from the :hover and :visited pseudo-classes in CSS. Allowing links to have a different style when they've already been visited or when the cursor is hovering over them gives opportunity to improve the user interface and the user experience.
title - the 'tooltip' of the link (UI UX)
eg: title="Find out more about the next SEOmoz seminar"
The text given in the title attribute of a link usually appears in a floating box, when the cursor is held over the link. This can be used to give the user more information about the destination page. Again: it could also be used to highlight if a link is going to launch an email client.
Anchor Text
(SEO UI) A critical part of the link for SEOs - most search engines use the anchor text as a key way of passing relevance for a particular term to a destination page.
If a link has an image rather than anchor text, it doesn't mean you have to miss out on passing term relevancy to your destination page. Image tags can have an 'alt' attribute - this is the text which will show up if the image cannot be displayed. In most cases, search engines will look at this text, and use it as a substitute for other anchor text.
eg: alt="SEOmoz Homepage Logo"
If you aim for the alt text to match any text in the image and avoid the temptation to stuff keywords here, then you should see very similar benefits to using a straight text link.
Example & Obvious Hint
Put all this together, and what have you got? Something that looks like this:HTML:
<a href="http://twitter.com/RobOusbey" rel="author" title="Follow Rob on Twitter">Rob Ousbey</a>
Rendered as:
Please feel free to follow me, Rob Ousbey, on Twitter.
Comments
Please keep your comments TAGFEE by following the community etiquette
Comments are closed. Got a burning question? Head to our Q&A section to start a new conversation.