Friday, December 20, 2024

HTML Links - Create Bookmarks

 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:

  1. The <a href="#section1">Go to Section 1</a> link will scroll the page to the element with id="section1".
  2. Each section is marked with an id that acts as a destination for the links.
  3. 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

How can you refer to a CSS file in a web page?

 To refer to a CSS file in a web page, you use the <link> element inside the <head> section of the HTML document. Here's t...