HTML Tutorial
HTML Layout
header, nav, main, article, aside, and footer describe regions of a page without extra divs.
Regions, not just boxes
A page is more than a stack of divs. It has a banner, a menu, the unique content, an extra column, and a closing strip. HTML already has tags for those regions. Screen readers can jump to them. Search engines can tell the article from the footer. You write fewer generic boxes.
CSS still places the boxes — flex and grid, not nested tables. The tags name the regions. The stylesheet decides whether the aside sits beside the article or under it on a phone.
The landmark tags
| Tag | Region |
|---|---|
header | Banner of the page (or of an article): title, logo, short intro |
nav | Primary links for moving around the site or the page |
main | The unique content of this page. One per document |
article | A self-contained piece: a post, a recipe, a product |
aside | Related extras: a tip, hours, a related list |
footer | Closing information: contact, legal, secondary links |
You can still nest a div inside these when you need an unnamed wrapper for a CSS grid. Start with the landmarks. Add a div only when no landmark fits.
A small page skeleton
This is a complete miniature site: header with nav, main with one article, an aside, and a footer. No layout tables. No extra wrapper around the whole page unless CSS needs one.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harbor Cafe</title>
</head>
<body>
<header>
<h1>Harbor Cafe</h1>
<nav>
<a href="/">Home</a>
<a href="/menu.html">Menu</a>
<a href="/hours.html">Hours</a>
</nav>
</header>
<main>
<article>
<h2>Lunch special</h2>
<p>Tomato soup and sourdough. Until 14:00.</p>
</article>
<aside>
<h2>Hours</h2>
<p>Tuesday to Sunday, 8–16.</p>
</aside>
</main>
<footer>
<p>Harbor Lane 12. Allergen list at the counter.</p>
</footer>
</body>
</html>Read the tags aloud: header, nav, main, article, aside, footer. That sentence should match how you describe the page to a person. If it does not, the wrong tag is in the wrong place.
Place the regions with CSS
Landmarks do not magically sit in columns. A short <style> can put the article and aside side by side on a wide screen, stack them on a narrow one, and keep the header and footer full width.
Example
<style>
body {
font-family: system-ui, sans-serif;
margin: 0;
line-height: 1.5;
}
header, footer {
background: #0f172a;
color: #fff;
padding: 1rem 1.25rem;
}
nav {
display: flex;
gap: 1rem;
}
nav a { color: #99f6e4; }
main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.25rem;
padding: 1.25rem;
}
article, aside {
border: 1px solid #e2e8f0;
padding: 1rem;
}
@media (max-width: 640px) {
main { grid-template-columns: 1fr; }
}
</style>
<header>
<h1>Harbor Cafe</h1>
<nav>
<a href="/">Home</a>
<a href="/menu.html">Menu</a>
</nav>
</header>
<main>
<article>
<h2>Lunch special</h2>
<p>Tomato soup and sourdough.</p>
</article>
<aside>
<h2>Hours</h2>
<p>8–16, closed Monday.</p>
</aside>
</main>
<footer>
<p>Harbor Lane 12</p>
</footer>nav uses flex for a horizontal list of links. main uses grid for two columns. The media query drops to one column on a small screen. Open this in /html/try and shrink the preview to see the stack.
Do not lay out with tables
Years ago, pages were built as giant <table> grids: one cell for the menu, one for the article, one for ads. That fights both meaning and responsive layout. Tables are for rows of data — prices, timetables, comparisons. They are not a page skeleton.
If you are about to wrap the whole site in <table> to get two columns, stop. Usemain with CSS grid or flex, as in the example above.
A table inside article for the lunch prices is still correct. A table around headerand footer is not.
Fewer generic divs
Compare a “div soup” page with a landmark page:
Example
<!-- Harder to read: every region is a nameless box -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">
<div class="post">...</div>
<div class="side">...</div>
</div>
<div class="footer">...</div>
<!-- Clearer: the tags are the regions -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>Classes can still help: <article class="card"> is a named region and a reusable box. Replacing header with <div class="header"> throws the landmark away.
Practice
- One
mainper page. Put the unique content there, not in the header. - Skip extra wrappers until CSS actually needs a grouping element.
- Use
divfor a card row or a button group. Use landmarks for the page chrome. - Let flex and grid do columns. Leave
tablefor data.
The next chapter is responsive HTML: the viewport tag you already put in the head, flexible images, and media queries like the one on main in this lesson.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Biology
A clinic page with real regions
header, nav, main, aside, and footer name regions. They are still boxes, but they mean something to assistive tech and to you six months later.
main is the unique central content. One main per page. The hours in a sidebar are aside — related, not the article itself.
Example
<header>
<h1>Riverside clinic</h1>
</header>
<nav><a href="#hours">Hours</a></nav>
<main>
<h2>Walk-in</h2>
<p>Bring a photo ID.</p>
</main>
<aside id="hours">
<p>08:00–16:00</p>
</aside>
<footer>Not a diagnosis. Call if you are worse.</footer>Physics
A lab site skeleton
This is the skeleton CSS will later turn into columns. Get the tags right first. A pretty div soup is harder to fix than a plain semantic page.
Example
<header><h1>Drop lab</h1></header>
<main>
<article>
<h2>Today’s run</h2>
<p>s ≈ 19.6 m at t = 2 s</p>
</article>
</main>
<footer>g = 9.81 m/s²</footer>