SEO Fundamentals: Landmarks & Page Structure

Oscar de la Hera Gomez
A flower that represents SEO with the text "Landmarks" beneath it.

A brief guide describing the basics behind ARIA landmarks and how to correctly use them within a webpage structure.

This is a classic page structure with a header, a navigation, main content, maybe some complementary content on the margin and a footer. We do have correct markup for these parts.

When creating layouts, designers and technologists must be aware of ARIA landmarks - HTML elements that define regions of a page which help a machine to better interpret the content.

Examples of ARIA Landmarks as can be seen on the WCAG webpage linked below.

Landmarks that are available for designers and developers include navigation, footer, banner, main, article, section, header, complimentary, aside, form and region.

Finally, unless the landmark begins with a header tag, each landmark must be labelled using an aria-label.

Page Structure Tutorial

For a more holistic understanding of how to structure pages and use landmarks, please carry out the World Wide Web Consortium (W3C) tutorial linked below.

When using the learnings within your own website, you should write the webpage using rich HTML syntax (i.e. avoid using only divs).

Looking to learn more about SEO ?

Search our blog to find educational content on learning SEO and more.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details