Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a bookmark link in HTML?
A bookmark link in HTML allows users to jump to specific sections within the same webpage or to sections on different pages. Bookmarks are particularly useful for long documents, creating table of contents, or providing quick navigation to important sections.
HTML bookmarks work by combining the id attribute to mark target sections and anchor links with hash (#) references to jump to those sections. When clicked, the browser automatically scrolls to the bookmarked location.
Syntax
To create a bookmark link, first add an id attribute to the target element −
<h2 id="section-name">Section Heading</h2>
Then create a link that references the bookmark using the hash symbol −
<a href="#section-name">Go to Section</a>
For links to bookmarks on different pages, include the page URL −
<a href="page.html#section-name">Go to Section on Another Page</a>
Using ID Attribute for Bookmarks
The modern and recommended approach is to use the id attribute to create bookmark targets. The id value must be unique within the document and should not contain spaces.
Example
Following example demonstrates bookmark links within the same page using the id attribute −
<!DOCTYPE html> <html> <head> <title>HTML Bookmark Links</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;"> <h1>Indian Parliament</h1> <h2>Table of Contents</h2> <a href="#rajya-sabha">Jump to Rajya Sabha</a><br> <a href="#president-india">Jump to President of India</a><br> <a href="#lok-sabha">Jump to Lok Sabha</a> <h3>Parliament</h3> <p>The Parliament House in New Delhi is the seat of the Parliament of India. It houses the Lok Sabha and the Rajya Sabha which represent lower and upper houses respectively in India's bicameral parliament.</p> <h3 id="president-india">President of India</h3> <p>The President of India is the head of state of the Republic of India and serves as the ceremonial head of the executive, legislature, and judiciary.</p> <h3 id="lok-sabha">Lok Sabha</h3> <p>Lok Sabha is composed of representatives of the people chosen by direct election. The maximum strength of the House according to the Constitution is 552.</p> <h3 id="rajya-sabha">Rajya Sabha</h3> <p>The 'Council of States', also known as Rajya Sabha, represents the states and union territories of India in the Parliament.</p> </body> </html>
When you click on any of the bookmark links, the page automatically scrolls to the corresponding section. The browser also updates the URL to include the bookmark reference.
Creating Table of Contents with Bookmarks
Example
Following example shows how to create a navigation menu using bookmark links −
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h1>Web Development Tutorials</h1>
<h2>Quick Navigation</h2>
<ul>
<li><a href="#programming">Programming</a></li>
<li><a href="#mobile">Mobile Development</a></li>
<li><a href="#design">Web Design</a></li>
<li><a href="#databases">Databases</a></li>
<li><a href="#scripting">Scripting Languages</a></li>
</ul>
<div style="height: 100px;"></div>
<h2 id="programming">Programming</h2>
<p>Learn fundamental programming concepts with languages like Java, Python, and C++.</p>
<h2 id="mobile">Mobile Development</h2>
<p>Master mobile app development for Android and iOS platforms.</p>
<h2 id="design">Web Design</h2>
<p>Create beautiful and responsive websites with HTML, CSS, and modern design principles.</p>
<h2 id="databases">Databases</h2>
<p>Understand database management with SQL, MySQL, and NoSQL technologies.</p>
<h2 id="scripting">Scripting Languages</h2>
<p>Explore scripting languages like JavaScript, PHP, and Python for dynamic web development.</p>
</body>
</html>
The navigation menu allows users to jump directly to any section. This is especially useful for long documents or tutorials with multiple topics.
Bookmark Links with Smooth Scrolling
Example
You can enhance bookmark links with CSS smooth scrolling for a better user experience −
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scroll Bookmarks</title>
<style>
html { scroll-behavior: smooth; }
.section {
height: 400px;
padding: 20px;
margin: 20px 0;
border: 2px solid #ddd;
}
.nav-link {
display: inline-block;
margin: 10px;
padding: 8px 16px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Course Modules</h1>
<nav>
<a href="#module-1" class="nav-link">Module 1</a>
<a href="#module-2" class="nav-link">Module 2</a>
<a href="#module-3" class="nav-link">Module 3</a>
<a href="#module-4" class="nav-link">Module 4</a>
</nav>
<div id="module-1" class="section">
<h2>Module 1: Introduction</h2>
<p>This module covers the basic introduction to web development and HTML fundamentals.</p>
</div>
<div id="module-2" class="section">
<h2>Module 2: HTML Elements</h2>
<p>Learn about different HTML elements, tags, and their proper usage in web pages.</p>
</div>
<div id="module-3" class="section">
<h2>Module 3: CSS Styling</h2>
<p>Discover how to style HTML elements using CSS for attractive web designs.</p>
</div>
<div id="module-4" class="section">
<h2>Module 4: JavaScript Interaction</h2>
<p>Add interactivity to your web pages using JavaScript programming.</p>
</div>
</body>
</html>
The scroll-behavior: smooth CSS property creates a smooth scrolling animation when jumping to bookmarked sections instead of an instant jump.
Best Practices for Bookmark Links
When creating bookmark links, follow these guidelines −
Use descriptive
idvalues that clearly identify the section content.Keep
idvalues lowercase and use hyphens instead of spaces (e.g.,contact-us).Ensure each
idis unique within the document.Test bookmark links to verify they scroll to the correct sections.
Consider adding smooth scrolling with CSS for better user experience.
Conclusion
HTML bookmark links provide an effective way to create internal navigation within web pages using the id attribute and hash-referenced anchor links. They improve user experience by allowing quick access to specific sections, making them essential for long documents and structured content. Combine bookmarks with CSS smooth scrolling for even better navigation experience.
15K+ Views
