HTML

References, guides, and validators for writing modern, semantic HTML. Part of the Frontend Roadmap. See also Accessibility for WCAG and screen readers, and Performance for image formats and loading budgets.

Learn

• MDN Structuring Content — MDN’s HTML learning path, from first element to forms and multimedia. [beginner]
• Learn HTML #1 — Course covering the whole language, one module per topic.
• Responsive Web Design — Interactive HTML and CSS certification from freeCodeCamp. [beginner]
• HTML Dog — Beginner, intermediate, and advanced HTML guides.
• Interneting Is Hard — Friendly HTML and CSS tutorial for absolute beginners. [beginner]
• MarkSheet — Free HTML and CSS tutorials.

Reference

Language reference

• HTML Reference — List of all HTML tags.
• MDN HTML Elements — Every element, with syntax, attributes, and browser support.
• MDN Global Attributes — Attributes that can go on any element.
• HTML Standard — WHATWG living specification, the last word on behaviour. [advanced]
• Can I use — Browser support tables for HTML, CSS, and JS features.

Semantics

• MDN Semantics — What “semantic” means in markup, and why it matters.
• Semantic HTML — Picking the element that describes the content.
• Heading Elements — Levels h1 to h6, document outline, and heading order.
• Page Structure — W3C tutorial on landmarks, regions, and labelling them.
• Article vs Section — When to reach for article, section, or a plain div.
• HTMHell — Bad markup found in the wild, with the fix explained.

Forms

• MDN Web Forms — Full guide to building, styling, and validating forms.
• Learn Forms — Course on form design, controls, and validation.
• Input Element — Every input type and attribute on one page.
• Constraint Validation — Native validation with required, pattern, and friends.
• Autocomplete Attribute — Values that let browsers autofill a field correctly.
• Forms Tutorial — W3C tutorial on labels, grouping, and accessible errors.

Modern elements

• Dialog Element — Native modal and non-modal dialogs.
• Popover API — Declarative popovers, tooltips, and menus without JavaScript.
• Details Element — Built-in disclosure widget and accordion.
• Responsive Images — Explains srcset, sizes, and picture end to end.
• Lazy Loading — Browser-level image loading with loading="lazy".
• Inert Attribute — Takes a subtree out of focus order and the accessibility tree.
• Templates and Slots — The template and slot elements behind web components.

Metadata and SEO

• HTML Head — Checklist of everything that can go in the head.
• Metadata — Head elements, social cards, and theme colour.
• Open Graph Protocol — Spec for the og: tags behind link previews.
• Schema.org — Shared vocabulary for structured data.
• Structured Data — How Google reads schema markup for rich results.

Practice

• HTML Tips and Tricks — “Bad practices” of HTML. [ru]
• HTML Rules — Simple markup rules. [ru]
• HTML Template — Basic SEO HTML template. [ru]
• HTML Academy Style — HTML Academy code style. [ru]
• Email Framework — Build responsive HTML email templates.
• Learn HTML #2 — Interactive exercises with an editor in the browser. [beginner]
• HTML5 Boilerplate — Front-end template to start a real project from.

Tools

• W3C Validator — Markup validation service.
• html-validate — Offline HTML linter for CI and editors.
• HTMLHint — Static analysis tool for HTML.
• Meta Tags — Preview and generate meta and social tags.
• Rich Results Test — Check structured data the way Google sees it.
• RealFaviconGenerator — Generate favicons and the head markup they need.

Deep dives

• BEM — Block Element Modifier naming, which earns its keep in codebases without components.
• HTML Boilerplate — Line-by-line walkthrough of a sane starting document.
• HTMHell Advent Calendar — Yearly series of deep articles on HTML details.
• Content Categories — Rules for which elements may nest inside which. [advanced]
• Priority of Methods for Labeling — Ranked ways to give a control an accessible name.