In HTML, creating bookmarks involves using anchor (<a>
) tags with id
attributes to define a location within the page and allowing users to jump to that location by clicking a link.
Here's an example of how to create bookmarks:
1. Define a bookmark (anchor point) with an id
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Bookmarks</title>
</head>
<body>
<h1>HTML Bookmarks Example</h1>
<!-- Links to the bookmarks -->
<ul>
<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
</ul>
<!-- Sections that act as bookmarks -->
<h2 id="section1">Section 1</h2>
<p>This is Section 1 content. You can link to this part of the page.</p>
<h2 id="section2">Section 2</h2>
<p>This is Section 2 content. Click the link to jump here.</p>
<h2 id="section3">Section 3</h2>
<p>This is Section 3 content. Another bookmark to navigate to.</p>
</body>
</html>
How it works:
- The
<a href="#section1">Go to Section 1</a>
link will scroll the page to the element withid="section1"
. - Each section is marked with an
id
that acts as a destination for the links. - Clicking on any of the links will cause the page to jump to the corresponding section.
This technique is useful for creating navigable pages with multiple sections.
No comments:
Post a Comment