header وnav وmain وfooter: العناصر الأربعة الكبرى

Sighted users scan a page in a glance. Screen reader users need a map, and HTML5 landmark elements draw it for them.

Four elements cover most pages: header, nav, main, and footer. Together they split your layout into regions users can jump between. 🗺️

A page-level header holds your site name, logo, and intro content. Screen readers expose it as the banner region.

Wrap your primary set of links in nav. It tells assistive tech this block is navigation, so users can find or skip it fast.

The main element wraps the unique content of the page. It is the destination users care about most.

A page-level footer holds copyright, legal links, and contact info. Screen readers announce it as the contentinfo region.

These tags carry built-in ARIA roles, so header becomes banner and nav becomes navigation with zero extra attributes.

A header inside an article is just a section header, not the page banner. Only a top-level header counts as the banner landmark.

A div has no role, so a screen reader sees nothing to jump to. Landmark tags turn invisible structure into real navigation.

Stack the four together and a screen reader user instantly hears the shape of your page before reading a word. 🎯

With landmarks in place, users can jump past the header straight to main, skipping repeated links on every page.

Which landmark wraps the unique, primary content of a page?

You learned that header, nav, main, and footer give screen reader users a map. Native tags mean free landmark roles. 🙌