HTML Layout
A page layout needs a sensible reading order before it needs columns. Landmarks describe the major regions; CSS places those regions on the screen.
How it works
- Use header for introductory content, nav for major navigation, main for the principal content, and footer for closing information.
- Keep one visible main landmark for the page’s central content. An aside represents tangential information rather than an arbitrary right-hand column.
- Use CSS Grid or Flexbox for layout instead of tables, repeated spaces, or a collection of positioned elements with no logical source order.
A practical example
<header><p>Market Lane workshop</p></header>
<nav aria-label="Main"><a href="index.html">Home</a> <a href="schedule.html">Schedule</a></nav>
<main>
<h1>Plan your visit</h1>
<p>Read the schedule before choosing a session.</p>
</main>
<footer><p>Organised by community volunteers.</p></footer>
The document makes sense in this sequence without any CSS. Add layout rules later while keeping the same useful reading order.