On this page
HTML reference & cheat sheets
These are the references worth bookmarking. They are maintained by the organisations that write and implement the standards, so they stay correct as HTML evolves.
References
- MDN HTML element reference — every element, with syntax, attributes and browser support. The reference most working developers use daily.
- HTML Living Standard — the specification itself. Dense, but the final word on how an element must behave.
- MDN HTML attribute reference — global and element-specific attributes in one table.
- HTML entity reference — named and numeric character references such as & and .
For a hands-on tour of the elements grouped by job, see our Elements Library.
Validators
Run your markup through a validator before you ship it. Most rendering bugs that look mysterious are a mis-nested or unclosed tag.
Validation services
- W3C Markup Validation Service — paste a URL, a file or raw markup and get the errors with line numbers.
- W3C Nu HTML Checker — the newer checker behind the service above; stricter and more helpful messages.
- W3C CSS Validator — the equivalent check for your stylesheets.
- W3C Link Checker — crawls a page and reports broken links.
Editors & developer tools
Write and inspect
- Visual Studio Code — free editor with HTML autocomplete, Emmet expansion and live preview extensions.
- Chrome DevTools — inspect the live DOM, edit markup in place and see how the browser parsed your HTML.
- Firefox Developer Tools — notably good accessibility and grid inspectors.
- CodePen — share a runnable snippet when you need help with a piece of markup.
- Emmet abbreviations — type
ul>li*5and expand it into real markup. Built into VS Code.
Testing & performance
Measure before you optimise
- PageSpeed Insights — runs Lighthouse against a live URL and reports Core Web Vitals.
- WebPageTest — waterfall charts from real devices and locations.
- Lighthouse — the audit engine, also built into Chrome DevTools.
- Responsively App — preview one page across many viewport sizes at once.
Our responsive testing section covers what to check at each breakpoint.
Accessibility tools
Automated tools catch roughly a third of accessibility problems. Use them as a first pass, then test with a keyboard and a screen reader.
Audit and assistive technology
- axe DevTools — browser extension that reports WCAG violations with the offending element.
- WAVE — overlays accessibility issues directly on the rendered page.
- WebAIM Contrast Checker — confirm text meets the 4.5:1 contrast ratio.
- NVDA — free screen reader for Windows. VoiceOver is built into macOS and iOS.
- WCAG 2.2 Quick Reference — the success criteria in checklist form.
- ARIA Authoring Practices Guide — correct keyboard and ARIA patterns for common widgets.
See our accessibility guide for how to apply these to your own markup.
Browser compatibility
Will it work?
- Can I use — support tables for every HTML, CSS and JavaScript feature, with usage share.
- MDN browser compatibility data — the dataset behind the compatibility tables on MDN.
- Baseline — tells you when a feature is safely available across all major browsers.
Learning paths on this site
If you are not sure where to start, work through these in order.
- HTML Basics — document structure, elements, attributes and text.
- Elements Library — the elements grouped by what they do.
- Forms — inputs, labels, validation and layout.
- HTML5 Features — semantic elements, media, canvas and browser APIs.
- Responsive Design — viewports, media queries and fluid layouts.
- Accessibility — making all of the above usable by everyone.
- Best Practices — the habits that keep a codebase healthy.
Prefer to learn by typing? Head to Interactive Examples.