Web development and performance
What is Semantic HTML?
Semantic HTML means using elements for what they mean rather than how they look — nav, main, article, button, table — so browsers, assistive technology and search engines can understand the structure without guessing from class names.
Also called: semantic markup
Why it matters to three audiences at once
- Screen readers use landmarks and headings to let users navigate. A page of divs offers nothing to navigate by
- Search engines use heading structure to understand what a page covers and how it is organised
- Browsers give real elements keyboard behaviour, focus handling and form semantics for free
The most common substitutions worth fixing
| Instead of | Use | Because |
|---|---|---|
| div with a click handler | button | Keyboard operable and announced correctly, at no cost |
| div with a click handler that navigates | a with href | Can be opened in a new tab, crawled and bookmarked |
| div stack for tabular data | table with th scope | Row and column relationships are announced |
| b and i for emphasis | strong and em | Conveys meaning rather than only appearance |
| Multiple h1 for styling | One h1, then h2 and h3 | Heading level is structure, not font size |
The shortcut that pays for itself
Use the real element and style it, rather than rebuilding its behaviour on a div. Every accessibility feature you would otherwise implement by hand — and get subtly wrong — is already there.
Where this is covered in depth
A definition can only go so far. Technical SEO, in the order the problems actually block you covers this properly — 4 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.