One of the greatest features of HTML code is the ability to interlink the contents of your documents with that of another. This is in fact the way the world wide web is designed to function, effectively a web of interlinking documents from around the world.
So, with this in mind you are at some point certain to want to create your own links either to other pages on your Website or perhaps to external web pages from other publishers .
The linking function itself really is very simple.
- Supply the anchor text to display on page.
- Supply a destination address (URL).
Creating an Anchor
Firstly lets look at the anchor text component of a link or Hyperlink as they are technically known. The anchor element as its name would suggest a way to anchor some kind of functionality or facility to regular page elements like text or images. In our case we want to add a link and the anchor will be a simple text string to which we will add the linking attribute.
To create an anchor you use the <a> my first anchor </a> tags. Where the my first anchor text is the actual anchor text and will display just as regular text would.
Okay, so you now have the anchor text of your link but as yet it is not anchoring anything so we now need to add our destination address.
Choosing A Destination Address
The destination address is the URL (web page address) of the Website or page you wish to link to. Personally I would recommend using an absolute address some thing similar to the format http://www.basewebmaster.com/html/creating-hyperlinks.php i.e. an absolute address is the full URL of the web page including the http:// request.
It is possible and even acceptable to use a relative address, that being an address relative to the page that the link appears on, for example.
If you are here http://www.basewebmaster.com/html/
and you wish to link to http://www.basewebmaster.com/html/creating-hyperlinks.php
A relative address for this page would simple be creating-hyperlinks.php
As said it is okay to use a relative address but this could potentially cause issues further down the road so best to use full address from the start.
Adding A Link To The Anchor
To add the address to the anchor element you need to use the href attribute. The final element should look something like this.
<a href='http://www.basewebmaster.com'>Webmasters guide</a>
Notice how the text has now become blue and underlined, this shows that the text is active and will perform some kind of action in this case it will redirect your page to the destination address.
Using Links To Navigate A Page
The href attribute is most often used to link to other web pages but in the same way they can be used to point to different parts of the same page. This functionality provides a great way to navigate or index larger documents.
Indexing The Page Sections
To point to a different section on a page you first need to allocate the different sections of the page, a kind of index value. This is done using the id attribute.
Simply add the id attribute to an element at the various sections of the page, a good element to use is the header tag as they often signify the start of a new section anyway. Assign the id a relevant value, if the section is on HTML use the value html for example.
<h2 id='html'>HTML Section</h2>
Referencing Sections Using The Anchor Element
Once you have your sections marked up appropriately you need to reference them using the href attribute within the anchor element as shown below.
Notice how in this case the # symbol proceeds the value, by using this the link will point not to an external page but to the containing page itself. When clicked the browser will scroll to the relevant section defined by the id attribute.
These are the basic rules for creating and using links on your web pages, there are many other attribute that you may include on your anchor elements which you can find in the Attributes Glossary but they are not necessary, they will simple add some functionality to your links.
If you are interested in learning more about links and anchors you might like to read this guide from www.w3.org which take an indepth look at the subject.
Hit the next article button below to continue with the tutorials.
blog comments powered by Disqus