HTML Tutorial · Page Structure · Lesson 13 of 34
HTML Semantic Elements
header, nav, main, article, section, aside and footer.
Elements with meaning
Semantic elements describe what their content is. Browsers, search engines and assistive technology use them to understand the page — screen-reader users can jump straight to the <main> content or the <nav>:
| Element | Contains |
|---|---|
<header> |
introductory content or a site/section header |
<nav> |
major navigation links |
<main> |
the page's main content (one per page) |
<article> |
self-contained content: a post, a product card, a comment |
<section> |
a thematic group of content, usually with a heading |
<aside> |
related side content |
<footer> |
footer for the page or a section |
<time datetime="..."> |
a date or time |
<style>
body { font-family: sans-serif; margin: 0; }
header, nav, main, aside, footer { padding: 8px 12px; }
header { background: #1e3a8a; color: white; }
nav a { margin-right: 10px; }
main { display: flex; gap: 12px; }
article { flex: 2; }
aside { flex: 1; background: #f1f5f9; }
footer { background: #e2e8f0; font-size: 0.85em; }
</style>
<header><strong>My Blog</strong></header>
<nav><a href="#">Home</a><a href="#">Articles</a><a href="#">About</a></nav>
<main>
<article>
<h2>Learning semantic HTML</h2>
<p>Published <time datetime="2026-10-12">12 October 2026</time></p>
<section>
<h3>Why it matters</h3>
<p>Semantic elements make pages accessible and easier to index.</p>
</section>
</article>
<aside>Related: <a href="#">CSS basics</a></aside>
</main>
<footer>© 2026 My Blog</footer>
Test yourself
How many <main> elements should a page have?
NoneOneOne per articleUnlimited
Show answer
Answer: One