KandZ – Tuts

We like to help…!

HTML 14 🏛️ How to HTML nav Semantic element

How-To: Use <nav> for Primary Site Navigation

Steps:

  1. Wrap your main navigation links in a <nav> element.
  2. Use semantic HTML like <ul> or <ol> inside <nav>.
  3. Add role="navigation" and aria-label for accessibility.

Example:

<nav role="navigation" aria-label="Main site navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

How-To: Add Accessibility Labels to <nav>

Steps:

  1. Use aria-label to describe the purpose of the nav block.
  2. Include descriptive text if visual labels are not visible.

Example:

<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
    </ul>
</nav>

How-To: Create a Responsive Mobile Menu with <nav>

Steps:

  1. Add a toggle button for mobile.
  2. Use aria-controls to link the button to the menu.
  3. Apply CSS for hiding/showing the menu on small screens.

Example:

<nav role="navigation" aria-label="Main navigation">
    <button class="nav-toggle" aria-expanded="false" aria-controls="main-menu">Menu</button>
    <ul id="main-menu" class="nav-menu">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>

How-To: Use Multiple <nav> Elements in One Page

Steps:

  1. Place each navigation section within its own <nav>.
  2. Give each one a unique aria-label for clarity.
  3. Use semantic context (e.g., main, sidebar, article).

Example:

<header>
    <nav aria-label="Main site navigation">
        <ul><li><a href="/">Home</a></li></ul>
    </nav>
</header>
<aside>
    <nav aria-label="Sidebar links">
        <ul><li><a href="/faq">FAQ</a></li></ul>
    </nav>
</aside>

How-To: Build a Tab-Based Navigation Using <nav>

Steps:

  1. Use a container with role="tablist".
  2. Each tab is a button with role="tab".
  3. Ensure proper aria-selected states.

Example:

<nav role="navigation" aria-label="Tab navigation">
    <div class="tabs">
        <button role="tab" aria-selected="true">Profile</button>
        <button role="tab">Settings</button>
    </div>
</nav>

How-To: Implement Breadcrumb Navigation Using <nav>

Steps:

  1. Wrap the breadcrumb in a <nav> element.
  2. Use aria-label="Breadcrumb" for screen readers.
  3. Structure using an ordered list (<ol>).

Example:

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li>Web Development</li>
    </ol>
</nav>

How-To: Style <nav> Without Changing Semantic Meaning

Steps:

  1. Apply CSS styles directly to the <nav> or child elements.
  2. Maintain focus visibility and contrast for accessibility.
  3. Ensure responsive behavior for mobile views.

Example:

nav ul {
    list-style: none;
    display: flex;
}
nav a {
    padding: 10px;
    text-decoration: none;
}

How-To: Add Meaningful Link Text in <nav>

Steps:

  1. Avoid generic phrases like “Click here”.
  2. Use descriptive anchor texts that indicate destination.

Example:

<nav>
    <ul>
        <li><a href="/services/web-design">Web Design Services</a></li>
        <li><a href="/support/help">Get Help</a></li>
    </ul>
</nav>

How-To: Include Dropdown Menus in Semantic <nav>

Steps:

  1. Use nested <ul> inside <li> for submenus.
  2. Add aria-haspopup="true" and aria-expanded attributes.
  3. Ensure keyboard accessibility.

Example:

<nav role="navigation" aria-label="Site navigation">
    <ul>
        <li class="dropdown">
            <a href="/products">Products</a>
            <ul class="sub-menu">
                <li><a href="/web-dev">Web Development</a></li>
            </ul>
        </li>
    </ul>
</nav>

How-To: Implement Pagination Using <nav>

Steps:

  1. Wrap pagination with <nav>.
  2. Use aria-label="Pagination" for screen readers.
  3. Mark current page with aria-current.

Example:

<nav aria-label="Pagination">
    <ul>
        <li><a href="?page=1">First</a></li>
        <li><a href="?page=2" aria-current="page">2</a></li>
        <li><a href="?page=3">Next</a></li>
    </ul>
</nav>

How-To: Group Related Links in <nav> Using Semantic Structure

Steps:

  1. Use <h2> or <h3> to label related groups.
  2. Wrap content in appropriate semantic containers.

Example:

<nav role="navigation" aria-label="Quick links">
    <h3>Useful Links</h3>
    <ul>
        <li><a href="/login">Login</a></li>
        <li><a href="/register">Register</a></li>
    </ul>
</nav>

How-To: Improve Focus Management in <nav> for Keyboard Users

Steps:

  1. Ensure all links are focusable.
  2. Apply visible focus indicators via CSS (outline, :focus).
  3. Test keyboard navigation.

Example:

nav a:focus {
    outline: 2px solid #007BFF;
}

How-To: Use <nav> for Table of Contents in Long Articles

Steps:

  1. Create a list of headings or sections.
  2. Wrap with <nav> and give it an aria-label.
  3. Use <ol> for ordered section links.

Example:

<nav aria-label="Article table of contents">
    <ol>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
    </ol>
</nav>

How-To: Combine <nav> with Semantic Sections for Better SEO

Steps:

  1. Place <nav> in logical sections like <header>, <aside>.
  2. Make sure the structure reflects site hierarchy.
  3. Use clear aria-labels and meaningful link text.

Example:

<header>
    <nav aria-label="Main menu">
        <ul><li><a href="/">Home</a></li></ul>
    </nav>
</header>
<aside>
    <nav aria-label="Related posts">
        <ul><li><a href="/post1">Post 1</a></li></ul>
    </nav>
</aside>

How-To: Build a Sidebar Navigation with <nav>

Steps:

  1. Place navigation inside <aside> or directly in body.
  2. Use <nav> for semantic clarity.
  3. Add aria-label to identify the purpose.

Example:

<aside>
    <nav aria-label="Site map">
        <ul>
            <li><a href="/sitemap">Full Sitemap</a></li>
            <li><a href="/categories">Categories</a></li>
        </ul>
    </nav>
</aside>

How-To: Create a Multi-Level Dropdown Navigation Menu

Steps:

  1. Use nested <ul> elements within <li> tags for sub-menus
  2. Add aria-haspopup="true" on parent items with dropdowns
  3. Include aria-expanded attributes to track open/closed states
  4. Implement CSS for hover/focus effects and mobile responsiveness

Example:

<nav role="navigation" aria-label="Main navigation">
    <ul>
        <li class="dropdown">
            <a href="/products" aria-haspopup="true" aria-expanded="false">Products</a>
            <ul class="sub-menu">
                <li><a href="/web-design">Web Design</a></li>
                <li><a href="/mobile-apps">Mobile Apps</a></li>
                <li class="dropdown">
                    <a href="/ecommerce" aria-haspopup="true" aria-expanded="false">E-commerce</a>
                    <ul class="sub-menu">
                        <li><a href="/shop">Shop</a></li>
                        <li><a href="/cart">Cart</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

How-To: Implement a Search-Focused Navigation Pattern

Steps:

  1. Place search-related links within <nav> but outside primary navigation
  2. Use aria-label to clarify the context (e.g., “Search results navigation”)
  3. Include utility links like “Advanced Search”, “Filters” in separate nav blocks
  4. Ensure consistent styling and keyboard accessibility

Example:

<nav aria-label="Search navigation">
    <ul>
        <li><a href="/search">Quick Search</a></li>
        <li><a href="/advanced-search">Advanced Search</a></li>
        <li><a href="/filters">Refine Results</a></li>
    </ul>
</nav>

<nav aria-label="Utility navigation">
    <ul>
        <li><a href="/login">Login</a></li>
        <li><a href="/register">Register</a></li>
    </ul>
</nav>

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Leave a Reply