The Importance of HTML Links to the Web

The Internet is knitted together, and called ‘the web’ because pages link to each other. It creates an inter-connected super library of media – text, images, video and interactive features all woven together to allow people to find the most useful, relevant information to them. This is achieved through links.

Every website has at least one link on it – at least if the site has more than one page. When you use a menu on a website – they’re links. If you click a photo to go through to a gallery – it’s a link. If you click an ad because it interests you – that’s a link. When you do a web search, you find a list of links relevant to your search query. Without links, the web would just be a selection of isolated documents, making it nearly impossible to find anything relevant or interesting.

Page Sections (Demo)

• Using Links
• Link / Anchor Text
• Images as Links
• Internal Anchors

Using Links to Make a Multi-Page Website

So far we have been focussed on individual items on a single web page. Why don’t you go ahead and create a second .html or .htm page in the same folder as your previous one?

Now you have two different web pages, but there is no way for a user to know that you have a brand new page on your site. To do that we are going to learn the anchor tag. Don’t confuse this with the link tag for CSS, however!

<a href="/new-contact-page.html" title="Visit My New Contact Page!" target="_self">Contact Me</a>

<a> Tag Attributes

• <a> Tag: all HTML links, whether to another page on your own site, or to another website, use the <a> </a> tag pair. Make sure you close your tag else all the text after your new link will also be linked!
• href: this is for the URL to your target page. You can use the full URL, or a relative path. Here I have used /new-contact-page.html which means it will look for the domain the site is on and add my href value. At this point it may be easier for you to just use the full URL. If you’re linking to another site, you will have to use the full URL anyway.
• title: The title attribute gives users a tooltip if they hover their cursor over your link and can be used by screen readers and other tools for accessibility. In a very short sentence it should describe the target page, so people can check if they want to press your link or not.
• target: this attribute describes where the link should be opened. If you don’t use this (which you don’t have to) the link will open up in the same browser window or tab. Other values for this include:
• _parent: historically used when frames were a common layout method. Nowadays there are few real uses for this.
• _blank: will open up the page in a new window or tab (depending on how your browser is set up)
• CustomName: if you give your target a custom value, it will initially open in a new Window or Tab and silently give it your custom name. If that tab stays open and another link has the target set to your Custom Name, then it will load in your silently-named window/tab.

Back to the Top

Link or Anchor Text

Once you have finished your attributes you have completed your ‘opening’ anchor tag. What sits between your opening and closing tags is the ‘thing’ which is clickable. In this case ‘Contact Me’ is text which becomes clickable.

When deciding what text to use, consider what is most useful to your users. For a call to action like ‘Contact Me’ that might be the most appropriate – or even ‘Click Here’. But if I want to link in the middle of a paragraph, you may want to be more descriptive – like if I want to link to our HTML5 Tutorials, for example.

Always consider what reads well and helps your users when deciding what anchor text to use in a link tag.

Back to the Top

Using Images as Links

We can now combine what you learned in our HTML Images tutorial (see what I did there!) and create an image which is also a link.

<a href="https://resource-centre.net/html5-tutorials/html-fonts/" title="Tutorial on using Fonts in HTML"><img src="https://resource-centre.net/wp-content/uploads/2015/10/html-fonts-750x410.jpg" width="300" alt="Tutorial on Using Fonts in HTML" border="0"></a>

Instead of wrapping text in </a> tags, we simply put an image tag, this then give us this:

As this is purely a HTML Tutorial, it is important to note the border="0" within the image tag. The reason that is there is that some browsers may add a coloured border to your image (historically blue, but depends what rules the website is built on). This can look ugly. Adding border="0" to your image tag prevents this behaviour, leaving your picture the way you intended.
Back to the Top

Page Sections – Internal Anchors

If you’re creating a fairly long page (kind of like this one!) you may want to break it up into individual segments and provide a way for your website visitors to ‘flick’ between sections. This can be achieved using in-page anchors.

Step 1 – Create Your Anchors

Anchors look almost like links, but they don’t have to be links. They can be of course, but that choice is yours.

<a name="anchorname"></a>

This creates, visually speaking, nothing on your page! But it provides a ‘bookmark’ to part of your page, in this case we have ingeniously called it ‘anchorname’.

Step 1 – Link To Your Anchor

Somewhere else on your page, if you want your users to have the option to ‘flick’ to this section of the page then you use a more-normal <a> tag

<a href="#anchorname">Go to Anchor</a>

The difference here is that you must use the # before your anchor’s name. This kind of structure helps people view the content they’re really interested in. On this page you’ll spot I have Back to the Top links. I have set an anchor with the name ‘top’ at the start of this tutorial and then these anchors link to #top. Handy!

Linking to Another Page’s Anchor

The last bit to cover here is that you can link to a specific anchor on another page. This is done by adding, for example, #anchorname to a full URL like so:

<a href="http://www.example.com/interesting-page.html#anchorname">Go to Anchor on that Page</a>

If the link appears to load the page but not move to the anchor, then you will need to check:

• Does the anchor exist on the page?
• Have you spelt it correctly?

TL;DR – Anchors and Links

Without links there would be no web. In this tutorial you’ve learned how to create a text link, open it in a new tab, create a new image link and use page anchors. If you have any questions, feel free to use the comments!

Spread the Word