Skip to content
HTML Course

Link to page section

Intro

In HTML, you can also create a link to a specific section on a page. It’s similar to creating a link to the top of the page, but requires an extra step.

Steps

Add heading

It’s common to link to a heading when creating a link to a specific section. Create a new line above the last paragraph. Type h2 and press Tab on that line to generate an <h2> element.

<h2></h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>

Type Last section in between the <h2> tags.

<h2>Last section</h2>

If you check the preview, you should see a heading appear that says Last section.

Add id attribute

We need to add a new attribute to the <h2> element. Inside the opening tag, type a space, then type id and press Tab to generate the equals sign and quotes.

<h2 id="">Last section</h2>

Next we need to give the id a value. This is important because we’ll use it again for the href value in our link. Let’s call this one last-section. Note: If your id contains more than one word, use a dash to separate the words.

<h2 id="last-section">Last section</h2>

If you check the preview, the heading should still say the same. The id attribute should not have an effect on the way it looks.

Now let’s go back to the top of our page. After our external link, type a and press Tab.

<a href="https://example.com/" target="_blank">External link</a>
<a href=""></a>

In the href value, type #last-section. Just like with creating a link to the top, we use a hashtag at the beginning of the value.

<a href="https://example.com/" target="_blank">External link</a>
<a href="#last-section">Go to last section</a>

If you check the preview, you should see a new link appear.

Click and drag on the divider to make the preview narrow. Then try clicking on the link in the preview. The preview should jump to the last section.

This was a very basic example, but you can find a more realistic example by looking at the table of contents of this Wikipedia article on HTML.

End

The difference between linking to a specific section and linking to the top is that we didn’t need to create an id to link to the top.

Final code

Here is the code that should be in between the <body> tags.

<a href="about.html">Internal link</a>
<a href="https://example.com/" target="_blank">External link</a>
<a href="#last-section">Go to last section</a>


<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>
<h2 id="">Last section</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates odit in molestias saepe est rem iusto accusantium omnis ad eligendi? Eos rerum saepe reiciendis magni fugit enim quasi, exercitationem quos.</p>


<a href="#top">Back to top</a>