Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The simplest way to create an in-page bookmark in HTML is to give the destination element a unique id, then link to it with href="#that-id". Put the ID on the heading, paragraph, or table cell that actually marks the destination; an extra empty <div> or <a> is usually unnecessary.

How to make a bookmark in HTML

For example, this link points to a heading farther down the same page:

<p>Go to <a href="#carrot">the carrot cake cracker section</a>.</p>

<h2 id="carrot">Carrot Cake Crackers</h2>
<p>These are the ingredients you need.</p>

The id names the destination. The link’s fragment—the part after #—must match that ID exactly. When followed, the browser navigates to the element with that ID.

Where should the ID go?

Attach the ID to the existing element that best represents the place readers should land. A section heading is often the clearest destination; a paragraph or a table cell can also carry the ID when that is the intended target.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option

For example, to link directly to a cell in a table:

<table>
  <tr>
    <td id="shipping">Shipping details</td>
  </tr>
</table>

A same-page link to that cell would use <a href="#shipping">Shipping details</a>. The HTML Standard describes an element’s unique identifier as a way to link to a specific part of a document using a fragment: WHATWG HTML Standard: Elements in the DOM.

How to link to a bookmark from another page

Append the fragment to the destination page’s URL. For example, https://example.test/recipe#carrot opens the recipe page at the element whose ID is carrot. Replace the example address and fragment with the actual page URL and destination ID.

Rules for choosing an ID

  • Give the destination a non-empty id.
  • Use each ID only once within its element tree. Duplicate IDs make the destination ambiguous and violate the uniqueness requirement in the HTML Standard.
  • Make the fragment in the link match the destination ID exactly, including capitalization.
  • Prefer an ID that describes the destination, such as ingredients or shipping, so the markup is easy to understand and maintain.

The standard’s requirements for IDs are documented in its section on global attributes.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Should you add an empty anchor or div?

Usually, no. If a heading, paragraph, or table cell is already the destination, its own id does the job without adding an empty element solely to hold the bookmark. Use a separate element only when the desired landing point cannot sensibly be represented by an existing element.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Should you use the old name attribute?

For contemporary HTML, use id on the destination element and link to it with a fragment. A 2014 SitePoint discussion mentions older advice about named anchors and legacy browser support, but that historical context is not the basis for the modern pattern. The current HTML Standard supports ID-based fragment links.

Rank #4
Sale
Web Design with HTML, CSS, JavaScript and jQuery Set
  • Brand: Wiley
  • Set of 2 Volumes
  • A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.