HTML Navigation Practice: Build a Documentation Sidebar

A documentation sidebar is navigation through related lessons. Group links by topic and mark the current lesson so people know where they are. Use this as a chance to build something rather than just read about it. There is no need to remember every tag immediately.

What You Need to Know

Use a labeled nav region and clear list structure. Avoid using aside merely for visual positioning when the content's primary purpose is navigation.

Try solving the task before checking the example. It is fine to make mistakes: each browser refresh gives you another chance to see what the markup actually does.

Example: See It in Action

Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.

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="Documentation topics">
    <h2>HTML lessons</h2>
    <ul>
        <li><a href="intro.html">Introduction</a>
        </li>
        <li><a href="links.html" aria-current="page">Links</a>
        </li>
    </ul>
</nav>

Let’s Understand the Example

• Nav identifies a major collection of navigation links.
• An h2 starts a major section beneath the page topic.
• Ul groups items where the order does not matter.
• 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 intro.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 display “HTML lessons” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Try to explain the example to someone else in two sentences. If one line is mysterious, inspect that line instead of copying it blindly.

Try It Yourself

1. Add a third topic to the sidebar and mark it as the current page.
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

• Presenting a sidebar as a jumble of unrelated links with no active-page marker.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• A documentation sidebar is navigation through related lessons.
• Nav identifies a major collection of navigation links.
• Use a labeled nav region and clear list structure. Avoid using aside merely for visual positioning when the content's primary purpose is navigation.