Semantic HTML means using elements that describe the meaning of their content, not just its appearance. A <nav> says "this is navigation"; a <button> says "this is clickable" — whereas a <div> says nothing.
html
Home
Home
Semantic HTML means using elements that describe the meaning of their content, not just its appearance. A <nav> says "this is navigation"; a <button> says "this is clickable" — whereas a <div> says nothing.
Home
Home
Both can be styled identically, but only the second one is understood by browsers, screen readers, and search engines.
<header>, <nav>, <main>, <footer>, letting users jump between regions. A wall of <div>s gives them nothing.<h1>, <article>, <main> and understand page structure.<button> is focusable, keyboard-activatable (Enter/Space), and announced as a button — a <div onclick> is none of these unless you re-add it all by hand.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
The rule of thumb: reach for the element that means what you intend, and only use <div>/<span> as styling containers when no semantic element fits.
It's the cheapest accessibility and SEO win you can make.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate