Anchors for page navigation

Hello, students! In this lesson, we will learn about anchors for page navigation.

Anchors are used to create internal links within a web page.

Topics

• What are anchors?
• How to create anchors?
• Code examples

What are anchors?

Anchors are HTML elements used to create internal links within a web page.

They are identified by the <a> tag.

The name attribute of the <a> tag specifies the name of the anchor.

For example, the following code creates an anchor with the name about:

<a name="about">About</a>

How to create anchors?

To create an anchor, specify the name of the anchor as the value of the name attribute.

You can also use the id attribute to specify the name of the anchor.

The id attribute has the same functionality as the name attribute but is more recommended for use with CSS.

For example, the following code creates an anchor with the id about:

<a id="about">About</a>

Are we ready to start?

Let’s do this!

Here’s an example of how to use an anchor to create a link to another section of the page:

<h1>Introduction</h1>

<p>This is the beginning of the page.</p>

<a href="#about">About</a>

<h2>About</h2>

<p>This is the section about the page.</p>

In this example, the anchor about is located in the Introduction section of the page.

The link to the anchor about is located at the end of the Introduction section.

When the user clicks on the link, the browser will scroll the page to the About section.

Code examples

Here are some code examples for anchors:

<a name="about">About</a>

<a id="about">About</a>

Exercises

• Create an HTML document with an anchor named about.
• Save the document and open it in a browser.

Observe how the browser displays the anchor.

Good luck!

In the next module, we will learn about images.

Images can be used to add visual information to web pages.