HTML from Scratch: Anchor Links in HTML. Lesson #7

Let’s continue diving into the fundamentals of HTML. Today, we’ll discuss how to work with anchors in HTML. Don’t worry, we’re not talking about maritime adventures! In this lesson, you’ll learn what HTML anchors are, how to create links to them on a single page, and how to navigate to anchors on other pages. 🚀

This is an essential HTML feature that will be useful for creating well-structured web pages or single-page websites.

What is an Anchor Link in HTML?

An anchor is a special marker used for quickly jumping to a specific section of a webpage. Think of it as the table of contents in a book: each section is linked to a particular page — that’s how anchors work in HTML.

Anchors are commonly used for:

• Navigation within single-page websites (landing pages).
• Quick access to specific sections of an article (like in Wikipedia).

Example of an Anchor Link

Here’s a simple example:

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

<h2 id="section1">Section 1</h2>
<p>This is the content of the first section...</p>

Clicking the link will take you directly to the section with the id section1.

How to Create an Anchor on a Single Page

To create an anchor, add the id attribute to an element that will serve as the marker:

<a id="myAnchor">Text or Heading</a>

Now, create a link to this anchor:

<a href="#myAnchor">Jump to the text</a>

⚠️ Note: The anchor name (id) must be in English and unique on the page.

How to Link to an Anchor on Another Page

To navigate to a specific section on another page, use the following format:

<a href="page.html#myAnchor">Go to a section on another page</a>

On the target page, create an anchor with the corresponding id:

<a id="myAnchor">Target Text</a>

Practical Example:

index.html

<p>Read <a href="about.html#author">about the author</a></p>

about.html

<h2 id="author">About the Author</h2>
<p>This site is designed for those learning HTML from scratch!</p>

Pro Tip: Anchors are indispensable for enhancing user experience. With them, you can easily organize your content and simplify navigation for your visitors.

Subscribe to the Overcod blog updates to learn more about HTML! 😊