Link Tags

Find in-depth information about html tags at W3 Schools.

Links (<a> and </a>) are what first made the internet different from all previous media they and still provide the most important functionality of web-based education today. Links can send the user to another page you have created, another place on the same page, or to an entirely different website.

There are two different ways to create links on a set of your own web pages (website). You can create links that point to a page using a path relative to the position of the page in which the link is placed or to an absolute position on the internet (a url or universal resource location).

Relative hyperlinks can be useful in your own website if you plan on drafting it in one location and then actually hosting it (placing it for use on the web) in another location or several locations. This method saves revision time because as long as your web pages are always kept in the same directory (folder) structure, the links will work.

<a href=”otherpage.htm”>Go to the other page</a>

This link sends the user to a page in the same directory (folder) called ‘otherpage.htm’. The ‘href’ attribute determines what page your browser will try to open when you click on the text ‘Go to the other page’.

An absolute hyperlink must be used to link to a page or resource outside of your website. It can also be a good idea to use when you think that the page your are creating may be placed in contexts outside of the rest of your website. This link uses the complete url (universal resource locator), for example: http://www.myinternetprovider.com~myname/otherpage.htm could be a url for the page described in the previous paragraph.

<a href=”http://www.myinternetprovider.com~myname/otherpage.htm”>Go to the other page</a>

It’s a good idea to give your links a title so that people can see what it links to if they hover over it (though ideally this should be obvious from the context) and so that visually impaired people can have this title read to them by a screen reader.

<a href=”http://www.myinternetprovider.com~myname/otherpage.htm” title=”This link sends you to the other page”>Go to the other page</a>

Another attribute that you should consider for your links is the target attribute that determines whether your linked page will open in the same window or in a new window (in many new browsers setting your link to open in a new window causes it to open in a new tab). To have your linked page open in the same window just ignore the ‘target’ attribute. If you want the new page to open in a new window or tab then set the ‘target’ attribute to ‘_blank’.

<a href=”http://www.myinternetprovider.com~myname/otherpage.htm” title=”This link sends you to the other page in a new winow or tab” target=”_blank”>Go to the other page</a>

<a href=”http://www.myinternetprovider.com~myname/otherpage.htm” title=”This link sends you to the other page” target=”_blank”>Go to the other page</a>

You can link more than just text. You can link an image, the cell of a table or a ‘div’ tag (a tag used for containing other content). Here is an example of an image linked to another website. The ‘a’ tags are wrapped around the html code used to bring an image into your web page. You will learn more about adding images to your page in the images section.

It's me!

<a href=”http://www.myinternetprovider.com~myname/otherpage.htm” title=”This link sends you to the other page in a new winow or tab” target=”_blank”><img src=”http://farm4.static.flickr.com/3440/3967500905_2b0da0242b_s.jpg” style=”float:right; padding-left:8px; border:none” title=”It’s me!” alt=”It’s me!” width=”75″ height=”75″ /></a>

Finally, creating a link on your website doesn’t end with writing the html. You must check your links from time to time on your live website, especially the links to external websites. As you become more familiar with creating links and the sites that you often link to, you will develop a sense of those organizations that maintain a stable system for their web pages (and therefore your links to these pages don’t break) and those organizations that frequently redesign their site in ways that force you to revise your links.

Use the tool below to try out some this html.

Leave a Reply