HTML Linking Tags

Learn how to create links on your web page. Links allow you to jump from one page to another by clicking on the link text. You can also jump to places on the same page (called fragments), to different sections of your site, or to another web site alltogether.

Basic Link - <a href="url">link text</a>

There are two main parts to a link tag: the text a user can click, and the web address they go to if they click it. The bit between the <a> and </a> tags is the link text, and is generally displayed in blue and underlined by web browsers. The href="url" part is the web address, where url can be set in several ways:

href="example.html" - another page in the current directory

href="example/page.html" - a relative location

href="http://www.example.com/page.html" - a full address (URL).

Link to a Fragment - <a href="#fragment">link</a>

It is often usefull to link to other places on the same webpage, such as other sections or chapters further down the page. The technical term for this is linking to a Fragment, where browsers will automatically try and scroll to that part of the page.
Fragments first need to be defined somewhere in a webpage by giving them a name, for example <a name="fragment_name">, then links to this fragment are created by using the hash (#) character: <a href="#fragment_name">Link</a>. To link to a fragment on another page you would simply append the fragment name to the address, for example: href="example.html#fragment_name".

Target Window - <a href="url" target="???">link</a>

You may not always want to link to a page and have it load up over the one you are currently viewing. Thats where the target attribute comes in handy. By setting the target="_BLANK" the page you link to will load up in a new window (or new tab in some newer browsers). Similary, "_self", "_parent", or "_top" will open the link in the current window, the parent window (used with frames) or the top level window, respectively.

Image as a Link - <a href="url"><img ...></a>

By placing an image tag between the <a> and </a> tags, you can turn an image into a link, and clicking on that image will then load the referenced page. You may notice that the image gets a blue border just as link text became underlined. This can be resolved by setting the border="0" attribute of the image, or using css.

Email Link - <a href="mailto:email"></a>

A special kind of link, the mailto notation link instructs the browser to compose and email to the specified address using the default email program. It but does not actually send any emails automatically. You can also set a subject for the email by using <a href="mailto:htmlguide@drgrog.com?Subject=Linking">email me</a>. You may notice that I have used this type of link over on the contact me page.