Open the code behind many websites, and you will find the same thing repeated hundreds of times: one generic box nested inside another, none of them saying what they are for. The page may look perfectly organised on screen, but underneath it is a pile of unlabelled containers.
Semantic layout elements fix that. They are a small set of HTML tags that describe a page’s major regions by purpose, rather than just drawing a box. An earlier article in this collection looked at why semantic HTML matters in general. This one is a practical tour of the specific layout elements themselves and where each one belongs.
The Five Core Layout Elements
<body> <header>…</header> <nav>…</nav> <main>…</main> <aside>…</aside> <footer>…</footer></body>
header
The introductory area of a page or of a section. On a page, it usually holds the logo, site name and perhaps the main navigation. A header can also sit inside an article or section to hold its own heading and introductory details, so a page can legitimately contain more than one.
nav
A block of major navigation links, such as the main menu. It is meant for primary navigation rather than every group of links on the page. A short list of related links in the middle of an article does not need to be wrapped in nav.
main
The central content that is unique to this page. There should be only one visible main element per page, and it should not include repeated material such as the site header, footer or sidebar. It is also one of the most useful landmarks for people using a keyboard or screen reader, since it lets them skip straight to the point.
aside
Content that is related to the surrounding material but not essential to it, such as a sidebar, a pull quote, a related links box or a short note. If you could remove it and the main content would still make complete sense, aside is probably the right element.
footer
The closing area of a page or section, typically holding copyright details, contact information, secondary links and legal notices. Like a header, a footer can also belong to a smaller section, such as the end of an article.
Putting It Together
<body> <header> <a href=”/”>Site name</a> <nav> <ul> <li><a href=”/services/”>Services</a></li> <li><a href=”/blog/”>Blog</a></li> <li><a href=”/contact/”>Contact</a></li> </ul> </nav> </header> <main> <h1>Page title</h1> <p>The main content of the page.</p> </main> <aside> <h2>Related reading</h2> </aside> <footer> <p>Copyright details and contact information.</p> </footer></body>
Notice that nothing here changes how the page looks by default. These elements do not come with built-in styling beyond basic block behaviour. Their value is in the meaning they carry, with the appearance left to CSS.
Why Semantic Layout Elements Genuinely Matter
- Screen readers and other assistive tools treat these elements as landmarks, letting users jump directly to the navigation, the main content or the footer instead of listening to the whole page
- Search engines and AI answer engines can more easily tell the main content apart from repeated boilerplate such as menus and footers, helping them focus on what the page is actually about
- Code becomes easier to read and maintain, since a header is clearly a header rather than a generic box with a class name you have to decode
- Consistent landmarks make it easier for other developers, and for you in six months’ time, to understand how a page is put together
Common Mistakes to Avoid
- Using more than one visible main element on the same page
- Wrapping every group of links in nav, which dilutes its meaning for assistive technology
- Placing repeated site-wide content, such as the main menu or footer, inside main
- Using these elements purely for styling, then choosing them by how they look rather than what they mean
- Replacing semantic elements with generic div containers out of habit, losing the landmarks entirely
Semantic Layout and WordPress
Well-built WordPress themes already use these elements. Block themes in particular map template parts onto them, with the header and footer template parts generating header and footer, and the Query Loop and post content sitting inside main. If you are working with a classic theme, it is worth viewing the page source to check the structure is sound, since older or poorly built themes sometimes rely entirely on generic containers.
A Quick Semantic Layout Checklist
☐ Use one visible main element per page, containing only content unique to that page
☐ Wrap the primary navigation in nav, and not every list of links
☐ Put the site logo and name in a header, and closing details in a footer
☐ Use aside only for content that is related but not essential
☐ Check the page source or an accessibility tool to confirm the landmarks are present
☐ Leave visual styling to CSS rather than choosing elements by appearance
Frequently Asked Questions
Do semantic layout elements improve my rankings directly?
There is no evidence they act as a direct ranking factor. Their value comes from helping search engines and accessibility tools understand your page structure, which supports better indexing, usability, and clearer content.
Can I use more than one header or footer on a page?
Yes. A page can have a main header and footer, and individual articles or sections can each have their own. What should be limited to one visible instance per page is the main element.
What is the difference between div and the semantic layout elements?
A div has no meaning of its own; it is simply a generic container. Elements like header, nav and footer describe their purpose. Div is still perfectly useful when no semantic element fits, such as for purely visual grouping.
Does my WordPress theme already use these elements?
Most modern themes do, particularly block themes. You can check by viewing your page source or using a browser’s accessibility inspector to see whether the landmarks are present.
Will changing to semantic elements break my design?
Usually not, but it can if your CSS targets generic containers by class or tag name. It is worth testing the change on a staging copy first and checking the layout across screen sizes.
Curious About Your Site’s Underlying Structure?
If you would like a second opinion on how your pages are built under the hood and whether the structure is helping or hindering you, get in touch for a plain conversation with no obligation and no sales pitch.