How to use HTML anchoring to improve the User experience

What is an anchor link (HTML anchor)?

An anchor link, also known as an HTML anchor, is a type of link that allows the user to jump to a specific section within the same web page or even to a location on a different page. These types of links are useful for improving navigation on long pages and for guiding the user directly to relevant information.

Definition and examples

An anchor link is defined using the id attribute on the target element and the href attribute on the link pointing to the id. Here’s a simple example:

<!-- Link --&>
<a href="#section1">Go to Section 1</a>

<!-- Link destination --&>
<h2 id="section1">Section 1</h2>
<p>Contents of section 1...</p>

Importance of anchor links in web navigation

Anchor links are essential to improve the usability of a web page, especially in long content, such as long articles, guides and tutorials. They facilitate navigation by allowing users to jump directly to the section they are interested in, saving time and improving their user experience.

Benefits of using HTML anchors on your page

Improved user experience (UX)

HTML anchors significantly improve the user experience (UX) by making it easier to navigate within a page. This is especially useful on long pages where users may want to jump directly to the information they need without having to scroll extensively. In addition, anchors help keep users on your page longer by providing more intuitive and efficient navigation.

Advantages for SEO

Anchor links can also have a positive impact on SEO (Search Engine Optimization). By providing a clear and useful internal link structure, search engines can better understand the hierarchy and content of your page. This can result in better indexing and potentially higher rankings in search results. In addition, a good user experience can reduce bounce rate, which is also SEO-friendly.

How to create anchor links in HTML

Assign the ID attribute with the tag

To create an anchor link in HTML, you must first assign a id attribute to the tag you want the link to anchor on. The id attribute must be unique within the page. Here’s a basic example:

<h2 id="section1">Section 1</h2>
<p>Contents of section 1...</p>

Add the ID attribute to an HTML link

.
Next, you need to create a link that points to this id. Use the href attribute with the id value preceded by a hash sign (#):

<a href="#section1">Go to Section 1</a>

Linking to an external location

.
In addition to linking within the same page, HTML anchors can also point to a specific location on an external page. Here’s an example of how to do this:

<a href="https://www.ejemplo.com/pagina#seccion2">Go to Section 2 on another page</a>

Linking to another section on the same page

Here is a complete example of how to link to different sections within the same page:

<!--Link to Section 1 -->
<a href="#section1">Go to Section 1</a>

<!-- Link to Section 2 --<
<a href="#section2">Go to Section 2</a>

<!-- Section 1 --<
<h2 id="section1">Section 1</h2>
<p>Contents of Section 1...</p>

<!-- Section 2 --&>
<h2 id="section2">Section 2</h2>
<p>Contents of Section 2...</p>

How to insert HTML anchors in WordPress

Insert ID for anchor links in Divi

Divi, one of the most popular page builders for WordPress, easily allows adding IDs to your modules. To add an ID to a module in Divi:

1. Open the module you want to add an ID to.
2. Go to the advanced settings tab.
3. In the “CSS ID” field, enter the ID you want to use (e.g., section1).
4. Save the changes.

<!-- Link --&>
<a href="#section1">Go to Section 1</a>

<!-- Divi module with ID --&>
<div id="section1" class="et_pb_module">
    <h2>Section 1</h2>
    <p>Contents of section 1...</p>
</div>

Setting IDs for anchor links in Visual Composer

For Visual Composer, the process is similar:

1. Select the element you want to add an ID to.
2. In the element’s settings, look for the “CSS ID” option.
3. Enter the desired ID (e.g., section2).
4. Save the changes and refresh the page.

<!-- Link --&>
<a href="#section2">Go to Section 2</a>

<!-- Visual Composer element with ID --&>
<div id="section2" class="md_column">
    <h2>Section 2</h2>
    <p>Contents of section 2...</p>
</div>

Set ID for anchor links in Elementor

In Elementor, you can add an ID to any section, column or widget:

1. Select the section, column or widget you want to add an ID to.
2. Go to the advanced settings tab.
3. In the “CSS ID” field, enter the ID (e.g., section3).
4. Save and update the page.

<!-- Link --&>
<a href="#section3">Go to Section 3</a>

<!-- Elementor section with ID --&>
<section id="section3">
    <h2>Section 3</h2>
    <p>Contents of section 3...</p> </section</section<
</section>

Anchor links in WordPress menu

You can add anchor links directly in the WordPress navigation menu:

1. Go to Appearance > Menus in the WordPress admin panel.
2. Add a custom link.
3. In the URL field, enter the ID preceded by a hash (e.g., #section1).
4. In the text field, enter the name of the link (e.g., “Section 1”).
5. Save the menu.

<!--Link in menu -->
<a href="#section1">Section 1</a>

Best anchor linking practices

Accessibility recommendations

To ensure that your anchor links are accessible to all users, including those with disabilities, follow these recommendations:

• Use descriptive IDs: Use IDs that clearly describe the section you are linking to, such as #contact or #services.
• Provide clear contexts: Make sure anchor links have meaningful link text that describes where the link leads to, such as “Go to contact section.”
• Check navigability: Make sure that all users can navigate using the anchors without problems, including those using keyboards or screen readers.

Outdated and updated attributes

It is important to keep up to date with current HTML standards. Some attributes that were common in earlier versions of HTML are now deprecated. For example, the name attribute is no longer recommended for creating anchors. Instead, use the id attribute.

<!-- Obsolete -->
<a name="section1">Section 1</a>

<!-- Updated --&>
<h2 id="section1">Section 1</h2>

7 best practices in HTML anchoring

1. Unique IDs: Make sure that each id on your page is unique to avoid conflicts.
2. Descriptive IDs: Use ID names that are descriptive and easy to remember.
3. Visible links: Make sure that anchor links are clearly visible and accessible on the page.
4. Mobile compatibility: Check that anchors work correctly on mobile devices.
5. Usability testing: Conduct usability testing to ensure that anchor links enhance navigation and do not hinder it.
6. Ensure that anchor links enhance navigation and do not hinder it.
7. SEO: Use anchors to improve internal link structure, which can help SEO.
8. Accessibility: Make sure anchor links are accessible to all users, including those with disabilities.

Examples of anchor link usage

Linking to an external location

You can use anchor links to direct users to a specific location on an external page. Here’s an example:

<a href="https://www.ejemplo.com/pagina#seccion2">Go to Section 2 on another page</a>

This is useful when you want to provide direct access to specific information on another web page.

Creating a clickable image

.
Anchor links are not limited to just text; you can also make images clickable and link to specific sections of the page. Here’s an example of how to do that:

<a href="#section3">
    <img src="image.jpg" alt="Go to Section 3">
</a>

<!-- Destination of the link --&>
<h2 id="section3">Section 3</h2>
<p>Contents of section 3...</p>

Creating a mail link

You can create links that allow users to send an email directly on click. Here’s an example:

<a href="mailto:[email protected]">Send an email</a>

Creating a link to a phone number

It is possible to create links that, when clicked, allow users to make a phone call. This is especially useful on mobile devices:

<a href="tel:+1234567890">Call +1234567890</a>

Using the download attribute to save a file

The download attribute on a link allows users to download a file directly on click:

<a href="document.pdf" download="MyDocument">Download the document</a>

Creating a link to open a location on Google Maps

It is possible to create links that take users to a specific location on Google Maps:

<a href="https://www.google.com/maps?q=40.712776,-74.005974" target="_blank">View on Google Maps</a>

Creating a link to start a chat in messaging applications

It is possible to create links that initiate a chat in messaging applications such as WhatsApp:

<a href="https://wa.me/1234567890?text=Hola,%20tengo%20una%20consulta" target="_blank">Send message by WhatsApp</a>

Creating a link to add an event to the calendar

You can allow users to add events to their calendars using specific links:

<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Event+of+Test&dates=20230620T090000Z/20230620T100000Z&details=Details+of+the+event&location=Location=Location%C3%B3n" target="_blank">Add to Google Calendar</a>

Anchor links are an essential tool in web development that improves navigation and user experience. Using HTML anchors allows visitors to jump to specific sections of your page, making your content more accessible and user-friendly. They are also beneficial for SEO, as they help search engines better understand the structure of your site and improve its ranking.

Implementing anchor links in WordPress is easy with tools like Divi, Visual Composer and Elementor. By following best practices such as using unique and descriptive IDs, and ensuring anchor accessibility, you can create a more intuitive and efficient navigation.

Exploring other utilities of HTML links, such as sending emails, making calls, sharing on social networks or opening locations on Google Maps, can enrich the functionality of your website.