Proper Semantic Header HTML Code Example

Category: Semantics Published: October 9, 2022

Here's a proper semantic, accessible, and SEO-friendly header HTML code example for you. No JS or CSS as it is a semantic example and not a tutorial.

I included comments on why things are the way they are.

1<header>
2    // Aria-label on the logo link helps screenreaders identify the homepage link.
3    <a href="/" aria-label="Example Site homepage">
4        // Logo still has its own alt-attribute. Do remember to add height, width and eager loading to improve layout shift and loading speed.
5        <img src="/example-site-logo.svg" alt="Example Site logo" height="20" width="20" loading="eager"/>
6    </a>
7    // This hamburger button toggles the mobile navigation. Buttons are defaulted to "submit" type, so let's change that to "button".
8    // It opens a popup, so let's add aria-haspopup "menu". The ID of the menu is "main-menu", so let's add aria-controls with the ID to it.
9    // By default it is not expanded, so the aria-expanded is false. Add JS that makes this switched to true when clicked. Add aria-label as the button does not contain any text.
10    <button type="button" aria-haspopup="menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle main menu" onclick="toggleMenu()">
11        <svg>...</svg>
12    </button>
13    // It is a good practice to aria-label your navs when you have multiple navs on your site. The ID is important, it is used by the mobile menu button above.
14    <nav aria-label="Main menu" id="main-menu">
15        // Add links as an unordered list
16        <ul>
17            <li><a href="/">Home</a></li>
18            <li><a href="/about-us">About us</a></li>
19            <li><a href="/contact">Contact</a></li>
20            <li>
21                Services
22                <ul>
23                    // Remember to nest your lists properly
24                    <li><a href="/web-design">Website Design</a></li>
25                    <li><a href="/web-development">Web Development</a></li>
26                </ul>
27            </li>
28        </ul>
29    </nav>
30</header>

At the end of the day an accessible and semantic header is very simple to do. You can add divs there if the design requires them, as long as they are not direct childs of the <ul>.

Got any improvements to this example? Do send them to me at jere@vaihe.com!