Semantic HTMLThe elements that carry meaning, and why a div is not one of them.ComputingEach of these tells a browser, a screen reader and a search engine what thecontent is.ElementFor<header> / <footer>Top and bottom of a page or section<nav>A block of navigation links<main>The primary content — one per page<article>Self-contained, redistributable content<section>A thematic group, usually with a heading<aside>Tangential content<button>Anything that performs an action<a>Anything that goes somewhereA div with a click handler is not a button: no keyboard focus, no Enter orSpace, no announcement. Use the element.Semantic HTMLlearnposters.com
Semantic HTML — printable computing wall chart from LearnPosters. Free vector PDF, US Letter and A4.

What’s on the Semantic HTML poster

A 8-row table: Element · For.

Each of these tells a browser, a screen reader and a search engine what the content is.

A div with a click handler is not a button: no keyboard focus, no Enter or Space, no announcement. Use the element.

Questions about the Semantic HTML poster

What’s on the Semantic HTML poster?
A 8-row table: Element · For. Each of these tells a browser, a screen reader and a search engine what the content is. <header> / <footer> — Top and bottom of a page or section; <nav> — A block of navigation links; <main> — The primary content — one per page; <article> — Self-contained, redistributable content; <section> — A thematic group, usually with a heading; <aside> — Tangential content; <button> — Anything that performs an action; <a> — Anything that goes somewhere. A div with a click handler is not a button: no keyboard focus, no Enter or Space, no announcement. Use the element.
Who is the Semantic HTML poster for?
Semantic HTML belongs to the Computing section rather than to a school year, because computing is not something one grade owns. Anyone learning the web can pin it up — a beginner, a student mid-course, or someone revising years later.
When should you use the Semantic HTML poster?
Reach for a semantic element first. A div is what you use when nothing else fits. A wall chart earns its place by being glanceable from where the work is happening, so Semantic HTML belongs on the wall where that computing work actually happens, within glancing distance, rather than filed away.
What other posters go with Semantic HTML?
Accessibility, ARIA and How a Browser Renders sit alongside Semantic HTML in the Computing section. Printed together they make a wall rather than a single sheet, which is how a reference set actually gets used.AccessibilityARIAHow a Browser Renders
Is the Semantic HTML poster free to download and print?
Yes. Semantic HTML downloads as a free PDF with no account, no email and no watermark, like everything else in the Computing section. Print as many copies as you like for a home, a classroom, a library or a tutoring group; reselling the file is the only thing the licence rules out.Read the licence
What size does the Semantic HTML poster print at?
Semantic HTML is a vector PDF laid out for US Letter, and prints on A4 with Fit to page — the same file, no separate download. Because every mark on it is drawn rather than photographed, it stays sharp enlarged to A3, A2 or A1 at a copy shop. Colour carries emphasis only, so a greyscale print of Semantic HTML loses nothing.Printing guide

Related posters

Charts that sit alongside Semantic HTML on the same wall.

Browse every Computing poster, or start from the full catalogue.