Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a bookmark link in HTML?
A bookmark is helpful when you want to remember the web page for future reference. You can access that bookmark at any time to view the web page again.
We use HTML links to create bookmarks, so that we can jump to specific parts of a web page.
Bookmarks can be useful if a web page is long. When we click on the link, the page will scroll down or up to the location with the bookmark specified on the web page.
Syntax
First, we should use the id attribute to create a bookmark
<h2 id="id name or number">text…</h2>
Then, add a link to the bookmark, to jump within the same page or the another page.
<a href="#section id">heading of the section</a>
Example
Following is the example for the linking a section of the same web page.
<!DOCTYPE html> <html> <body> <a href="#RAJYA SABHA">Jump to RAJYA SABHA</a><br> <a href="#PRESIDENT OF INDIA">Jump to PRESIDENT OF INDIA</a> <h3>PARLIAMENT</h3> <p>The Parliament House in New Delhi is the seat of the Parliament of India. Its houses the Lok Sabha and the Rajya Sabha which represent lower and upper houses respectively in India's bicameral parliament. </p> <h3 id="PRESIDENT OF INDIA">PRESIDENT OF INDIA</h3> <p>Ram Nath Kovind is an Indian politician serving as the 14th and current President of India </p> <h3>LOK SABHA</h3> <p>Lok Sabha is composed of representatives of the people chosen by direct election.<br> The maximum strength of the House of the Constitution is 552.</p> <h3 id="RAJYA SABHA">RAJYA SABHA</h3> <p>The ‘Council of States’ which is also known as Rajya Sabha</p> </body> </html>
When we click on the Jump to RAJYA SABHA, it will navigate to the RAJYA SABHA section of the same page.
When we click on the Jump to PRESIDENT OF INDIA, it will navigate to the PRESIDENT OF INDIA section of the same page.
Example
Following is another example for the linking a section of the same web page.
<html> <head> <title>HTML Bookmark Link</title> </head> <body> <h1>Tutorials</h1> <p> <a href="#z">Learn about Scripting Languages</a> </p> <h2>Programming</h2> <p>Here are the tutorials on Programming.</p> <h2>Mobile</h2> <p>Here are the tutorials on App Development</p> <h2>Design</h2> <p>Here are the tutorials on Website Designing</p> <h2>Databases</h2> <p>Here are the tutorials on Databases.</p> <h2>Networking</h2> <p>Here are the tutorials on Networking</p> <h2>Java Technologies</h2> <p>Here are the tutorials on Java Technologies.</p> <h2>Digital Marketing</h2> <p>Here are the tutorials on Digital Marketing.</p> <h2> <a name="z">Scripting Languages</a> </h2> <p>Here are the tutorials on Scripting Languages.</p> </body> </html>
When we click on the “learn about scripting languages”, it will navigate to the Scripting languages section of the same page.
Example
Following is another example for the linking a section of the same web page.
<!DOCTYPE html> <html> <body> <p><a href="#C4">Jump to Module 4</a></p> <h2>Module 1</h2> <p>This Module explains Module 1</p> <h2>Module 2</h2> <p>This Module explains Module 2</p> <h2>Module 3</h2> <p>This Module explains Module 3</p> <h2 id="C4">Module 4</h2> <p>This Module explains Module 4</p> <h2>Module 5</h2> <p>This Module explains Module 5</p> <h2>Module 6</h2> <p>This Module explains Module 6</p> </body> </html>
When we click on the “Jump to Module 4”, it will navigate to the Module 4 section of the same page.
11K+ Views
