Tutorial
-
Input types and built-in validation
Email, number, date, url and other input types, plus required, min, max and pattern for browser validation.
-
Image loading: formats, lazy loading and fetchpriority
Choose between AVIF, WebP, JPEG, PNG and SVG, and control loading with loading, decoding and fetchpriority.
-
Audio and video with captions
Embed audio and video with native controls, multiple sources, and captions with the track element.
-
What is HTML? How web pages are built
What HTML is, how browsers turn it into a page, and how it works with CSS and JavaScript.
-
Complex tables: caption, scope and spanning cells
Make larger tables understandable with caption, thead, tbody, scope, colspan and rowspan.
-
Your first HTML page
Create an HTML file in a code editor, open it in a browser, and use DevTools to inspect it.
-
Form controls in depth: select, textarea, checkboxes, radios and fieldset
Every common form control, grouping with fieldset and legend, and default values.
-
HTML elements, tags and attributes
How elements, opening and closing tags, void elements and attributes work, with the nesting rules that prevent bugs.
-
Better forms with autocomplete, inputmode and enterkeyhint
Help browsers fill in forms and show the right mobile keyboard with autocomplete, inputmode and enterkeyhint.
-
HTML document structure: doctype, html, head and body
The skeleton every HTML page needs, what each part does, and the lang attribute.
-
Native interactive elements: details, summary and dialog
Build disclosures and modal dialogs with no JavaScript framework, and their built-in accessibility.
-
The head element: title, charset, meta and viewport
What belongs in the head: title, character set, viewport, description, and links to CSS and icons.
-
The popover attribute
Show menus, tooltips and pickers with the popover attribute and popovertarget, without JavaScript.
-
CSS syntax: rules, selectors, properties and values
How a CSS rule is built, comments, and reading errors in DevTools.
-
Flexbox or Grid? Choosing the right layout tool
A practical comparison with examples of components and pages that suit each, and how they combine.
-
Type, class and ID selectors
Target elements by type, class and ID, group selectors, and why classes are usually the right choice.
-
Positioning: relative, absolute, fixed and sticky
How each position value works, containing blocks, and sticky headers and sidebars.
-
The cascade, specificity and inheritance
How browsers decide which rule wins, calculating specificity, inherited properties, and why to avoid !important.
-
Stacking context and z-index
Why z-index sometimes does nothing: stacking contexts, what creates them, and how to debug layering.
-
Colours in CSS: hex, rgb, hsl and oklch
Every way to write colour in CSS, transparency, and why oklch gives more predictable palettes.