HTML Links and Anchors
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 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.htmlwhich means it will look for the domain the site is on and add myhrefvalue. 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
titleattribute 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
targetset to your Custom Name, then it will load in your silently-named window/tab.
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.
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
please tell how to add multiple links
You can create multiple links by wrapping the link code around different words. So Fake Link 1 | Fake Link 2 | Fake Link 3. So a common navigation method is to use different
<li></li>pairs and link the text in between. Is this what you meant? If I’ve misunderstood please help me understand what you’re trying to achieve and I’ll help out.Is there any way to do this, without showing the #anchor in the address bar?
I am trying to send people from one page, to a link on another page, but not show the #anchor at the end of the web address. The reason for this is that when people are refreshing the page, it goes back to the anchor, where as if they refresh, I’d like it to go to the start of the page, and not show the anchor name in the address.
I would either like to not show the #anchor, or to remove it once the anchor has been reached, without refreshing the page.
Is this possible? Keeping in mind that I am not a pro.
Hi Richard – the short answer is not easily. Anchors are designed such that you can link to the specific section from any other page, or any other site. I think you can do via jQuery though. I would be interested to know why you want to achieve this though, if you fancy sharing? Thanks!
Can you please tell how to combine multiple anchor tags having the exact same href into one for screen readers? For example, consider a product display, there is an image(has <a href=”url1″ rel=”nofollow”>), there is a View button below it (which also has the same href <a href=”url1″ rel=”nofollow”>) and the name of the product(which also has the same href <a href=”url1″ rel=”nofollow”>). Now in case of a screen reader, it reads the same url 3 times. So, we want to combine all 3 to one anchor tag. Not sure if this is possible. Thanks!
Hi Mickey – this is tricky and e-commerce adds another layer of complexity. Added onto that, the name being linked helps Internal Linking for site-wide SEO. I would argue you won’t need to link the image to the same URL. The image link should really be for Lightboxing or Zooming, so in reality you can cut that from linking to URL1. If it’s a product category, you could combine the product name and image into one link
<a href=”url1″ title=”description of target page” ><img src=”/path/to/image.jpg” alt=”product name”></a>
That would also remove one of the links.
Detecting screen readers (Google it!) is a hot debate and putting in special rules for screen readers kind of works against web accessibility, so I don’t suggest you do that.
I think in reality having 2 links is fine. Screen Reader users need to know that the text link and the button go to the same place, so that’s fine, in my opinion.
My last point would be – you have no need to “nofollow” internal links. Doing so could really hamper search engine bots indexing your site efficiently. Hope this helps – feel free to reply back if you need more information!