Build a Real Website · Module 1 · HTML: the skeleton
Structure that means something
6 min read · lesson 2 of 5
You could build an entire site from <div> boxes, and many people do — it is called div soup, and it works until you must style it, read it, or be found by a search engine. Semantic tags name the parts of a page instead.
The five that cover most pages
- <header> — the top strip: logo, site name.
- <nav> — the main links.
- <main> — the one main content area of the page.
- <section> — a themed chunk inside main.
- <footer> — the bottom strip: contact, copyright.
<body>
<header>
<h1>Waseem's Tea Stall</h1>
<nav>
<a href="menu.html">Menu</a>
<a href="location.html">Find us</a>
</nav>
</header>
<main>
<section>
<h2>Today's special</h2>
<p>Dum ki chai, 20 rupees.</p>
</section>
</main>
<footer>
<p>© 2026 Waseem's Tea Stall</p>
</footer>
</body>Rule of thumb: if you cannot say what a <div> is for out loud, it probably wanted to be a <section> or <main>.
Practice
Reshape your page from lesson 1 with header, nav, main, section and footer.