Unit 2 · HTML: structure and meaning
Why <div class="header"> isn’t a header
A class name means nothing to a screen reader or a search engine; the element name carries the meaning. <header>, <nav>, <main> and <footer> create landmarks people can jump between. A <div> creates none.
The mix-up
What people often think
“A div with a class name is just as good.”
What the tutor says
A class name means nothing to a screen reader. The element name is what carries meaning.
How it works
Two pages can look identical while one is built from divs and the other from semantic elements. The difference shows up for anyone who cannot see the screen: landmarks let them skip straight to the main content or the navigation.
Keep divs for grouping things purely for layout. When a box has a meaning, use the element that names it.
Side by side
<div class="header">...</div>
<div class="content">...</div><header>...</header>
<main>...</main>Close cousins of this mix-up
The tutor watches for these in the same lesson.
“A div with a class name like "header" is the same as a header.”
Screen readers and search engines read the element, not the class. Use header, main and footer.
Practise it with a tutor watching
Elements that mean something
Pick header, nav, main, article and footer for what content is, not how it looks.
Free, no account needed.