Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How and when to use links in HTML pages - Part 2

DZone's Guide to

How and when to use links in HTML pages - Part 2

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Now that we can access all pages within our website from our home page, if you missed part 1 you can read it here, things are looking good but, our site is not really usable or accessible to any of our users. With our navigation nailed down, go ahead and copy the entire navigation structure to all of the other pages that currently only have a heading. Having done that test out your navigation... Oh no! We are getting the dreaded 'File Not Found' error back from the browser. Don't worry, there is a simple explanation for this. The current links point to a location the is relative, more on that in a second, to the home page. Therefore, when we transfer the navigation system to other pages that are not on the same level as out home page, these links are no longer correct.

Now what did I mean be pointing to a location which is relative? Well there are three types of ways you can link to a resource, relative, absolute and anchor. When you are linking to resources with the structure of your own website, it is best to use relative links to get around. When linking to resources that reside outside your website structure, then you have to use absolute linking. The anchor link is a special case and we will discuss that a little later. So what is the difference between relative and absolute linking with regards to the code? Have a look at the code below which illustrates the difference.

relative: <a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a>

absolute: <a href="http://www.someothersite.com/bookings/index.html" title="Get your pet ready for the show">Bookings</a>

So, as you can see, the difference is that with absolute linking your are providing the full path to the resource you want to link to while with relative linking, you provide only that which will get you from where you are to where you want to go. With this in mind, let's tackle the pages one level deep and have them link successfully to pages above and back. The image below shows the area we are going to be focusing on.

Seeing that we are going to link within the same website we will employ relative linking. Our first level resources that we are going to link to and from are advice_corner, bookings, contact, pets and products. The linking from home to there pages are already in place and works so, our first task is to ensure that we can link back to the front page from the resources mentioned above. Currently our navigation on these pages looks as follows:

<ul>
<li><a href="index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li>
<a href="pets/index.html" title="Take home your best friend">Pets</a>
<ul>
<li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
<li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
<li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
<li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
</ul>
</li>

<li>
<a href="products/index.html" title="View our unique product catalogue">Products</a>
<ul>
<li><a href="products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
<li><a href="products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
<li><a href="products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
</ul>
</li>
</ul>

If you currently follow a link to any of the inner pages and hit the Home link you will find that you do not get and error but you also do not move away from the current page. The reason is simple, the current page you are on is called index.html and the page the link points to in index.html, so the browser will reload the same page again. So how do we actually make this go to the home page? This is very easy, if you have ever used DOS on Windows orsimilar on Linux you will now that using .. takes you up on level. So, if you are in bookings, and want to go to the homepage that is one level higher, you need to append the link with .. like so

<li><a href="../index.html" title="Return to front page">Home</a></li>

Go ahead and update all of your index.html for the first level pages on advice_corner, bookings, contact, pets and products to use the above relative linking. What we are saying with our link syntax is that I want to go to a page called index.html that is one level higher, relative to my current position in the website structure. Go ahead try it.

Great it worked! Now lets look at getting the pages two levels deep to link back to the front page and the index page of there applicable sections. So we are now expanding to the level shown in the image below:

[img_assist|nid=2367|title=Sitemap demonstrating levels|desc=|link=none|align=none|width=456|height=456]

As explained before we are linking relatively to out current position. If ../ took us up one level for our home page links from level 2 we need to go two levels up so this is what we need:

<ul>
<li><a href="../../index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li>
<a href="pets/index.html" title="Take home your best friend">Pets</a>
<ul>
<li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
<li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
<li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
<li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
</ul>
</li>

<li>
<a href="products/index.html" title="View our unique product catalogue">Products</a>
<ul>
<li><a href="products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
<li><a href="products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
<li><a href="products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
</ul>
</li>
</ul>

Go ahead and make this change to all your second level pages. After having done so, the index page at for example cats/index.html will look as follows:

<ul>
<li><a href="../../index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li>
<a href="pets/index.html" title="Take home your best friend">Pets</a>
<ul>
<li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
<li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
<li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
<li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
</ul>
</li>

<li>
<a href="products/index.html" title="View our unique product catalogue">Products</a>
<ul>
<li><a href="products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
<li><a href="products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
<li><a href="products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
</ul>
</li>
</ul>

With the changes applied to all the relevant pages, you will be able to go to for example the index page of cats and when hitting the link to home, will bring you back to the homepage of the site. Go on try it out. With part three of the series we will put everything together and enable the user to navigate from anywhere to anywhere, other types of links as well as how to make your links accessible to users of assisted technologies. But while I put this together, go ahead and try to link as many of the pages in the current site together. Have fun!

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}