When most individuals consider hyperlinks, they consider connecting two different web pages — corresponding to a blog and landing page — together. But that is not all hyperlinks can do, they’ll link to a particular a part of a page as well.
So do not forget that really exhaustive glossary you place together on industry terms your audience should know? Now, whenever you confer with something you said elsewhere in that article, you may actually link to it — making it much easier to your audience to determine what the heck you are talking about. Need to see what I mean? Just click here.
Pretty cool, right? The very best part about all of it is that it’s super easy to do yourself, even for those who do not have extensive HTML knowledge. If the HTML-speak feels confusing, just follow together with the real-world examples below.
Note: Should you are a HubSpot customer, follow these instructions.
What’s an HTML hyperlink?
A hyperlink is a clickable link that will be attached to any HTML element on a webpage, corresponding to a picture or text. These links will be used to direct users to other pages inside your site, external web sites and even specific parts of a webpage.
Hyperlinks are created through the use of HTML code, which is the language used to structure your website. Strategically utilizing hyperlinks can enable you to enhance the user experience in your website by guiding users through your content and help them discover related information.
What’s an HTML anchor link?
Also generally known as a jump link, an HTML anchor link is the link that takes you to a particular a part of a webpage. Anchor links are especially helpful for guiding users through an extended page. For example, you might create a table of contents at the highest of your page through the use of anchor links that link out to different sections of your blog post, making it easier for users to seek out the precise information they’re on the lookout for.
External Links vs Jump Links
A jump link is a link that ‘jumps’ to a particular section of a page in your website. External links, nonetheless, are hyperlinks that direct users to a page on a special website.
It is a best practice to create an external link when citing information from one other source. Not only does this give credit where it’s due, nevertheless it also helps users find more information concerning the subject they’re reading about.
The right way to Link to a Specific A part of a Page
- Name the item or text you need to link to.
- Take the name you have chosen, and insert it into a gap HTML anchor link tag.
- Place that complete opening tag from above before the text or object you need to link to, and add a closing tag after.
- Create the hyperlink that’ll take you to that text or object.
Allowing people to effectively “jump” to a certain a part of a webpage might help your enterprise grow higher and make your content more convenient for visitors to your site — but you might have to make sure that you do every part excellent. Here’s how you can add jump links to your content, step-by-step.
1. Name the item or text you need to link to.
In a traditional linking scenario, whatever you’ll want to link to has a URL of its own. Nevertheless, on this scenario, you are not linking to a latest page with its own URL — so you might have to make up a reputation for the link’s destination.
I’d recommend using a word or phrase that describes the link’s destination. Should you use a phrase, use underscores between each word as a substitute of spaces, otherwise the code won’t work.
Example
For example we desired to link to an example of an organization using Facebook ads in a post. Here’s what I’d use as my object’s name:
facebook_ads_example
Now, onto the following step.
2. Take the name you have chosen, and insert it into a gap HTML anchor link tag.
In other words, replace the red section of the tag below with the name you selected within the previous step:
INSERT_YOUR_OBJECT_NAME_HERE“>
Example
3. Place that complete opening tag from above before the text or object you need to link to, and add a closing tag after.
Doing this sets the placement of the link. That is what your code should appear like now:
The article you need to link to.
Example
4. Create the hyperlink that’ll take you to that text or object.
Now, go to the a part of the post you need to have the hyperlink in. You will need so as to add a typical href attribute, which indicates the destination of the hyperlink. Nevertheless, within the part where you’d typically include a URL, you may include the pound symbol (#) then the name of the item you are linking to. Here’s what it looks like:
<a href=”https://blog.hubspot.com/marketing/#INSERT_YOUR_OBJECT_NAME_HERE“>Click here to see the content below.a>
Example
#facebook_ads_example">Click here to see an example of how an organization uses Facebook ads.
And then you definitely’re all set — you might have a functioning hyperlink between two pieces of content on the identical page. Easy as that.
Why create anchor links to leap to a particular a part of the page?
Despite the fact that creating anchor links adds a couple of more steps to your process before publishing a blog post, it will probably make a big effect on user experience.
Anchor links will be used to create features like table of contents, which may enhance the organization of long blog posts.
Creating links that take you to a particular a part of the page makes it much easier for users to navigate through your content and find the knowledge they’re on the lookout for. Without the help of anchor links, users may find yourself scrolling through the page for a very long time, which could make them bounce.
Ultimately, your customers will appreciate skimmable, easy-to-read content and will be more prone to revisit your site or make a purchase order due to it.
Create Anchor Links With Ease
Linking to a particular a part of a page is an easy technique to make your content more user-oriented. In only a couple of short steps, you may create anchor links that make navigating long blog posts a chunk of cake.
(Hey there, curious folks from the introduction! Click here to return to where you left off.)
Editor’s Note: This post was originally published in July 2022 and has been updated for freshness, accuracy, and comprehensiveness.
