Semantic HTML structure

What we check

We check whether the home page uses these five structural elements:

Element	Meaning
<header>	Header area with logo and usually the menu
<nav>	Navigation
<main>	the actual content of the page
<article> or <section>	self-contained sections
<footer>	Footer area with contact, imprint, links

If two or fewer are present, there is a warning, if individual ones are missing a note. This check counts for little, at most 5 of 100 points in the area.

Why it matters

For people it is clear at a glance where the menu is and where the content begins. Machines see only code. If the whole page is built from neutral <div> elements, they have to guess what is navigation, what is advertising, what is the footer and what is content.

With semantic elements this is unambiguous:

• AI assistants and search engines concentrate on the content in <main> and leave aside recurring menus and footers. The summary of the page becomes more accurate.
• Screen readers offer landmarks: blind people jump to the main content with one keystroke instead of having the whole menu read out to them.
• Reading modes in browsers and apps recognise the main content more reliably.

How to fix it

Replace the outer containers with the appropriate elements:

<header>
  <a href="/">Logo</a>
  <nav>…menu…</nav>
</header>
<main>
  <h1>Carpentry in Chur</h1>
  <section>…services…</section>
  <section>…about us…</section>
</main>
<footer>…contact, imprint…</footer>

WordPress

Current themes already use these elements. Block themes create them in the site editor through the template parts "Header" and "Footer". With group blocks you can choose between <div>, <main>, <section>, <header> and <footer> under "Advanced › HTML element". With page builders such as Elementor you find the "HTML tag" setting in the layout options of a container.

Website builders

Wix, Squarespace and Jimdo use a fixed basic structure that you can hardly influence. If something is reported here, it is usually the builder's doing.

Older websites

If almost all elements are missing, the website is often technically older. At the next relaunch the agency should pay attention to a semantic structure.

How to check it yourself

Browser extensions such as "Landmarks" or "HeadingsMap" show the structural elements of a page. In the developer tools you can see directly under "Elements" whether <header>, <main> and <footer> occur.

Frequently asked questions

Will the page look different afterwards?

No. The elements change nothing about the display, only the meaning in the code. Styling is still done with CSS.

How many main elements may a page have?

Exactly one visible one. header, nav, section and footer may occur several times, for example a nav in the header and one in the footer.