Semantic HTML landmarks

What are semantic landmarks, and why do machines care?

Landmarks are the HTML elements that say what each region of a page is: this part is the navigation, this is the header, this is the main content. A page built from them hands a machine a labelled floor plan. A page built from anonymous boxes makes it work out the floor plan for itself.

By Milk Moon Studio Last updated

What it actually is

HTML has a handful of elements whose whole job is to name a region rather than to style it: main for the content that is the reason the page exists, nav for the menus, header and footer for what repeats on every page, article for a piece that stands on its own. A generic box looks identical on screen. The difference is only visible to software, and that is the point.

Why it matters

A machine reading your page wants the part that is unique to it and nothing else. When the content sits inside main, the menus sit inside nav and the boilerplate sits in header and footer, the answer is written down. Screen readers use the same labels to let a listener jump straight past the menu, and AI tools that strip a page down to its substance use them to decide what to keep. Without them, the menu, the cookie notice and the sidebar all look like content.

What good looks like

One main region holding what the page is actually about, with the navigation and the repeated top and bottom of the site marked as what they are around it. Long-form pieces sit in an article. The labels match the regions honestly, so a machine that keeps only main keeps exactly the part a reader came for.

Being honest about it

This never fails a page; at worst it is worth a look. Plenty of sites built from generic boxes are still read, because machines have become good at guessing. We include it because a guess can be wrong, the labels cost nothing to a site being built, and they serve people using assistive technology just as much as they serve machines.

Where most sites go wrong

The usual pattern is a page builder or a theme that wraps everything in generic containers, so the page looks finished and declares nothing. The other is a main region that is present but wrong: wrapped around the whole page including the menus, or left on a template while the real content renders somewhere outside it.

Not sure where yours stands?

A free scan checks this and everything else in about 20 seconds — no signup. Or if it's already flagged and you'd rather it were simply handled, we do that too.

Scan your site free

Flagged for this one? We handle it. No pitch, just a plain-English chat.

Book a call