Skip to main content

Bookmark Links

In this tutorial, we will be focusing on bookmark links in HTML. Bookmark links, also known as "jump-to" or "anchor" links, are a type of HTML link that allows you to jump to a specific part of a webpage. They are incredibly useful for long pages where you want your user to quickly navigate to relevant sections.

HTML bookmark links are created using the anchor tag <a>. They are unique because they allow you to link not just to other pages, but to specific parts of the same page. This is done by using the id attribute of HTML elements along with the href attribute in the <a> tag.

To create a bookmark, we first need an element with an id attribute. This id will serve as the target of our bookmark. The id must be unique within the webpage.

For example, let's say we have a heading:

<h2 id="section1">Section 1</h2>

We can create a bookmark link to this heading like this:

<a href="#section1">Go to Section 1</a>

When a user clicks on the "Go to Section 1" link, they will be brought to the Heading 2 that has the id of "section1".

Understanding the # in href​

The # symbol in the href attribute refers to an id on the page. So href="#section1" means we want to link to the element with id="section1".

Bookmark links are not limited to the same page. You can also link to specific sections of other pages.

To do this, you add the id of the element on the other page to the end of the URL.

For example, if we have a page called otherpage.html and there is a section on that page with the id "section2", we can link to it like so:

<a href="otherpage.html#section2">Go to Section 2 on Other Page</a>

Summary​

Bookmark links can greatly enhance the navigability of your webpage, particularly for long pages with multiple sections. By using the anchor tag with an id in the href attribute, you can direct users to specific parts of the page or to specific sections of other pages.

Remember:

  • Bookmark links are created using the <a> tag and href attribute.
  • The # symbol in href refers to an id on the page.
  • The id should be unique within the page.
  • You can link to specific sections of other pages by adding the id to the end of the URL.

Now you have the knowledge to start implementing bookmark links in your own webpages. Happy coding!