• Register
28,501 points
12 7 5

Linking one part of a page to another is good to navigate the user from one part of the document to another and keeping the user engaged. Furthermore, linking the main parts of a document can help the user find what they are looking for on your webpage. Have you ever wondered how to do that? If yes, in this article you will find the solution.

To link one part of a document to another, we use named anchors. Named anchors are also called bookmarks. As you might know that the anchor tag is used to navigate the user from one webpage to another, you can also use it to navigate the user within a single webpage. The syntax for using a named anchor is as follows:

<a name="name"></a>

Example:

<a name="Named_Anchor"></a>

Now, to use this named anchor, you need to reference it in another anchor tag as follows:

<a href = "#name">Text to display</a>

Example:

<a href="#Named_Anchor">Named Anchor</a>

Now that we know the syntax for using the named anchors, let’s see how to use it in our HTML document:

In the code below, I have a named anchors i.e. “p2”:

<!DOCTYPE HTML>
<html>

<head>

	<title>Named Anchor</title>
	<style>
			.div1{
				text-align: center;
				background-color: pink;
				border: 2px solid;
				height: 100%;
				width: 50%;
				margin: 100px;
			}

	</style>
</head>

<body>
	<center><h1> Lorem Ipsum</h1>
	<div class="div1">
	<p>	<a name = "p2"></a>Lorem Ipsum   <!-- Creating Named  Anchor -->
porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet purus est, placerat finibus ipsum accumsan vel. Donec congue, ante eu volutpat luctus, orci velit tempor nulla, non mattis magna felis vel ex. Aenean ac massa ac massa ornare venenatis vel at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut et erat egestas, dapibus purus quis, vestibulum eros. Mauris luctus tincidunt tempor. Donec eu finibus purus. Sed euismod nisi pellentesque, ullamcorper augue sit amet, vehicula velit. Donec ultricies neque est, id feugiat nulla tristique vel. Vivamus eget maximus felis. Fusce ornare elementum mi, quis consectetur dui facilisis id. Pellentesque malesuada at sapien eget cursus. Donec eu sapien laoreet, suscipit lectus in, tincidunt magna.
	</p>
	</div>
	<div class="div1">
	<p>
		Praesent congue sollicitudin volutpat. Nam vitae lobortis nunc. In tincidunt aliquam nulla sit amet finibus. Morbi ultrices odio sem, ac malesuada odio pharetra ut. Aliquam facilisis tincidunt libero. Nunc eu magna fermentum, lacinia urna ut, tempus nulla. Mauris dignissim nibh vitae feugiat luctus. Suspendisse ultricies sit amet enim id iaculis. Aenean sed commodo urna. Duis non nunc sem. Vivamus urna tellus, efficitur nec enim nec, lobortis feugiat massa. Mauris consectetur enim sed erat cursus, sed cursus ipsum dapibus. Cras finibus, ante in egestas mollis, risus mauris accumsan lacus, ut aliquet turpis ipsum vitae elit. Proin at augue sem.

Fusce et arcu a dolor tempus pharetra ut quis dolor. Nullam vehicula eleifend felis quis interdum. Cras nulla augue, condimentum commodo quam eget, ultrices maximus sapien. Integer sagittis est turpis, a malesuada lorem efficitur nec. In ac quam sit amet felis viverra tincidunt ut a nunc. Nulla ac purus lorem. Cras tempor cursus quam, eget eleifend nunc semper at. Duis ultrices ex a dolor sollicitudin, sed consequat erat egestas. Duis leo urna, tincidunt iaculis ex nec, ultricies finibus dui. 
	</p>
	</div>
	
	<div class="div1">
		<p>Mauris lobortis ipsum ut gravida vulputate.</p>

<p>Suspendisse in orci nec augue  <!-- Calling the Named Anchor --> <a href="#p2">Lorem</a> pulvinar malesuada nec ut leo. Nullam a ligula sem. Suspendisse potenti. Pellentesque commodo diam non lacus molestie dignissim. Proin consectetur nisi faucibus velit interdum, sed condimentum dolor egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque quis ligula a velit venenatis ultricies nec vel elit. Proin magna lectus, sollicitudin ac ullamcorper ut, consequat vitae magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin consequat euismod. Nullam non dui est.

Integer eget pulvinar quam. Fusce cursus tellus sit amet mi lacinia pretium. Fusce maximus turpis tincidunt tincidunt malesuada. Nam sed lectus lorem. Sed libero justo, aliquam quis accumsan in, consectetur eu purus. Ut quis dolor odio. Proin laoreet lorem non euismod venenatis.

Generated 5 paragraphs, 424 words, 2830 bytes of Lorem Ipsum</p>
	</div>
	</center>
</body>
</html>

If you copy and run the above HTML code in your browser, you will see a link to Lorem. When you click on the link, you will navigate to the first line of the page.

Now, another way is to directly link one part of the document to another using the id attribute as follows:

<body>
	<center><h1> Lorem Ipsum</h1>
	<div class="div1">
	<p id = "Lorem">	Lorem Ipsum    <!-- giving the id to the paragraph --> 
porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet purus est, placerat finibus ipsum accumsan vel. Donec congue, ante eu volutpat luctus, orci velit tempor nulla, non mattis magna felis vel ex. Aenean ac massa ac massa ornare venenatis vel at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut et erat egestas, dapibus purus quis, vestibulum eros. Mauris luctus tincidunt tempor. Donec eu finibus purus. Sed euismod nisi pellentesque, ullamcorper augue sit amet, vehicula velit. Donec ultricies neque est, id feugiat nulla tristique vel. Vivamus eget maximus felis. Fusce ornare elementum mi, quis consectetur dui facilisis id. Pellentesque malesuada at sapien eget cursus. Donec eu sapien laoreet, suscipit lectus in, tincidunt magna.
	</p>
	</div>
	<div class="div1">
	<p>
		Praesent congue sollicitudin volutpat. Nam vitae lobortis nunc. In tincidunt aliquam nulla sit amet finibus. Morbi ultrices odio sem, ac malesuada odio pharetra ut. Aliquam facilisis tincidunt libero. Nunc eu magna fermentum, lacinia urna ut, tempus nulla. Mauris dignissim nibh vitae feugiat luctus. Suspendisse ultricies sit amet enim id iaculis. Aenean sed commodo urna. Duis non nunc sem. Vivamus urna tellus, efficitur nec enim nec, lobortis feugiat massa. Mauris consectetur enim sed erat cursus, sed cursus ipsum dapibus. Cras finibus, ante in egestas mollis, risus mauris accumsan lacus, ut aliquet turpis ipsum vitae elit. Proin at augue sem.

Fusce et arcu a dolor tempus pharetra ut quis dolor. Nullam vehicula eleifend felis quis interdum. Cras nulla augue, condimentum commodo quam eget, ultrices maximus sapien. Integer sagittis est turpis, a malesuada lorem efficitur nec. In ac quam sit amet felis viverra tincidunt ut a nunc. Nulla ac purus lorem. Cras tempor cursus quam, eget eleifend nunc semper at. Duis ultrices ex a dolor sollicitudin, sed consequat erat egestas. Duis leo urna, tincidunt iaculis ex nec, ultricies finibus dui. 
	</p>
	</div>
	
	<div class="div1">
		<p>Mauris lobortis ipsum ut gravida vulputate.</p>

<p>Suspendisse in orci nec augue  <!-- Navigating to the first paragraph using the id --> <a href="#Lorem">Lorem</a> pulvinar malesuada nec ut leo. Nullam a ligula sem. Suspendisse potenti. Pellentesque commodo diam non lacus molestie dignissim. Proin consectetur nisi faucibus velit interdum, sed condimentum dolor egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque quis ligula a velit venenatis ultricies nec vel elit. Proin magna lectus, sollicitudin ac ullamcorper ut, consequat vitae magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin consequat euismod. Nullam non dui est.

Integer eget pulvinar quam. Fusce cursus tellus sit amet mi lacinia pretium. Fusce maximus turpis tincidunt tincidunt malesuada. Nam sed lectus lorem. Sed libero justo, aliquam quis accumsan in, consectetur eu purus. Ut quis dolor odio. Proin laoreet lorem non euismod venenatis.

Generated 5 paragraphs, 424 words, 2830 bytes of Lorem Ipsum</p>
	</div>
	</center>
</body>

Both of the above-mentioned programs work the same. Try running both on your code editor to see the results.