Anatomy and Deployment of Links · Index · Part 1 · 2 · 3 · 4 · 5 · 6 · 7 · 8 · Expand · Web Feed


The most important components of a link are described below. For a complete syntax compendium of the A and LINK elements please refer to the W3C on HTML and XHTML.


<a

href = "URI" | href = "#fragment-identifier" | href = "#ID" | href = "#"

id = "anchor-name" name = "anchor-name"

target = "_self | _parent | _top | _blank | frame/window-name"

title = "tooltip"

class = "CSS reference"

style = "CSS attribute/name pair(s)"

rel = "type of forward relationship"

rev = "type of reverse relationship"

hreflang = "language code"

type = "MIME content type"

charset = "character set"

onclick = "JavaScript code;"
onmousedown = "JavaScript code;"
onmouseup = "JavaScript code;"
onmouseover = "JavaScript code;"
onmouseout = "JavaScript code;"

>anchor text | image element</a>


General notes on link syntax:

  • Element and attribute names (even in HTML 4.01 or lower) must be in lower case for XHTML compatibility (XML is case sensitive).
  • Attribute values must always be quoted, even numeric values. Use either double quotes (standard) or single quotes (sometimes nice to enhance code readability, but not that handy in combination with SQL).
  • Attribute minimization is forbidden. Put name="name", not name.
  • Start tag and end tag are required (A element: <a ...>...</a>) or the start tag must be closed (LINK element: <link ... /> Note: always put a space before '/>').
  • In attributes with pre-defined value sets (e.g. _blank, _parent, _self, _top) the values are case sensitive and defined in lower case (XHTML compatibility).
  • HTML entities (&amp; ...) are case sensitive, hex references to characters are case sensitive and defined in lower case (&#xnn; instead of &#Xnn;) (XHTML compatibility). You must not use the '&' character in literals, URIs etc., if you're dealing with text pulled from databases or dynamic URIs, replace the '&' by '&amp;'.
The attribute descriptions below should cover everything one needs to code a hyper link. However, it's a good idea to follow the W3C-links to learn more about the standardized anatomy of links.

Back



href = "URI"

URI should always be a fully qualified location, that is scheme + host [+ port] [+ user] [+ password] + path [+ query string] [+ fragment identifier]. Although you can omit everything before 'path' when linking within a site, you schould not do it for various reasons. Users save your pages to their local disk, and all relative links become invalid. Scrapers capturing your content for duplication may overlook some absolute URIs and donate inbound links involuntarily. You don't need to convert links in content you make available in RSS feeds. Web robots, especially search engine spiders, can get confused by relative links, but process absolute links dependably. Examples:


<a href="http://www.mydomain.com/">My Company</a>

<a href="http://www.mydomain.com/widgets/">Widgets Index</a>

<a href="http://www.mydomain.com/widgets/tutorial-on-widgets.html#chapter7">Widgets Tutorial - Chapter #7</a>

<a href="https://www.mydomain.com/buy-now/basket.php?sku=20&amp;amp;amp;cust=10">Buy Widget Now!</a>

<a href="http://www.otherdomain.com/widgets/">My Friend's Widgets</a>


A few rules of thumb on URIs:

  • Do not omit the trailing slash when you link to a default document (for example index.html). Although you don't see a difference in your Web browser, your Web server must redirect http://www.mydomain.com to http://www.mydomain.com/ (HTTP response 302 - found elsewhere). 302-redirects are a bad thing for various reasons.
  • Always make use of short but self-explanatory names for directories and pages/scripts. Separate keywords in phrases by hyphens, not underscores or even spaces: /keyword-phrase/tutorial-keyword-phrase.htm is fine, /kwdphr/tkp.htm is poor, /keyword phrase/tutorial on keyword phrase.htm is invalid and results in all kind of troubles. Bookmarking users and search engines honor good naming conventions, and if users drop your links in forums etc., you even gain a raised keyword relevancy in terms of search engine rankings.
  • URIs in general are case-sensitive. There may be URIs, or parts of URIs, where case doesn't matter (for example domain or machine names), but identifying these may not be easy. Web developers should always consider that URIs are case-sensitive to be on the safe side. To avoid any confusion, use lowercase only (UNIX conventions): page.htm, Page.htm and PAGE.HTM are three different documents!
  • Keep query strings short. That means shorten variable names and try to make use of short integer values. Do not use 'ID' as part of composite variable names (product=20 instead of productID=20). Replace spaces in alphanumeric values by '+'. Omit useless variables, try to stick with no more than two or three variable/value pairs.
  • Each entity should have two unique keys, represented by an integer and an UUID. In public areas of your site use the integers in query strings, because search engine crawlers hate ugly URIs. In forms and protected areas use the UUIDs, because bored users and hackers tend to play with values and you don't want them updating data they shouldn't have access to.
  • Avoid tracking footprints in URIs, thus use session cookies instead of query string parameters to pass session IDs and alike. If for some weird reasons you can't avoid session IDs, omit them if the user agent is a Web robot. More information on search engine friendly URIs and query strings.
This article uses the term URI as defined here (see also RFC 1630). Note that URIs include URLs as defined in RFC 1738 and RFC 1808. To develop well formatted links on Web pages, you don't need to study these specifications. Just read URI (Universal Resource Identifier) as URL (Uniform Resource Locator), and follow the simple rules outlined above.

Back



href = "#fragment-identifier"

Fragment identifiers must match the pattern [A-Za-z][A-Za-z0-9:_.-]*, they are case sensitive and must be unique within the scope of a document. Although the attribute name disappears after HTML 4.01, it should be used for backward compatibility: always put id="widget" and name="widget". Don't make use of the outdated syntax <a name="fragment-identifier"></a> to define anchors. It is formally deprecated and will be removed in XHTML 1.0+. Instead link to an element with an id attribute.

Back



href = "#ID"

Within the page link to elements with an id attribute like <h1 id="widget" name="widget">. From other pages link with the URI plus #ID.

On page links:


...
<h2 id="index" name="index">Index</h2>
...
<a href="#chapter7">Chapter #7</a>
<a href="#chapter8">Chapter #8</a>
...
<h3 id="chapter7" name="chapter7">Chapter #7</h3>
...
<a href="#index">Index</a>
<h3 id="chapter8" name="chapter8">Chapter #8</h3>
...


Off page links:


<a href="http://www.domain.com/directory/page.html#chapter7">Chapter #7</a>
<a href="http://www.domain.com/scripts/page.php?article=20&amp;amp;amp;page=10#chapter8">Chapter #8</a>

Back



href = "#"

The '#' value equals an empty location and defaults to the topmost position in the current document. You can use an empty link to have an 'anchor text' string look like a link, but not behave like a link. For example you can use the title attribute to display a tooltip on mouseover, and onclick and/or other events to execute JavaScript code. Examples of empty links on this page: hreflang, type, charset. On mouseover the window's status bar displays a message instead of the link's href value. You must disable the default onClick behavior to prevent the page from scrolling to the top when a user clicks on an empty link. Syntax example:


<a href="#" title="tooltip text" onmouseover="window.status='Empty link, read the tooltip'; return true;" onmouseout="window.status=''; return true;" onclick="return false;">anchor text</a>

Back



id = "anchor-name" + name = "anchor-name"

As expressed above, id and name share the same name space as well as naming conventions, and should be used in conjunction. If you make use of both id and name, the values must be identical. The values must be unique within the scope of the document.

Assigning IDs to links allows neat effects. For example you can change links with JavaScript code: assigning a new value to a 'help' link's href attribute depending on value changes of radio buttons or combo boxes can enhance the usability of forms (note: search engine spiders will see only the default value!) etc. etc.

Back



target = "target-name"

target controls in which frame or window the linked document is loaded. Hint: frames are evil, use CSS instead.

The following target names are reserved and have special meanings:
_blank The user agent (Web browser) should load the designated document in a new, unnamed window.
_self The user agent should load the document in the same window/frame as the element that refers to this target. That's the default if you omit target and there is no BASE target attribute defined.
_parent The user agent should load the document into the immediate FRAMESET parent of the current frame. This value is equivalent to _self if the current frame has no parent. Since _top has issues with some browsers, better use _parent to break out of foreign frames.
_top The user agent should load the document into the full, original window (thus canceling all other frames). This value is equivalent to _self if the current frame has no parent.
_new is a myth and definitely NOT a valid target name. Most Web browsers will interpret _new as user defined window name, but with the leading underscore _new is an invalid window name.
_blur refers to (with the leading '_' invalid but executable) JavaScript syntax and has nothing to do with HTML or XHTML, hence it's not a valid target name. For nasty tricks see blur(), onFocus, onBlur, window.open('stealth-console.htm','_blur'), window.focus() and alike at Sun's client-side JavaScript reference.

To target a named window, use any clean ASCII string beginning with an alphabetic character [a-zA-Z] as window name (you really should use lowercase, although uppercase characters are allowed). The browser will open a new named window, if there is no window with that name assigned, or open the document in a previously opened named window where the window name matches. Named windows are handy for help messages etc. in conjunction with absolute screen positioning.

Back



title = "tooltip"

Web browsers show the value of the link's title attribute as tooltip, when a user moves the mouse over the link without clicking it. You should make use of tooltips whenever you can, because it's good style to tell a user whereto you send him. User friendly Web sites donate a tooltip to every link, and by the way to other HTML elements like headings, row and column labels, footnotes etc. too. Nearly every HTML element you can use in the BODY section knows the title attribute.

Since the tooltip gets displayed for a few seconds only, don't overload it. Preview your pages and check whether a visitor can read the text before it disappears. For better readabilty you can insert line breaks, a new line (LF or CR+LF) in the HTML code works, <br /> doesn't:


...<a href="URI" title="Tooltip Title
Very short and to the point description of the linked document.
Additional information in a longer uninterrupted line of text.">anchor text</a>...


If you pull the tooltip's text from a database, you should strip all HTML tags out, as a precaution. HTML tags accidental left in tooltips look plain weird.

Although there is no evidence we're aware of, search engines may use the content of the title attribute in their ranking algorithms. Hence go ahead and put in decent keywords, but don't stuff the tooltips with keyword phrases. If the tooltip has impact on rankings, most probably its importance is less than surrounding body text.

Back



class = "Reference to a CSS class"

You'll have different sub-classes of links on each page, thus you should encapsulate their layout and behavior. For example a link in a menu bar is different from a link within the body text. Define CSS classes for each link class:


a.menu        {font-weight: normal; font-size: 10pt; color: navy; }
a.menu:hover {font-weight: bolder; font-size: 12pt; color: red; }
a.body        { }
a.body:hover {font-weight: bold;                    color: blue; }


Then in your menu bar code links as follows:


<a class="menu" href="URI">anchor text</a>


On mouseover the link's anchor text will become bigger, bolder, and red.
Within the body text put:


<a class="body" href="URI">anchor text</a>


On mouseover the link's anchor text will become bold and blue.

Back



style = "CSS attribute/name pair(s)"

Everything you can do with the style attribute can better be done with a CSS class referenced by the link's class attribute. Using style on the element level has several disadvantages. For example converters like html2pdf and even some user agents can't handle CSS attributes in HTML elements. 'Copy and modify' is forbidden by rule, a developer breaking this rule loses all brownie points. Once you put the first style attribute in a HTML element, you'll do it further and chances are you will copy and modify. However, here is a syntax example:


<a href="URI" style="text-decoration: none; color: black;">anchor text</a>


If the page's text color is black, 'anchor text' becomes a hidden link. Not underlined and displayed in the same color as other body text, a user won't spot the link before s/he does a mouseover. Although search engines don't penalize this kind of 'hidden links', you should not deceive your visitors, so don't scatter invisible links within text content. Use this technique in menu bars and other areas where the link is obvious and underlining screws the aesthetic sense of your layout.

Back



rel = "Type of forward relationship"

This attribute describes the relationship from the current document to the linked document specified by the href attribute. The value of rel must be a space-separated list of link types. Link types are case-insensitive, "External nofollow" has the same meaning as "External NOFOLLOW". Please refer to the LINK element section for a list of a document's META link types, in the following we'll discuss link specific relationships.

rel="nofollow" rel's 'nofollow' value was introduced by Google in January 2005 to fight comment spam. Search engines don't count nofollow-links for ranking purposes. A nofollow-link is not a negative vote, it just means that the source cannot vouch for the target. Use the 'nofollow' value where users can insert links, for example in blog comments, guestbooks and alike. For detailed information on rel="nofollow" links read our tutorial on steering and supporting search engine crawling.

rel="tag" rel's 'tag' value was introduced by Technorati and is defined here. By adding rel="tag" to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated "tag" (or keyword/subject) of the current page. Note that a tag may just refer to a major portion of the current page (i.e. a blog post). By placing these links on a page


<a href="http://en.wikipedia.org/wiki/seo" rel="tag">seo</a>
<a href="http://technorati.com/tag/search+engine+optimization" rel="tag">Search Engine Optimization</a>


the author indicates that the page (or some portion of the page) has the tags "seo" and "search engine optimization". The linked page should exist, and it is the linked page, rather than the link text that defines the tag. That is the last segment (everything after the last slash in the path) of the URI defines the tag's value, not the anchor text.

Tags belong to the blogosphere, social bookmarking services etc., they are rarely used on old fashioned Web pages. Most bloggers tag their posts, because lots of users subscribe to Web feeds (RSS, Atom, XML) delivering search results on particular tags of their interest. Here is an example of a typical bottom line of a blog post:


Tags: ()



rel="value1 [value2 . . . valuen]" Webmasters make use of several not standardized values in rel, for example 'advertising' to label affiliate links (in conjunction with rev="sponsor"), 'charity' to label off-topic links leading to non-profit organizations like UgandaCAN, 'external' to label links leaving a network etc. etc.

Basically you can put everything you find useful into rel, as long as the usage of a particular value doesn't conflict with a standardized microformat. For example bloggers qualify human relationships in blogrolls using XFN values like 'sweetheart date met' or 'met acquaintance'.

Back



rev = "Type of reverse relationship"

This attribute is used to describe the relationship of a reverse link from the anchor specified by the href attribute to the current document. The value of this attribute is a space-separated list of link types. For example, if you link to a sponsor, you could put rev="Sponsor" and rel="Propaganda".

rev="vote-for | vote-abstain | vote-against" Indexing and tracking applications like search engine ranking algorithms treat all links as endorsements, or expressions of support. This is a problem, as there is a need to link to documents one disagrees with as well, to discuss why. The votelinks microformat, introduced by , is used to qualify a link, in case of 'vote-against' possibly in conjunction with rel="nofollow".

At the time of writing, Yahoo! could make (experimental) use of votelinks and XFN values for community based searching and alike. Probably Google does its researches too, but there is no evidence that votelinks found its way into the PageRankô formula. As long as the whole votelinks thing lives in the blogosphere alone, it's unlikely that major search engines make use of it with regard to ranking of Web pages. However, it may be a good idea to start using it in other areas too.

Back



Intrinsic event handlers

The A element's valid events are onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup (all events are linked to JavaScript syntax descriptions, but can be used with other scripting languages as well). In the A element lowercase is obligatory for attribute names, so you must code onclick="...;" instead of the camelCased onClick="...;" notation used in JavaScript manuals!

When you make creative use of event handlers, bear in mind that not all vistors surf with JavaScript enabled. If the functionality is essential, you need a server sided solution. If you're just producing neat convenience stuff, don't worry. Just ensure nothing really important relies on JavaScript code.

For example you can track outgoing traffic using the onClick event handler. This is a search engine friendly way to track exit clicks, because the the commonly used method to link to a redirect script brings all kind of troubles. Or you can hide ugly affiliate links:


<a href="http://adtracking.your-sponsor.com/landing-page.php?affid=...countless-cryptic-parameters" title="yada yada yada" onmouseover="window.status='http://www.sponsor.com/'; return true;" onmouseout="window.status=''; return true;">call for action</a>


When a visitor moves the mouse over this link, the browser window's status bar displays a pretty clean URI, not the ugly value of the href attribute.

Back



Anchor Text

The linked text, usually designated as anchor text (or anchortext), should describe the linked resource short and to the point.

The anchor text should contain the most distinct keyword(s) applicable to the target document. Ensure the visitor gets an idea of the linked page's content even if s/he reads only the highlighted anchor text. If the link is a call for action, link complete sentences. That's very important, because most surfers are scanning nowadays, that is they often don't read the words before and after the text link. However, always try to define the links context with the surrounding text. A well formatted text link looks like:


"Hierarchical site maps are a must for every Web site. Especially on large sites some users rely on this navigation element, and search engine crawlers make use of sitemaps to crawl even pages deeply buried in the link hierarchy. To make use of site maps download the free SEO tool Simple Sitemaps now and generate your HTML site map in no time. Simple Sitemaps even adds a RSS site feed and a Google XML sitemap to your Web site!"


... <a href="http://www.smart-it-consulting.com/article.htm?node=154" title="Get THREE Free Site Maps for Your Web Site!
Simple SiteMaps generates HTML + XML + RSS Sitemaps!"><b>download</b> the free SEO tool <strong>Simple Sitemaps</strong> <b>now</b></a> ...


When it comes to search engine rankings, the anchor text and the surrounding text as well have great impact on both the source page's authority status and the target page's keyword relevancy. Always make use of the title attribute to describe the link's target.

Back



Image Element

If you link images, do not omit the image element's required alt and deprecated border attributes. In the alt attribute goes a descriptive text, telling the visitor something about both the image and the link's target as well. Do not stuff keywords in the alt attribute! border="0" suppresses the ugly rectangle indicating the link. If that is covered by your style sheet, omit border, or use it for reasons of backward compatibility only.


<a class="imagelink" href="URI" title="descriptive text"><img id="image-id" class="linkedimage" src="URI" alt="descriptive text" border="0" height="integer" width="integer" /></a>


Because image links have disadvantages when it comes to search engine optimization, you should provide an additional text link for each image link.



The Components of a Link [HTML Element: LINK]Next Page

Previous PageDefining Links, Natural Linking and Artificial Linkage


Anatomy and Deployment of Links · Index · Part 1 · 2 · 3 · 4 · 5 · 6 · 7 · 8 · Expand · Web Feed



Author: Sebastian
Last Update: September/7/2005 [1st DRAFT]   Web Feed

· Home

· Internet

· Link Tutorial

· Web Links

· Link to us

· Contact

· What's new

· Site map

· Get Help


Most popular:

· Site Feeds

· Database Design Guide

· Google Sitemaps

· smartDataPump

· Spider Support

· How To Link Properly


Free Tools:

· Sitemap Validator

· Simple Sitemaps

· Spider Spoofer

· Ad & Click Tracking



Search Google
Web Site

Add to My Yahoo!
Syndicate our Content via RSS FeedSyndicate our Content via RSS Feed



To eliminate unwanted email from ALL sources use SpamArrest!





neatCMS

neat CMS:
Smart Web Publishing



Text Link Ads

Banners don't work anymore. Buy and sell targeted traffic via text links:
Monetize Your Website
Buy Relevant Traffic
text-link-ads.com


[Editor's notes on
buying and selling links
]






Digg this · Add to del.icio.us · Add to Furl · We Can Help You!




Home · Categories · Articles & Tutorials · Syndicated News, Blogs & Knowledge Bases · Web Log Archives


Top of page

No Ads


Copyright © 2004, 2005 by Smart IT Consulting · Reprinting except quotes along with a link to this site is prohibited · Contact · Privacy