HTML Layout

Understand the topic

A page layout combines semantic regions and CSS. header introduces a page or section, nav contains navigation, main holds the dominant content, aside holds related material, and footer provides concluding information. These elements do not automatically create columns. Use CSS Grid or Flexbox for placement while keeping the source order logical.

Worked example

<header><h1>Community Library</h1></header>
<nav aria-label="Main"><a href="#news">News</a></nav>
<main id="news"><h2>Library news</h2><p>New books arrived this week.</p></main>
<aside><h2>Related event</h2><p>Saturday reading club</p></aside>
<footer><p>Contact the library reception.</p></footer>

Each region describes its purpose. The document remains readable in source order before CSS adds a multi-column layout.

Practice

Create a main region with two independently headed sections.

<main><h1>Membership</h1><section><h2>Benefits</h2><p>Borrow books.</p></section><section><h2>Join</h2><p>Visit reception.</p></section></main>

Common mistake

Do not use tables for page layout or add semantic elements merely because their tag names sound like visual positions.

HTML documentation