Bookmark Links
Jump to a specific spot on a page using an id.
Syntax
<a href="#section2">Go</a> ... <h2 id="section2">Section 2</h2>You can link to a specific section of a page using a bookmark. This combines the id attribute with a link that starts with #.
How to make a bookmark
- Give the target element an
id. - Create a link with
href="#idname".
Example
Loading editor…
Press Run to see the result.
When to use it
- A long tutorial page uses anchor links at the top so users can jump directly to specific sections.
- A single-page FAQ uses id attributes on each question and href="#question-3" links in the TOC.
- A developer creates a "Back to top" link at the bottom of a long page linking to id="top" on the body.
More examples
Table of contents with anchor links
href="#intro" scrolls the page to the element whose id matches "intro" with no server request.
<nav>
<ol>
<li><a href="#intro">Introduction</a></li>
<li><a href="#syntax">Syntax</a></li>
<li><a href="#examples">Examples</a></li>
</ol>
</nav>
<h2 id="intro">Introduction</h2>
<h2 id="syntax">Syntax</h2>
<h2 id="examples">Examples</h2>Back to top bookmark
id="top" on <body> gives the page a target; href="#top" scrolls the user back to the beginning.
<body id="top">
<main>
<!-- long content -->
<p>...lots of content...</p>
</main>
<a href="#top">Back to top</a>
</body>Anchor link to another page section
Combining a filename and a fragment identifier links directly to a section on a different page.
<!-- On index.html -->
<a href="courses.html#javascript">Go to JavaScript section</a>
<!-- On courses.html -->
<section id="javascript">
<h2>JavaScript</h2>
</section>
Discussion