HTML Layout

The semantics lesson named the regions. Layout is the next step: how those regions sit together as a page plan — banner on top, content and sidebar in a row, footer at the bottom — while CSS handles columns, gaps, and screen placement. HTML still owns meaning; CSS owns the look of the arrangement. Think of HTML as the floor plan labels and CSS as the furniture placement.

Structure first, then visual placement

Beginners often jump straight to “make two columns.” Start instead with a clear story: what is the banner, what is primary content, what is related, what closes the page. Once landmarks answer those questions, a styling wrapper (div class="row") or later flexbox/grid can place main beside aside without turning the whole document into a giant table.

Direct answer

Build a skeleton with header, optional nav, main, optional aside, and footer. Put unique story content in main. Use CSS (even a tiny flex rule today; fuller flex/grid in CSS courses) for columns and spacing. Keep anonymous div wrappers only when you need a styling hook, not a fake landmark. Do not rebuild the whole page as a layout <table>.

📊 HTML structure vs CSS visuals

Layer	Responsibility	Examples
HTML landmarks	Name page regions by meaning	header, nav, main, aside, footer
HTML wrappers	Optional styling hooks with no landmark role	div class="row"
CSS	Visual columns, gaps, widths, order on screen	flex, grid, margin, width
Avoid	Fake layout with data tables	table/tr/td for the whole site chrome

Landmark page skeleton

This demo shows a news-style plan: header, a row that will become columns, primary main with an article, related aside, and footer. The div.row is only a future CSS hook — meaning still lives in main and aside.

Landmark layout skeleton

html

<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

Reading the skeleton

header + nav introduce the site; footer closes it
Unique story content stays inside main → article
aside holds related notes — not a second main
div class="row" does not change meaning; it groups children for CSS
You could add id or class hooks from earlier lessons on any of these tags
Without CSS yet, browsers still stack regions vertically — that is fine for structure practice

Tiny CSS to suggest columns

The same landmarks can sit side by side once CSS treats the row as a flex container. This is a preview, not a full CSS course: the HTML regions stay the same; only placement changes.

Layout skeleton with flex row

html

<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

Reading the flex preview

HTML landmarks did not change — only .row gained display: flex
main grows wider (flex: 2); aside stays narrower (flex: 1)
Gap adds space between columns without nested layout tables
On a very narrow screen this simple flex may still squeeze — responsive tuning comes next
If you delete the <style> block, structure remains readable; only columns disappear
Never replace main/aside with empty td cells just to force columns

Tables are for data, not page chrome

Older tutorials used one giant table for header, sidebar, and footer. That fights accessibility and responsive design. Keep <table> for tabular data (schedules, comparisons). For page chrome, prefer landmarks + CSS.

Practice in your editor

Build header, main, aside, and footer for a practice topic page.
Put one short article only inside main.
Add a related tip inside aside.
Wrap main and aside in div class="row" if you want a column hook.
Optionally paste the tiny flex styles and notice columns appear without changing meaning.
Sketch on paper where columns will sit on desktop vs a stacked phone view.
Confirm you did not use a layout <table> for the page frame.
Write one sentence: HTML names regions; CSS places them.

Easy mistakes

Giant layout tables for the whole site chrome
Skipping main so tools cannot find primary content
Nesting landmarks randomly without a clear page story
Treating div.row as if it were a landmark (it is only a styling hook)
Expecting HTML alone to invent pixel-perfect columns
Copying a two-column look with nested tables “because it works in email” into a normal web page

Summary

Layout assembles landmarks into a page plan
HTML names regions; CSS handles visual columns and spacing
Optional div wrappers are styling hooks, not fake semantics
Avoid table-based page layouts; keep tables for data
Keep one clear main for unique content
Next: make that layout adapt better across screen sizes

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top