When I read a blog article or a long web page, one of my favorite things to do is to go to a specific section that I want to read first. This is made possible thanks to the anchor links.
Do you want to see what I mean? Scroll towards the table of contents below. Each of the subjects of the table of contents is clickable, allowing you to jump directly in this section.
Pretty cool, right? The best part on this is that it is super easy to create an anchoring link yourself, even if you do not have HTML knowledge. If the Speak HTML is confusing, simply follow the examples of the real world below.
Note: if you are a hubspot client, Follow these instructions.
Table of contents
What is a HTML hyperlink?
A HTML hyperlink is a clickable link that can be attached to any HTML element On a web page, such as an image or a text. These links can be used to direct users to other pages of your site, external websites or even specific parts of a web page.
The hyperlinks are created using the HTML code, which is the language used to structure your website. The strategic use of hyperlinks can help you improve the user experience on your website by guiding users through your content and helping them discover related information.
What is an anchor link HTML?
An HTML Anchor link, also known as the jump link, is the link that brings you to a specific part of a web page. Anchoring links are particularly useful for guiding users through a long page.
An excellent example is the table of contents I mentioned above. The table of contents uses anchor links that connect to different sections of this blog article, which allows readers to find more easily the exact information they are looking for.
Allowing people to “jump” effectively in a certain part of a web page can make the content of your website more attractive. It is also important for the user experience because it makes your content more practical and scrolled for visitors to your site – but you must make sure to do everything correctly.
External links vs jump links
A jump link is a link that “jumps” to a specific section of a page on your website. External links, however, are hyperlinks who run users to a page on another website.
Anatomy of an anchoring link
The creation of an anchoring link is simple. But it is useful to understand what HTML elements are involved and how they all connect. These are the elements necessary to create an anchor link.
1. Anchoring element
The most essential HTML element of an anchor link is the tag of the anchoring element. This is the letter “A” with corner supports on each side. It looks like this: .
When you add the anchoring item, it can hyperlink to a web page, an e-mail address, a phone number, a file or a content section on the same page.
2. HREF
HREF – which means Hypertext Reference – is an attribute that specifies the destination of a link on a web page. An HREF attribute is generally added to define where the anchor link must be directed.
3. Tag ID
The ID tag is an identifier that defines a unique element in HTML. In the case of anchor links, the ID is used to identify the section on the page to which you want to create a link.
When you add an ID to your anchor link code, it should look like this:
Do you want to know more about HTML and CSS hacks? Download this free ebook filled with 25 tangible tips and coding models.
How to create an anchor link
Now that I have shared the main elements that come into an anchor link, I will show you how to create an anchoring link on your web page, step by step.
1. name the object or the text to which you wish to link.
In a normal link scenario, everything you need to bind you has a clean URL. However, in this scenario, you are not linked to a new page with its own URL – you must therefore constitute a name for the destination of the link.
I would recommend using a word or sentence describes the destination of the link. If you use a sentence, use underlines between each word instead of space, otherwise the code will not work.
Example
Let’s say that I write a practical blog article that is full of examples. If I wanted to create a link to a specific example in the post, here is what I would use as the name of my object:
Example_1
Now at the next step.
2. Insert the anchor link tag.
Take the name you have chosen and insert it into an anchor link opening tag.
In other words, replace the red section of the tag below with the name you chose in the previous step:
In this case, I named my object “example 1.”
Here is what this code in action looks like:
3. Add opening and fence tags anchor link.
Place this full opening Tag above before the text or object to which you wish to bind and add a farm Tag after.
This defines the location of the link. Here is what your code should look like now:
The object to which you wish to link.
4. Create the hyperlink that will bring you to this text or object.
Now go to the part of the post where you would like to have the hyperlink. You will have to add a HREF attributewhich indicates the destination of the hyperlink. However, in the part you generally include an URL, you will include the book symbol (#) then the name of the object to which you bind. Here is what it looks like:
<A href= “# Insert_your_object_name_here”> Click here to see the content below.A>
Here is what the complete code should look like once you have finished:
If you want an easy way to try, try our Slide and deposit the website generator free of charge.
Best practices for jumping ties
Even if the creation of anchoring links adds some additional steps to your process before publishing a blog article, this can have a significant impact on the user experience. Here are some elements to keep in mind when you create your next anchoring link.
Prayer the user experience.
Anchoring links are designed to improve the user experience. The creation of links that brings you to a specific part of the page facilitate users a lot to navigate your content and find the information they are looking for. Without the help of anchoring links, users can eventually scroll through the page for a long time, which could lead them to bounce back.
Keep the user experience in mind when creating anchor links. Make sure the sections you are binding in a page have a reader’s point of view.
In the end, your customers will appreciate the skimmable content and easy to read and may be more likely to review your site or make a purchase because of this.
Keep organization in mind.
Anchoring links can be a great way to organize a long content page. Think about the example of the table of contents I mentioned earlier. A table of contents can improve the organization of long blog articles and facilitate the search for readers of what they are looking for.
I also use jump links for glossary pages. If you have a section on your website which offers hundreds of terms and definitions, adding a jump link is an excellent way to improve navigation. Not only can readers go to the terms they want to learn, but the jump ties can help connect different terms together.
Know when to use external links.
It is important to remember the difference between a jump link and an external hyperlink.
A jump link is a link that “jumps” to a specific section of a page on your website. External links, however, are hyperlinks who run users to a page on another website.
It is the best practice to create an external link when quoting information from another source. Not only does this give credit where it is due, but it also helps users to find more information on the subject on which they read.
I learned to create anchor links with ease
If you work with the content of the website, knowing how to create an anchor link is a must.
Even if you are like me and you have no coding experience, this is one of the simplest tips to learn. As long as you understand how the different HTML elements work together, you can add all types of jump links to your content.
According to my experience, I can tell you that the link with a specific part of a page is a simple way to make your content more oriented towards the user. The jump ties help readers find the information they need more quickly, which ultimately helps them to be more committed to your content as a whole.
Publisher’s note: This article was initially published in July 2014 and was updated for freshness, precision and exhaustiveness.
