If regular links lead to web pages, anchor links lead to specific sections within web pages.
Anchor link to an external page
An anchor (jump) link is absolutely essential if you need to reference a specific section of an article on another page, rather than just linking to another page.
Anchor link within the same page
An anchor link within the same page is equally important. Users only need to click on the link, and the page will automatically scroll to the desired element where the anchor is set.
Anchor links, as additional navigation elements, can make reading and navigating through an article more convenient. This is especially true for long articles with complex structures.
By providing convenience, a web page becomes more user-friendly, which can have a positive impact on SEO. Additionally, anchor links, like any other links, are an excellent way to direct user attention and serve as an effective element in cross-linking strategies between pages.
The main purpose of anchor links is to create convenient navigation on website pages. This is especially relevant for the article's table of contents if it exists on the page.
Thanks to anchor links, your table of contents becomes not only informative but also functional. Users can quickly jump to their most interesting section.
What does an anchor link consist of technically?
An anchor link consists of:
- An anchor - a hidden element that is placed anywhere in an article.
- A link that leads to the anchor element.
How to create an anchor link to a specific part of a web page?
For example, it is necessary to link table of contents entries to a section of an article. In this case, the link is the table of contents entry, while the anchor to which the link refers is the section title.
1) To create an anchor link, first you need to set the anchor - an id (for example - "Keyword-Search") to the desired HTML element of the page (in our example, it is the section title "Step 1: KeywordSearch"):
<h2 id="Keyword-Search">Step 1: Keyword Search</h2>
2) 2) Then create a link, with an id, instead of the usual page address. Add "#" before id (for example - "#Keyword-Search"):
<a href="#Keyword-Search">Stage 1: Keyword Search</a>
If the anchor link leads to an external page (e.g., sitename.com/someurl), you need to append the ID of the pre-set anchor to its address (e.g., sitename.com/someurl#mycustomword).
As a result, when the anchor link is clicked, it should scroll to the anchor: the selected element (in our example, the section's name) should become sticky at the top of the screen.
What to do if a "floating" website menu is covering an element with an anchor?
It is natural for a "floating" menu to cover anchor text when navigating to it through a link. The anchor is intended to stick to the top of the page, not to the top of the website menu or other elements. However, this is a problem.
The problem can be solved by adding a top margin to the anchor element. The margin should be at least the height of the menu (i.e., if the menu height is 100px, the margin should be the same).
Here's how to add a top margin to the anchor element:
In CSS, you need to add a couple of magical lines to the selected anchor element.
For example, let's say we want to add a 100px margin. We'll use an H2 subheading as the anchor, so the margin will be added relative to the H2 (but not all H2 headings, only those with an ID).
h2[id]:target{ padding-top: 100px; margin-top: -100px; }
As a result, all H2 subheadings with an ID (regardless of the specific ID) will receive a 100px top margin when scrolled to as the target anchor after clicking on the anchor link.
Visually, this should make it appear as though the anchor element sticks to the menu when scrolled to, rather than the top of the screen.
As you can see, anchor links can be used to accomplish a variety of tasks:
- Improve user convenience.
- Create a structure for interlinking between pages.
- Enhance SEO through usability, behavioral factors, and anchor text (the text of the link), which serves as an important signal for search engines (thus, it should be relevant to the content to which the anchor is set).
The tasks performed by anchor links make them an important element of navigation between specific sections of web pages and an excellent tool for enhancing the user experience.