HTML Links – Create Bookmarks

      Comments Off on HTML Links – Create Bookmarks
Spread the love

Hyperlinks or links in HTML are used to navigate to different web pages or sections of a web page. Creating bookmarks is a way to link directly to a specific section of a web page. In this article, we will explore how to create bookmarks in HTML.

Creating Bookmarks:

To create a bookmark, you first need to assign an ID to the section of the page you want to link to. Here’s an example of a page with two sections, each with an ID assigned to them:

css
<body>
  <h1>My Web Page</h1>
  
  <h2 id="section1">Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  
  <h2 id="section2">Section 2</h2>
  <p>Nullam accumsan libero quis elit lacinia, at suscipit nibh dapibus.</p>
</body>

In this example, the h2 tags have IDs assigned to them using the id attribute. The first section has an ID of section1, and the second section has an ID of section2.

To create a bookmark that links to one of these sections, you need to use the a tag with a href attribute that includes the ID of the section. Here’s an example:

css
<body>
  <h1>My Web Page</h1>
  
  <h2 id="section1">Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  
  <h2 id="section2">Section 2</h2>
  <p>Nullam accumsan libero quis elit lacinia, at suscipit nibh dapibus.</p>
  
  <p><a href="#section1">Go to Section 1</a></p>
  <p><a href="#section2">Go to Section 2</a></p>
</body>

In this example, the a tags have a href attribute that includes the ID of the section they link to. The first link goes to #section1, which links to the first section of the page with an ID of section1. The second link goes to #section2, which links to the second section of the page with an ID of section2.

Link Target Attribute:

When creating links in HTML, you can also use the target attribute to specify where the linked page should open. The target attribute can have one of four values:

  • _self: The linked page opens in the same window/tab as the current page.
  • _blank: The linked page opens in a new window/tab.
  • _parent: The linked page opens in the parent frame of the current frame (if the current page is in a frame).
  • _top: The linked page opens in the top-level window, replacing any frames that may be present.

Here’s an example of using the target attribute:

php
<body>
  <h1>My Web Page</h1>
  
  <p><a href="https://www.example.com" target="_blank">Visit Example.com</a></p>
</body>

In this example, the a tag has a href attribute that links to Example.com, and a target attribute that is set to _blank. This will open Example.com in a new window/tab when the link is clicked.

Conclusion:

Bookmarks are an essential feature of HTML links, allowing users to navigate directly to a specific section of a web page. By using the id attribute and the `href