Semantic HTML
🏠The everyday picture
A building where every room is labelled: reception, office, kitchen, exit. Visitors, the fire brigade and the cleaner all find what they need. A building where every door just says "room" is confusing for everyone.
📘What it really is
- Semantic elements say what a part of the page is:
<header>: the top of the page or a section (logo, title);<nav>: the main navigation links;<main>: the page's main content (one per page);<section>: a themed group of content, usually with a heading;<article>: something that makes sense on its own (a blog post, a news item);<aside>: related extra content (a sidebar, a note);-
<footer>: the bottom (contact, copyright). -
<div>and<span>are non-semantic boxes:<div>for blocks,<span>for bits of text. Use them only when no semantic element fits, usually for styling. -
Why it matters:
- screen readers let people jump straight to
<nav>or<main>; - search engines understand the page better;
-
your own code (and AI's) is easier to read.
-
A typical page:
<body>
<header>...logo and title...</header>
<nav>...menu links...</nav>
<main>
<section>...</section>
</main>
<footer>...</footer>
</body>
🖱️Try it
Restructure both your pages: wrap the top in <header>, the menu in <nav> (a <ul> of links to both pages),
the content in <main> with <section>s, and add a <footer> with your name and the year. The page looks
almost the same. The difference is in its meaning.
✅Quick check
An AI-generated page is made entirely of <div>s. Does it matter if it looks fine?
Show the answer
Yes. Screen readers and search engines can't tell what each part is. Ask the AI to use semantic elements.
Which element holds a blog post that could be shared on its own?
Show the answer
<article>.