HtmlHow-ToBeginner · 3 min read

How to Create Bookmark Link in HTML: Simple Guide

To create a bookmark link in HTML, use the <a> tag with an href attribute pointing to an element's id on the same page, like <a href="#section1">. Then add id="section1" to the target element to mark the bookmark location.

📐

Syntax

Use an anchor tag <a> with href="#bookmark-name" to link to a bookmark. The target element must have an id="bookmark-name" attribute.

<a> tag: Creates the clickable link.
href="#bookmark-name": Points to the bookmark on the page.
id="bookmark-name": Marks the location to jump to.

html

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

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

Output

A clickable link labeled 'Go to Section 1' that jumps to the heading 'Section 1' on the same page.

💻

Example

This example shows a link that jumps to a specific section on the same page using a bookmark.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bookmark Link Example</title>
</head>
<body>
  <p><a href="#contact">Jump to Contact Section</a></p>

  <p>Some content here to scroll past...</p>
  <p style="margin-top: 1000px;"><strong>Scroll down to see the bookmark target.</strong></p>

  <h2 id="contact">Contact Section</h2>
  <p>This is the contact section you jump to.</p>
</body>
</html>

Output

A page with a link 'Jump to Contact Section' at the top that scrolls down to the 'Contact Section' heading far below when clicked.

⚠️

Common Pitfalls

Common mistakes when creating bookmark links include:

Using name attribute instead of id on the target element (the name attribute is outdated).
Misspelling the id or href value so they don't match exactly.
Linking to an id that does not exist on the page.
Using spaces or special characters in id values (only letters, digits, hyphens, underscores allowed).

html

<!-- Wrong: Using name attribute -->
<a href="#section2">Go to Section 2</a>
<h2 name="section2">Section 2</h2>

<!-- Right: Use id attribute -->
<a href="#section2">Go to Section 2</a>
<h2 id="section2">Section 2</h2>

Output

The first link may not work in modern browsers because <code>name</code> is deprecated; the second link works correctly.

📊

Quick Reference

Part	Description	Example
Anchor tag	Creates clickable link	Go to Top
href attribute	Points to bookmark by ID	#section1
Target element	Has matching ID attribute	Section 1
ID naming	No spaces or special chars	section1, top, contact_us

✅

Key Takeaways

Use href="#id-name" in <a> to link to a bookmark.

Add id="id-name" to the target element to mark the bookmark location.

Ensure the href and id values match exactly and use valid characters.

Avoid using the deprecated name attribute for bookmarks.

Bookmark links help users quickly jump to important parts of a page.