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>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
urlcan 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 -
- 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:
- 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
targetattribute 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>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 special kind of link, the
mailtonotation 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:email@example.com?Subject=Linking">email me</a>. You may notice that I have used this type of link over on the contact me page.
See the linking example, and select 'view source' in your browser to see the html code.