Linking to the same page

We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page.

You can link to other elements on a web page such as a heading, paragraph, div, or image. In this tutorial, we will look at how to link to different headings and images on a web page.

The example in the image below shows some links which when clicked will take the user to the corresponding headings with different sections of content. This example obviously looks a bit plain but using some CSS code we can style the links, headings and the rest of the content. You could also add some more code for a scrolling transition effect.

Screen Shot 2017-04-14 at 4.33.25 pm

Watch the video below which explains how to link to content on the same page, and then scroll down to see the sample code.

Here is the HTML code for the example shown in the video:

<!DOCTYPE html>
<html>
<head>
 <title>Linking to the same page</title>
 <meta charset="utf-8"/>
</head>
<body>
<h1>Linking to sections on the same page</h1>
<p>We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page. You can link to other elements on a web page such as a heading, paragraph, div, or image. </p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="two"></a>Two</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="three"></a>Three</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="four"></a>Four</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>