What is semantic HTML?
Semantic elements describe their meaning, not just their look. Compare <div> (no meaning) with <nav> (navigation). Semantic HTML helps screen readers, search engines and other developers understand your page.
Common semantic elements
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Learning HTML</h2>
<p>HTML is the base of the web.</p>
</article>
<aside>Related links</aside>
</main>
<footer>Copyright 2025</footer>| Element | Use |
|---|---|
<header> | Intro or top of a page or section |
<nav> | Main navigation links |
<main> | The main content, once per page |
<article> | A self-contained piece, like a blog post |
<section> | A themed group of content with a heading |
<aside> | Side content |
<footer> | Bottom of a page or section |
Accessibility basics
- Use headings in order and use a single
<h1>. - Write meaningful
alttext for images. Usealt=""for purely decorative images. - Connect every input to a
<label>. - Use buttons for actions and links for navigation.
- Make sure text has enough colour contrast.
- Check that you can use the page with only the keyboard (Tab and Enter).
Why it matters for SEO
Search engines read structure. Clear headings, descriptive titles and semantic tags help them understand what your page is about.
Practice
Take a page built only with <div> tags and rewrite it using <header>, <nav>, <main>, <section> and <footer>.