HTML Table of Contents Markup: Headings and Fragment IDs

A table of contents acts like a map of a long page. Each item links to a real section using a fragment and a matching id.

What You Need to Know

Keep the labels close to the actual headings. Update the links when you rename or remove a section.

Example: See It in Action

Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<nav aria-label="Contents">
    <ol>
        <li><a href="#first">First steps</a>
        </li>
        <li><a href="#next">What comes next?</a>
        </li>
    </ol>
</nav>
<h2 id="first">First steps</h2>
<h2 id="next">What comes next?</h2>

Let’s Understand the Example

• Nav identifies a major collection of navigation links.
• Ol groups items whose order or numbering matters.
• Li is one item inside a list. Keep each item inside its parent list.
• Aria-label supplies an accessible name when a visible label is unavailable or inadequate.
• Href contains the destination of a link. A value starting with # points to an id on the same page.
• Id gives one element a unique name within the page, so a link, label, or script can point to it.

The first example link points to #first. Check whether that destination exists relative to the document. A link changes where readers go; it does not perform an action such as saving a form.

What Should You See?

The page should display “First steps” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Read only the headings, from top to bottom. Do they tell a sensible story? If not, move sections or choose levels that match the content.

Try It Yourself

1. Add a section and link to it from the contents list.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Adding href="#next" when no section uses id="next".
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• A table of contents acts like a map of a long page.
• Nav identifies a major collection of navigation links.
• Keep the labels close to the actual headings. Update the links when you rename or remove a section.