Document and website structure
header, nav, main, article, section, aside, footer.
All lessons · HTML lessons: learn from scratch
Semantic sections
Some elements divide a page into meaningful parts: <header> for the intro or logo area, <nav> for main navigation, <main> for the page's central content (one per page), <article> for a self-contained piece, <section> for a topical block, <aside> for side information and <footer> for the bottom.
<body>
<header><h1>My Blog</h1></header>
<nav><a href="/">Home</a> <a href="/posts">Posts</a></nav>
<main>
<article>
<h2>First post</h2>
<p>Text of the post…</p>
</article>
<aside>Related links</aside>
</main>
<footer>© Nibras Code</footer>
</body>Why it matters
Screen readers jump between these parts quickly, search engines understand the page better, and the code reads more clearly. Generic <div> and <span> are used only when no meaningful element fits and you need a group for CSS.
- Keep the heading hierarchy inside sections too.
- Write menus as lists inside <nav>.
- Give every <section> a heading.
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Planning a site layout
Before coding, sketch the page's boxes on paper: top area, navigation, main content, side panel, bottom. Then pick the fitting semantic element for each box. When the same plan repeats across the site, visitors feel at home.