Semantic HTML: structure that means something
Write markup that browsers, screen readers and search engines can actually understand.
- Explain why semantic tags matter for accessibility and SEO
- Build a page skeleton with header, nav, main, section, article, aside and footer
- Choose the correct heading level and form control type
- Know when a div is appropriate and when a semantic element is required
A recruiter's screen reader opens your portfolio site. Every region is announced as "group" because the page is sixty divs. The same site rebuilt with header, nav, main and section announces landmarks the tool can jump between. Nothing about the visual design changed — only the meaning. That difference is why "just use divs" is a career-limiting habit.
HTML describes meaning and structure; CSS describes appearance; JavaScript describes behaviour. Mixing those jobs produces pages that are fragile and inaccessible.
Semantic elements and what they announce:
| Element | Meaning | Landmark? |
|---|---|---|
| header | Introductory content or nav for a section | Yes (banner when top-level) |
| nav | Major navigation links | Yes |
| main | Dominant content of the document | Yes |
| section | Thematic grouping of content | No |
| article | Self-contained composition (post, card) | No |
| aside | Tangentially related content | Yes (complementary) |
| footer | Closing content for a section or page | Yes (contentinfo when bottom) |
Headings form an outline. Do not skip levels (h1 then h3). One h1 per page typically names the page. Screen readers build a heading tree users navigate; skipped levels break that tree.
Forms: always use the right input type. type=email, type=tel, type=number, type=date give mobile keyboards, native validation, and autofill hints. A type=text input for an email address costs real usability.
Images need alt text. Decorative images get alt="" (empty string, not omitted); informative images get a description. Screen readers skip empty alt; missing alt often gets the file name read aloud.
h1 names the page; h2 are major sections; h3 subsections. Never use a heading for visual size — that is CSS's job.
A div with onclick is invisible to keyboard users and screen readers. Use <button> for actions and <a> for navigation; style them to look like whatever you want.
- 1
Identify roles
top = page header + primary nav; content = main with an article; bottom = footer with secondary info.
header > nav main > article footer - 2
Rewrite with landmarks
Replace each structural div with the matching semantic element. Keep classes for styling hooks if needed.
<header><nav>...</nav></header> <main><article>...</article></main> <footer>...</footer> - 3
Fix headings and links inside
Site title becomes h1 inside header (or main, depending on layout). Post title becomes h2 inside article. Nav links stay <a href>.
Solution
Same pixels, different meaning. The accessibility tree now exposes banner, navigation, main, article and contentinfo landmarks; the outline has a coherent heading tree; crawlers attribute the content correctly.
1. A blog post card with title, author, date, body and "Read more" link. 2. A contact form with name, email, phone and message fields — correct types and labels. 3. A page with a sidebar of related links (semantic element for the sidebar?).
Hint: 1: article + h2/h3 + time datetime + p + a. 2: label for each control; input type text/email/tel; textarea for message. 3: aside.
Using heading tags purely for font size
Headings define outline order, not appearance. Style with CSS; choose the level that matches document structure.
Omitting alt on images
Missing alt often reads the file name aloud. Informative images get a description; decorative ones get alt="".
Click handlers on non-interactive elements
div/span with onclick exclude keyboard users. Use button or a with proper roles when you must.
Name three benefits of semantic HTML over div-only markup.
1) Screen readers announce landmarks and headings, enabling navigation. 2) Search engines understand content structure better. 3) The code is readable and maintainable — the element name documents its purpose.
Source: Frontend interview staple
- HTML = meaning; CSS = appearance; JS = behaviour.
- Landmarks: header, nav, main, aside, footer — screen reader jump points.
- One h1; never skip heading levels.
- Correct input types; labels for every control; alt on every img.
