وضع المحتوى في main واستخدام main واحد فقط

Every page has one star: its unique content. The main element is where that content lives, separate from headers and footers.

A page should have exactly one main landmark. Two mains confuse users, who expect a single primary destination.

Put the page's core content in main: the article, the form, the dashboard. The thing the user actually came for.

Repeated stuff like the site logo, global nav, and footer links live outside main, since they are not unique to this page.

A skip link points to main so keyboard users can jump straight to content, past the repeated header on every page.

Add tabindex of -1 to main so a skip link can move focus into it without making it tabbable on its own.

If you ever need a second main, all but one must be hidden from view. Only a single visible main is allowed at a time.

The main element cannot live inside article, aside, nav, header, or footer. It sits at the top level of your page body.

For very old browsers you can add role of main as a backup, but the native main element is the right modern choice.

With a single main, screen reader users press one key and land exactly on the content, every page, every time. 🎯

Header, then nav, then one main, then footer. That predictable shape is what makes a page easy to scan by ear.

How many visible main landmarks should a single page expose?

You learned to put unique content in a single main, keep repeated parts outside, and use it as the skip-link target. 🙌