HTML Breadcrumb Navigation Markup: List Semantics and Accessibility

Breadcrumbs describe how a page fits into a site. A nav landmark with an ordered list is a simple, accessible structure.

What You Need to Know

Use aria-current="page" on the current item and descriptive ancestor links. Decorative separators belong in CSS rather than the spoken link names.

Example: See It in Action

This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.

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="Breadcrumb">
    <ol>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="courses.html">Courses</a>
        </li>
        <li aria-current="page">HTML</li>
    </ol>
</nav>

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.
• Aria-current identifies the current item in a set, such as the current page in navigation.

The first example link points to index.html. 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 include “Home”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.

Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.

Try It Yourself

1. Add a parent category link and confirm the hierarchy reads naturally.
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

• Making the last breadcrumb a link to itself without any reason.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• Breadcrumbs describe how a page fits into a site.
• Nav identifies a major collection of navigation links.
• Use aria-current="page" on the current item and descriptive ancestor links. Decorative separators belong in CSS rather than the spoken link names.