Page anatomy
The standard names for a page's regions (header, hero, main, aside, footer) so you can point at one part and be understood.
See it
What it is
Page anatomy is the shared naming for a page's regions, top to bottom: header (logo and nav), hero (the first big statement), main (the actual content, often in sections or bands), aside (a sidebar or rail of supporting stuff), and footer (links, legal, contact). Knowing the words is what lets you say 'tighten the hero, move that into the aside' instead of pointing at your screen.
The names are not decorative. Most map straight onto HTML landmark elements (header, nav, main, aside, footer), which is how screen readers offer a jump-to-region menu. Using the right element is free accessibility, and it makes an AI tool generate the structure you actually pictured.
Gotcha: 'hero' is a design word, not an HTML element, so it ends up as a section inside main. And there is exactly one main per page, while header and footer can repeat scoped inside an article or a card. Naming a div 'main-content' does nothing for assistive tech.
Ask AI for it
Build this page with explicit, named regions using semantic HTML landmarks: a header with logo and primary nav, then exactly one main element containing the hero section (headline, subhead, one primary CTA, supporting visual) as its first child followed by the remaining content sections, then a footer with secondary nav plus legal. Lay the sections out as full-width bands with a centered max-width container inside each. Put any supporting aside inside the main content region it belongs to, not floating between landmarks. Use header, nav, main, aside, and footer elements, and label each section with an aria-labelledby pointing at its own heading.