html Links

Links form the foundation of the internet and they are what make the W.W.W. web like, one document on the internet can be linked to many other documents and those documents can also be linked to many more documents, and so on.
If you were to draw a diagram of this structure it would resemble a spiders web, this comparison has spawned many "web" terms commonly used regarding the internet.

As well as linking documents you can also link just about any other type of content that can be delivered over the internet, email address's, FTP sites, and media files ie music and video ect.
On this page we will look at the basics of linking html documents together and how to create a mailto: link so users can send feed back ect, plus how to create anchors in a web page too.

1. The link itself is the text in the main document that refers to another document.
2. The target is the document (or location within the document) to which the link leads.

The link has two components, these are a descriptor and a reference to the target , the target is a document that can be delivered over the internet.
The decriptor and the reference are specified in the anchor <a> tag.
which is illustrated in the code example below.

The target part of the link is specified by the href attribute, and the descriptor part of the link appears between the "start" and the "end" anchor tags  <a href="url_of_target">descriptor</a>
For example if an imaginary company called Acme Gasket Company has a web site that is called acme.gaskets.com the anchor tag  or link to the site would resemble the code example below.

Downloads:

Download the dummy search example. Download the source code in a text file.

This is what a link looks like Dummy web search if you click on the link it will open a new window containing a web page I made with a link to the imaginary Acme Gasket Co web site.

If the name of the document is not given in the link then the Web server will send the defined top level document, this document is typically named index.htm or index.html
If such a document does not exist or has not been defined for the server, then an error will be returned to the browser.
The browser will then display error 404 which is illustrated by the screenshot below of Internet Explorer.

The descriptor text "Acme Gasket Co's web site" would be highlighted in the document this is to show that it is actually a link.
The default highlight for an anchor or link is a different colour font and underlined, it is possible to change the highlight colour and even have no underline.

The "strict" html standard specifies that anchor links should be placed within block level elements such as paragraphs, divs, headings and so on.

Top of page

As mentioned earlier it is also possible to link to other things besides html documents.
Basically all you need is the URL of the item that you want to link to, and also the necessary protocol required to reach the item.
An example of this would be linking to a document that is on an FTP site, you could use an anchor similar to the code example below.

The protocol in the example above was specified as ftp: and not (http:) and the server name is specified as ftp:example.com and the path to the file and the file name are specified as /publishing/example.zip

You can link to all sorts of content on an ftp: server so that users can then download the content from your web site, and the content itself it can be any type of media such as documents, images, music, ring tones or video ...

Although you dont necessarily need to set up an ftp: server just so that users can download files from your web site you can use a normal link and it will work the same way.
As an example all the examples on the page or any of the pages on the site use normal links to point to the .zip folders containing the example files, which are either .html or .txt (plain text) files as the example below illustrates.

You may have noticed that I have have not specified a protocol in the example above, this is simply because the .zip folder is stored locally on the same server as the rest of the web site.
However if the .zip folder was stored on a different server at a different location then we would need to specify the protocol which would be either http: or ftp: depending on the server.

Top of page

A similar method can be employed to link to an email address, and clicking on the link will usually spawn an instance of the user's email client ready to send an email, to the address that has been specified in the link which is illustrated in the code example below of a regular mailto: link.

This is what the mailto: link looks like Contact Us

If you want to have the message sent to more than one recipient you must use a comma (,) to separate each of the email address in the To line of the message like the example below.

It is also possible to add more elements to the mailto: link and fill out the cc, bcc fields and have copies of the same email sent to the email address’s in these fields as well as those specified in the To field.
You can also to fill out the subject fields like this "Subject: AdminAcmeGaskets" which can be a useful way to filter the emails that you recieve, and you can even put some text into the body of the email too, as the example below illustrates.

This is what the more sophisticated mailto: link looks like Contact Us

If you want to include more elements to the mailto: link after the email address in the To line, you use a question mark ? to indicate that you want more elements than just the To line like the example below.
mailto:someone@acme.gaskets.com?
Then you can specify the other elements that you would like to include in the mailto: link.

• cc = send a carbon copy to email address/s.
• bcc = send a blind carbon copy to email address/s.
• subject = the subject of the message contents.
• body = text content in the body of the email message.

If you want to add subsequent elements to a mailto: link after the To line you have to separate each of the elements with an ampersand (&) which you must also be escaped to an entity because it is now part of a URL.
Also if you use the subject or body elements in a mailto: link then you will need to use %20 to URL encode the spaces between the words like this this%20and%20that so they will be rendered properly.
When working with extra elements treat them as "name value" pairs, for instance the name part of the element is the elements type ie cc, and the elements value would be an email address ie someone@acme.gasket.com which gives us cc=someone@acme.gasket.com

Remember that the spaces between words should always be replaced by %20 to encode them to be passed in a URL and to ensure that the browser will render the text properly.
Always escape the & ampersand sign to &amp; in the mailto: link because the parameters or elements are part of a URL, you can find more information here at the WDG web site.

The mailto: link provides the easiest way to allow users to send you a message.
The user must have an email client on their system (PC) such as MS Outlook, Outlook Express etc, that is configured properly and the email client is set as the program that the browser must use to handle email or the link will not work as intended.

If the visitor just happens to use web mail or they are in a cyber cafe or maybe they at their freinds house down the road etc, unfortunately they cannot take advantage of the mailto: link to make contact.
The only way that you can guarantee that any user no matter what software is installed on their system can send a message that you will recieve, is to provide a form on your site that sends the data to a CGI script which does something meaningful with the data ie, the script processes the data and sends it to you in an email.

With regards to the debate about accessibility and the question of the mailto: link spawning an instance of the users email client being regarded in the same way as causing a pop–up type window which could alarm the user, and the question– " is using the mailto: link an accessiblity issue, and should you warn the user of the consequences of clicking on the link? "

Myself I do not think that there is an accessibility issue here, simply because most users know through experience that an instance of their email client will be spawned when they click on a mailto: link on a web page, and wont be suprised or alarmed by its appearance, and in most cases probably expect this to happen.
If anything it assists accessibility because the user is presented with an interface which they will already be familiar and comfortable with, also when they send an email a copy of the email will be saved to the Sent Items folder in their email client, so they have a copy on their PC which makes it easy to find later and archive etc.
Ultimately the author has no control of the action of the link which is determined by the user agent, which can be configured by the user, so when a user clicks on a link and an instance of their email client is spawned it can be classed as an "anticipated" behaviour.

Finally I must also point out the down–side to using the mailto: link, is that spammers can easily harvest email address’s from mailto: links in the source code of a web page using a spider or spambot.
Fortunately there are quite a few techniques that you can employ to make it very difficult or impossible for spiders or spambots to harvest your email address.
Providing a form for users to contact you that uses a CGI script to send the data in an email message, means that your email address is not available in the source code, but you need to make sure the script is secure so that spammers cannot abuse it.
You can also use simple obfuscation (obscuring) of the characters in the source code of the mailto: link, or you could use Javascript to insert the mailto: link when the page has loaded so that it is not available in the page/documents source code.

You can find more information here on this page mailto: obfuscation

Top of page

The most popular link style on the internet is a link to another html document or web page, when this type of link is activated it will cause the browser to load the traget document or page, and control is passed to the target page.
To link one web page to another web page, you have to specify the target's URL in the anchor tag.
For instance if you wanted to link to the Gasket Companys aboutus page on their web site, and it is in the aboutus directory on their Web server.
Then the href parameter of the link would look like the code example below.

The URL in the code example above http://acme.gasket.com/aboutus/about.htm contains, the protocol, the server name, the directory name, and the filename.
The screenshot below illustrates this all the components of the URL are clearly marked.

The components of a URL are always follow the same form the protocol http: is always first and it ends with a colon.
The server name comes next and it is always prefaced with a double slash //www.acme.gasket.com
The next component is the directory or (directories) where the file/page resides, they are separated with slashes /aboutus/
The last component of a URL is the filename which is also separated from the directory it resides in by a slash /about.htm

The name of a server actually has two components which are the servers name and then the domain in which the server resides.
For instance in the example use above www is the servers name and acme.gasket.com is the domain name.
Although W.W.W. is a standard name for a Web server, the actual name can be "anything" an example is the US based Web server for Internet Movie Database, it's named "us.imdb.com".

Top of page

There are two types of URL styles and also two types of links, they are "absolute" and "relative".
You have already seen the "absolute" type of link the sreenshot above is a good example, this is where the link to the document provides the full path.
This also includes the transport protocol, ie http: and the Web server's address as well.
These types of links are called "absolute" because the URL itself is absolute, this means that it does not change, no matter where the document in which it appears is located.
This is a good example of an "absolute" link Google no matter where "this" page/document is located this link will always point to the Google UK page.
Even if I move the page to a different directory/folder or to another server the link will always point to the Google UK page "http://www.google.co.uk".

The other type of link, a "relative" link does not provide all the details to the referenced document, it's address is treated as relative to the document where the link appears.
Relative links are only useful for linking to other pages on the same web site, this is because any reference to a document that is off the site will require the address of the Web server, where the document resides.
Relative links are easier to maintain on a web site where the pages relationships will never change, so if the pages move to another location on the site, the relative links between the pages will not change.
But if the links had been coded absolute then they would definitely have to change.
This is an example of a relative link href="/aboutus/about.htm" the path is pointing to the /aboutus/ directory (folder) and then to the /about.htm document that resides in that directory.
Also the url indicates that the document containing the link and the document it is linked to both reside in the same "root" directory.
If the document was moved into another directory such as the /products/ or the /support/ directories the link will still work.
A relative link can be used in many documents in different directories that all reside in the same root directory (/), the graphic below illustrates this all the documents have a link to the about.htm page on the web site.
The directory shortcuts listed below help us to achieve this, the documents position determines which directory shortcut is employed.
To see the example in the graphic below of the imaginary Acme Gaskets web site rendered in a browser use this link relative links.

Downloads:

Download the relative link example. Download the source code in a text file.

Here are some useful directory shortcuts to help specify where pages/documents are on a web site, and they are essential if you use a directory hierarchy to structure your web site, like the one in the graphic above and the relative link example.

• Prefacing a directory with a (/) slash references it as a subdirectory of the root directory.
• Prefacing a directory with a period and a (. /) slash references the directory as a subdirectory of the current directory. (In plain terms the same directory/folder where the current page/document resides).
• Prefacing a directory with a double period and a (. . /) slash references the directory as a parent directory to the current directory.

Top of page

Normally when a user clicks in a link in a page it opens the page that the link refers to in the active browser window and replaces the page currently displayed.
It is possible to control where the page opens by using the target attribute of the link tag.

The link tags  target attribute has been deprecated in strict  html however most browsers still support the attribute and it can be very useful.

The target attribute supports the values listed below.

• _blank   opens the linked document in a new browser window.
• _self   opens the linked document in the same frame.
• _parent   opens the linked document in the parent frameset.
• _top   opens the linked document in the main browser window and replaces any or all frames present.
• _name   opens the linked document in the window with a specified name.

The code example below illustrates how to open a linked document in a new browser window using the target attribute _blank so the user does not leave the web site, in the same way that all the examples on this web site open in a new browser window.

Downloads:

Download the top example. Download the source code in a text file.

The target attribute _top is quite useful especially if your page happens to be locked in a frame or iframe in a web page.
It is possible to automatically check if your web page is locked in a frame or iframe as the page loads in the browser usually by employing a JavaScript, and the page will be automatically reloaded if it is locked in a frame or iframe.
The code example below illustrates what the link would look like.
To see a working example use this link to the top attribute example.

Downloads:

Download the name example. Download the source code in a text file.

The last value listed above for the target attribute _name can be used to enhance the user interface experience if it is employed correctly.
There are certain methods available for opening new windows (usually the JavaScript open.window method) that allow you to give the new browser window a unique name.
It is then possible to use the name to direct or push a linked document into the new window.
For example if we open a new window named gasketWin and we wanted to direct the Acme Gasket Co’s homepage into the new window the link would look like the code example below.
To see a working example use this link to the name attribute example.

The debate about whether a new window should ever be opened is very fierce.
Unfortunately the new windows that most users are accustomed to are the pop–up ad variety which are very unwelcome.
However new windows used to enhance the user interface, can be very effective when used like a dialog box or to act like a window an Operating System spawns.
It is a good idea to get into the habit of informing users when a link will open a new window so that you do not suprise them.

Top of page

It is possible to give a link a title, the anchor tags supports the title attribute, this causes most of the current browsers to display the text of the title attribute as a Tool Tip, when the mouse hovers over the link.
This is a very useful tool and you can give the user extra information about the link, even if they have a none graphical browser or perhaps they have a disability of some kind and would not otherwise recieve this information.

Try the example below, mouse over the link and a little box will appear containing a description of where the link leads to.

More information about our Gaskets can be found at here our web site Acme Gaskets

This feature allows us to pass more information to the user, which could be about the page, and its content before they have clicked on the link.

Top of page

Downloads:

Download the anchor & link example. Download the source code in a text file.

The anchor tags  can also be used as a marker in the current document to provide a bookmark that can then be linked to directly.
For example if you had a large document with several sections you could create links at the top and bottom of the document or in a navigation panel or frame that link to each of the sections of the document, giving easy access to each section of the document.
To see an example of a page that uses anchors and links to make it easy to navigate to the different sections of the page use this link anchors and links example.
The example page has two sets of links to navigate around the page, one set of links uses anchor <a> tags  name attributes, and the other set of links use the id attribute of the heading <h2> tag  for each Chapter.
To create an anchor you can use the anchor <a> tag  with the name attribute
The code example below illustrates how to create an anchor using the <h1> heading in a document.

You can also write the code like this, but both are xhtml valid

To link to the anchor you use a standard link with the anchor name at the end of the url in the link.
The pound # sign is used to separate the anchor name from the rest of the url.
It is possible to reference the anchor using the name or the id attributes alone #top or by including the html documents name like in a standard url targetpage.htm#top both of the methods are valid.
The code examples below illustrate how to reference an anchor tag with a standard link.

You can also use a block elements id attribute to reference an anchor the example of code below illustrates how to used the <h1> elements id attribute to create an anchor.

Top of page

It is also possible to use an image and nest or embed the image in a link and make custom buttons for your web pages using graphics editing software such as Adobe Photoshop, Paint Shop Pro, The Gimp etc.
The image <img> tag  is nested in the link <a> tag  it replaces the descriptor_text in the link.

It is also possible to create image–maps and make certain areas of an image clickable so that they can be used as links to navigate to other web pages on the site or on other web sites.
You can find more information about using images in links and and creating image–maps, there is also an example that you can be download here on the images page.

Top of page

You can assist users if you define a tab order for the links in your document.
In the same way that most graphical Operating Systems, allow the tab key to be used to move through elements of the interface, including any links that are present.

If your not sure where the tab key is or what it looks like on your PC or laptops keyboard have a look at the picture here on the right of a standard PC keyboard with a little red arrow pointing to the tab key.
It is usually found on the second row of keys from the top of the keyboard right next to the key for the letter Q of QWERTY.
The tab key itself has two arrows pointing at a bar on it, one above the other, the top arrow is pointing to the left and the bottom arrow is pointing to the right.

The default tab order is usually the same order that the links appear in the document.
However there may be occasions when you might want to change the tab order, this can be achieved using the tabindex attribute.
The tabindex attribute takes an integer as its value and the integer is used to define the tab sequence in the document.
For example the link at the bottom of the page would normally be last in the tab order, we can use the tabindex attribute to make it the first by setting the value to 1 which is illustrated in the code example below.

Downloads:

Download the tabindex example. Download the source code in a text file.

I have used the "Top of page" link deliberately for the code example and the example web page because it is usually found at the bottom of web page, so the first time the user hits the tab key the page will be automatically scrolled down to the make the link accessible and visible to the user.
To see the page in a browser use this link tabindex example web page.
I have set the value of each links tabindex, so that each time the user hits the tab key the page will scroll up or down to demonstrate the effect.

Remember that most of the interface elements in html are defined by the browser which means that the browser defines how tabindex is implemented and how the tabbed elements are accessed.

Top of page

Each of the links in a document can be assigned a shortcut key to make it easier to navigate for keyboard–only access.
This is done using the accesskey attribute with the anchor tag.
The accesskey attribute takes one letter as its value, and the letter can then be used to access the link or anchor.
In the code example below the link defines "T" as the access key, as in "T" for Top of page.

Downloads:

Download the accesskey example. Download the source code in a text file.

I have chosen the Top of page link for the code example and for the web page example to demonstate the effect of the accesskey.
If the user holds down the Alt key and they press the "T" key at the same time the page will automatically scroll down to the Top of page link.
To see the example web page use this link accesskey example web page.
Remember Alt+T down Alt+B up.

Access keys are handled differently by different browsers and operating systems.
Some operating system and browser combinations require that special keys are pressed along with the the accesskey that has been defined for the link.
For Windows users who use Internet Explorer as their default browser, the user has to hold down the Alt key while they press the accesskey.
The handling of access to the link is not consistent in different browsers, some will activate the link as soon as the access key is pressed, and others just select the link needing another key to be pressed to activate the link.

Keyboard shortcuts are great but if you employ them make sure you let the user know what the shortcuts are.
You could put the shortcut under each link in the navigation panel on the page like I have done in the example page.
Another way would be to use a letter from the links descriptor text like the "T" from Top of page and then highlight the letter in the links descriptor text like this Top of page
Or the most obvious, you could just put the information in a small paragraph next to the links where the user will easily find and see it ...

Top of page

It is very important that the links in a document stand out so they are easily recognised by users.
A link has four different status modes which are listed below.

• Link – The standard link in a document that is not active or visited.
• Active – The target of the link is active in another browser window.
• Visited – The target of the link has been previously visited.
• Hover – The mouse pointer is over the link.

Each of the modes listed above should be coloured differently so that the user can easily tell the status of each link on a web page.
The standard colours for the different link status modes are listed below.

• Link – Blue, underlined text.
• Active – Red, underlined text.
• Visited – Purple, underlined text.
• Hover – No change, the link remains the same colour.

Again along with other presentation attributes in html, the browser plays a very significant role setting the link colour and the text decoration.
Most of the browsers follow the default colour scheme that is descibed here, but some browsers do not conform to this scheme.

To change a links text colour or another attribute you can modify the properties of each of the status modes of the anchor tag.
For example you could use a style to set the default visited link text to yellow and the font weight to bold which is illustrated in the code example below.

This is what the link would look like when the user has clicked on it link

Remember when you set the properties of an anchor tag  without specifying a mode means that all of the link modes now share the styles characteristics.
An example of this would be setting a style that sets all the status modes (link, active, visited) to the same colour to red which is illustrated in the code example below.

If you wondering why would anyone want to change the colour of links in a document/s ?
A good reason to change the colour of the links would be simply because the normal text colour in your document happens to be blue, the same blue as the default link colour.
In this case it would be a good idea to change the color of the text in the links so that users can easily recognize them as links in your document.
It is good practice to define all the link attributes, rather than haphazardly defining one or two of the link status colours, defining each status modes style to ensure that they appear in your document the way you intended.
In the code example below a style is defined for each of the link status modes for a document.

Downloads:

Download the link colour example. Download the source code in a text file.

Consider the code examples above and below, note the redundancy in the styles in the code example above.
Both the code examples do the same thing and cause the links in the document to behave in exactly the same way, but the code example below has a few subtle differences in each style which take advantage of the cascade effect.
You should strive to illiminate redundancy in your styles by effectively shortening each style by defining the anchor tags  attributes by itself first then define only the attributes that are different in each of the status modes.
To see an example web page using both of the code examples use this link colour example.

If you use styles to change link colours and there are <a> anchor tags  in the document the styles may have an unexpected affected, depending upon the syntax used in the anchor tag.
To avoid any side effects use either this syntax <a name="pagetop"></a> or use a block level elements id attribute to create anchors in your documents.

Downloads:

Download the colour side effect example. Download the source code in a text file.

I have created an example web page to illustrate the problem, the page has two sets of links to navigate through the sample Chapters in the page similar to the anchor tag  example, but there are only 3 Chapters.
The anchor tag above Chapter 1 uses the following syntax <a name="chapone" /> which for some reason causes the link colour styles to be applied to the heading, and all the text below as though the tag  is not closed.
Chapters 2 and 3 are unaffected because both anchors use the following syntax <a name="chaptwo"></a>
To see the example web page use this link colour side effect.
Internet Explorer and Netscape Navigator use the first style and underline the text and colour the it blue.
The Mozilla browser applies all the styles quite faithfully, yet the Opera browser recognises that the anchor tag  is closed, and renders the page without problem.
I suppose this is another demonstration of how different browser Developers interpret and apply standards.

Top of page

The link tag  can be used to provide additional information about a documents relationship with other documents independently, even if the current document is linked to other documents or not.
The link tag  also supports exactly the same attributes as the anchor tag,  but the syntax for the tag  is slightly different.

• The link tag  does not encapsulate any text.
• The link tag  does not have an ending tag.

To illustrate the role of the link tag  the following code example could be used to define the relationship between three imaginary web pages of sample Chapters from a book.
The links define the relationship between the document chapter10.htm and two other documents chapter9.htm and chapter11.htm

The link tag  does not cause any visible text to be rendered by the browser, but the user agent can use it to provide additional naviagtion or other types of user–interface tools.
An important use of the link tag  is that it can be used to provide alternate content for search engines.
An example of this could be to reference a french version of of the document in the example above chapter10.htm the code example below illustrates what the link would look like.

There are other relationship attribute values ( start, contents, designates, stylesheet, etc) can be used to provide relevant information about document relationships to search engines

Top of page

When you are defining links and references in your html documents you should be as exact as possible with your references.
For instance when you reference a graphic with an <img> tag  you should include the protocol and the full path to the graphic, like the code example below, referencing an image on a ficticious web site.

However having to type the full path to every local element that is referenced in your document is not very practical.
The example document shihtzu.jpg could be easily referenced by a document residing on the same server using the code in the example below.

What if the document is relocated ?
Perhaps the image directory is no longer a subdirectory of the directory where the document resides, or the image could be on a separate server.
These problems can be solved using the <base> tag  which sets the default document base, or the default location of the document.
An example of this could be a document in the root (/) directory of the imaginary samplepix.com server the documents <base> tag  would resemble to code example below.

Downloads:

Download the base tag example. Download the source code in a text file.

Any absolute references used in the document (with protocol and full path) will continue to point to thier targets, however any relative references (without protocol and full path) will be referenced against the path defined in the <base> tag.
The <base> tag  also supports the target attribute if you set the target attribute to _blank all the links in the document would then open a new window.
To see an example where the links on the page open new windows use this link base tag  example.
The links to Google and Microsoft both have _blank target attribute applied so they open a new window anyway, but all the image links use the target attribute applied to the <base> tag.

You can find more information at the W3Schools web site on base tag.
You can find more information at the W3Schools web site on links or <a> elements.

	Enter your search terms Submit search form
	Web www.syntaxsandbox.co.uk