LearnHTML.net

Explore

LearnHTML.net

Quick find

Search lessons, patterns, and prompts

Open full search
SearchPrompt Builder

Lesson · Beginner

Semantic page layout

Choose landmarks and sectioning elements by their role so navigation and content remain understandable without visual styling.

Published
Last checked

Start with page responsibilities

Most pages need a site header, navigation, one main content region, and a footer. Add article, section, or aside only when the content has that meaning.

<body>
  <header>Site identity and primary navigation</header>
  <main>
    <article>
      <h1>How community solar works</h1>
      <section>
        <h2>Who can join</h2>
        <p>Eligibility depends on the local program.</p>
      </section>
    </article>
  </main>
  <footer>Contact and policy links</footer>
</body>

A div is not wrong

Use a generic div when you need a styling or scripting hook and no semantic element matches. Semantic HTML is not about eliminating every generic container; it is about choosing meaning when meaning exists.

Accessibility implication

Landmarks let assistive-technology users jump between page regions. Repeated landmarks need labels that distinguish them.

How browsers actually behave

Many semantic elements map to accessibility landmarks or document roles when used in the appropriate context. A header at the body level commonly becomes a banner, while a header nested inside an article does not create another site banner. The browser and accessibility API derive this context from the DOM, not from visual position.

section is not a generic wrapper. It represents a thematic grouping and normally needs a heading. article represents independently reusable or self-contained content. A div carries no additional meaning and remains the right tool for layout hooks.

Decisions and trade-offs

Start from page responsibilities, then add elements. One main identifies the primary content. Navigation regions contain major groups of links, not every small cluster. An aside is tangential to surrounding content, not simply a column that happens to sit on the right.

Avoid nesting sections solely to satisfy a component tree. Excess landmarks and headings make navigation noisy. Semantics should improve the model a reader receives; when no defined element adds truth, use a generic container.

Accessibility consequences

Landmark navigation gives screen-reader users a fast route past repeated chrome. A skip link gives keyboard users the same benefit. Repeated navigation or complementary regions need distinct accessible labels such as “Primary” and “Related lessons.”

CSS reordering can separate visual and DOM sequences. At narrow widths or with styles disabled, source order becomes the experience. Place the main task in a logical position and keep focus order aligned with what is visible.

Common failures and fixes

  • Several main landmarks are announced. A component includes its own primary region. Keep one visible main landmark per page.
  • Every wrapper is a section. Elements were chosen by name rather than meaning. Use div for neutral grouping.
  • Navigation regions are indistinguishable. Repeated nav elements have no labels. Give each a concise purpose.
  • The screen-reader order differs from the layout. CSS reordered content. Fix source order and use layout without changing sequence.

Verify it

List the page's headings and landmarks from the accessibility tree. Each should have a clear purpose, and repeated roles should be distinguishable. Disable CSS and read from top to bottom. Use a keyboard to activate the skip link and traverse interactive content. At 320 CSS pixels and 200% zoom, ensure visual, reading, and focus order still align. Validate the HTML to catch invalid nesting and inspect ambiguous regions in more than one browser.

Exercise and next step

Remove CSS from a page layout. Confirm that the remaining document order and headings still tell a coherent story. Next, give that page a truthful title, description, and canonical identity.

Boundary of this lesson

Semantic elements do not automatically make content understandable or an interface operable. A perfectly named region can contain vague headings, misleading links, or inaccessible custom controls. ARIA roles also do not add the full behavior of native elements. Use the document outline and landmark list as review tools, then continue into keyboard behavior, visible content, error recovery, and responsive order. The goal is a truthful model, not the maximum number of semantic tags.

Practice by simplifying

Choose a page with many wrappers and list its headings and landmarks. Remove each semantic element that does not add a truthful relationship, keeping a generic container when layout still needs one. Then ask whether the remaining landmarks let a screen-reader user reach the primary task quickly and whether the CSS-free order tells the same story. Simplification is successful when the page model becomes clearer, not merely shorter.

Repeat the check after opening every navigation, disclosure, and validation state. Dynamic content should enter the same coherent heading and landmark model instead of creating a second outline that only exists after interaction. Compare visual, DOM, reading, and focus order together; agreement across all four is stronger evidence than a landmark count alone.