Reviewed July 2026. This article was substantially updated to reflect current web standards and practices.
Modern pages are not defined by a fixed desktop diagram. Their structure should preserve meaning and reading order while the visual layout adapts to content, screen size, zoom, and input method.
Site-level regions
A header usually carries brand and primary navigation. A top bar may hold secondary contact actions. Breadcrumbs can show location in a hierarchy, while the footer contains supporting navigation, ownership, and legal information.
The main page content
Each page should have one main region and a clear primary heading. A hero may introduce the offer, but it should not delay the actual task. Sections, articles, lists, media, and forms should follow a logical document order.
Supporting content
Related links, side panels, calls to action, filters, and disclosures should support the main purpose rather than compete with it. On narrow screens, move them to a position that still makes sense in the reading sequence.
Layout is not meaning
CSS Grid and Flexbox can place content visually without changing the document order. Keep the source order meaningful for keyboard and screen-reader users, and avoid using tables or empty elements to create visual spacing.
How the regions work together
The header establishes identity and access to primary destinations. Breadcrumbs can provide hierarchical context on deeper pages. The main region contains the unique purpose of the page. Supporting navigation or related resources can help users continue, while the footer provides secondary destinations, contact context, legal information, and ownership.
Page-specific patterns
- Service page: offer, audience, outcomes, capabilities, process, proof, questions, and contact path.
- Article: title, summary, dates, author or reviewer context, main content, sources, and related reading.
- Listing: heading, scope, filters or sorting where needed, results, empty state, and pagination.
- Contact: expectations, direct contact options, labeled form, privacy context, errors, and confirmation.
- Legal or policy: clear title, effective or review date, navigable sections, and contact for questions.
Responsive placement decisions
A desktop sidebar may move below the article on a phone, but it should not interrupt the content at an arbitrary point. A menu may overlay the page, but it should anchor directly to the header, remain scrollable, and preserve a clear close action. Visual rearrangement should not create a confusing keyboard or screen-reader order.
Use landmarks and headings to make the structure perceivable without relying on color or position. Then use CSS to create the composition appropriate to each viewport and container.