Foundations7 min read
How to Write Semantic HTML That Stays Useful
Choose elements for their meaning, build a clear document outline, and make your page easier to navigate, edit, and reuse.
Read guidePractical how-tos for the parts of HTML that determine whether a page remains useful: structure, accessibility, performance, publishing, and review.
A better default for every page
Start here
Choose elements for their meaning, build a clear document outline, and make your page easier to navigate, edit, and reuse.
Read guideConnect every field to a label, group related controls, explain errors clearly, and make the full flow work from a keyboard.
Read guideUse width, height, srcset, sizes, picture, and loading hints to deliver sharp images without wasting bandwidth.
Read guideCheck structure, claims, accessibility, responsiveness, safety, and metadata with a repeatable human review pass.
Read guideAll guides
Browse the complete library, or jump to a topic using the section labels below.
Begin with a small, valid document shell that supports accessibility, responsive design, metadata, and progressive enhancement.
Read guideKeep selectors shallow, components readable, and design tokens explicit so a page remains easy to revise after launch.
Read guideRespect system preferences, preserve contrast, and keep native controls and embedded content legible in both themes.
Read guideShip a useful document first, then add styling and interaction without making the core task depend on them.
Read guideTurn a visual page into a dependable outline that helps readers scan, navigate, and understand the content.
Read guideUse captions, headers, scope, and responsive wrappers so dense data keeps its meaning on every screen.
Read guideUse links for navigation and buttons for actions, then write labels that make the result clear before someone clicks.
Read guideGive charts, filters, statuses, and data tables a clear reading order and useful text equivalents.
Read guideReduce render-blocking work, prioritize the first viewport, and ship a smaller page before reaching for complex tooling.
Read guideCreate useful titles, descriptions, canonical URLs, and social cards without treating metadata as a bag of keywords.
Read guideUse JSON-LD to describe articles, organizations, products, and breadcrumbs without making claims the visible page cannot support.
Read guideAdd print styles that preserve the document hierarchy, avoid awkward page breaks, and remove interface-only controls.
Read guideTreat imported markup as code, define an allowlist, isolate rendering, and avoid trusting a sanitized string forever.
Read guideCreate a fast, accessible page with one audience, one promise, and one primary action.
Read guideCombine conformance checks, keyboard testing, responsive review, performance measurement, and content verification.
Read guideBundle the right assets, avoid fragile dependencies, and keep a standalone page understandable when it moves.
Read guideDefine an editing model, preserve selection, normalize pasted markup, and separate transient DOM state from saved content.
Read guideUnderstand style boundaries, event behavior, focus, and the tradeoffs of rendering third-party HTML inside a shadow root.
Read guidePackage the page, explain what is editable, collect precise feedback, and keep one current version through approval.
Read guideSet a review goal, collect anchored comments, resolve conflicts, and publish a clear final version.
Read guide