id
Creates a unique target on the page.
Platform under construction
HTML Bookmarks
Learn HTML Bookmarks with practical HTML examples for navigation, images, alt text, media behavior, metadata, accessibility, SEO and live practice.
HTML links and media
Bookmarks link directly to a section on the same page.
HTML bookmarks use fragment links. A link such as href="#pricing" jumps to the element with id="pricing".
Bookmarks are useful for long lessons, documentation pages, FAQ sections, tables of contents and skip links.
They are small, but they make a page feel faster because users can jump straight to the part they need.
href="#section"
Links to the element with that id.
Table of contents
A list of links that jumps to page sections.
Skip link
A keyboard-friendly link that jumps past repeated navigation.
Syntax and structure
The href fragment must match an id exactly.
If href="#practice" is used, the page needs an element with id="practice".
Working section bookmarks
<nav aria-label="On this page"> <a href="#overview">Overview</a> <a href="#practice">Practice</a> <a href="#checklist">Checklist</a> </nav> <section id="overview">...</section> <section id="practice">...</section> <section id="checklist">...</section>
Broken or duplicated bookmark targets
<a href="#pricing">Pricing</a> <section id="prices">...</section> <section id="faq">...</section> <section id="faq">Duplicate id</section>
Rules that matter
Links and media should be useful, stable and understandable.
Clickable and visual HTML affects how people move, scan, trust and share a page. The details are small, but the user experience impact is large.
Match exactly
The fragment after # must match the id value.
Use unique ids
An id should appear once per page.
Keep ids stable
Changing ids can break shared URLs and internal links.
Use readable names
id="pricing" is easier to maintain than id="x7".
Use skip links for accessibility
Skip links let keyboard users jump to main content.
Do not overdo fragments
Only create bookmarks for sections people may actually need to jump to.
Production thinking
Navigation, images and metadata are part of product quality.
Why does this matter?
This matters because long pages need navigation inside the page, not only between pages. Bookmarks make deep content usable.
Accessibility
Bookmarks and skip links help keyboard and screen reader users move through long pages without repeating the same navigation every time.
Production note
Fragment links are often shared directly. Treat important ids as part of your URL contract.
SEO note
Clear section ids and internal table-of-contents links can help search engines understand page structure and may support sitelink-style navigation.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one section id and update the matching href.
- Add a fourth bookmark link and section.
- Run the preview and test whether the fragments still match.
Practice assignment
Do this before moving to the next lesson.
- Create a table of contents with at least three fragment links.
- Use unique readable ids for each target section.
- Explain why stable ids matter on published pages.
Try it yourself
Build a small table of contents
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?