All HTML guides

How the HTML p tag really works: why a div or list inside a paragraph splits it, when the closing tag is optional, and how to space and size readable paragraphs.

How to style the body element: remove the default 8px margin, why the body background fills the window, 100% vs 100dvh, theme classes and modal scroll lock.

Every way to write colors in HTML and CSS: names, 3 to 8 digit hex, rgb(), hsl(), oklch(), transparency and currentColor, plus a live contrast ratio calculator.

isolation: isolate makes an element a stacking context and changes nothing else. Stop z-index leaks, contain mix-blend-mode, and find contexts with a live inspector.

What text-rendering, font-kerning, -webkit-font-smoothing and font-size-adjust really change, measured in Chromium. Live tests for your own fonts, plus the code.

Set how wide a tab is with the CSS tab-size property. Live examples for pre and textarea, tabs vs spaces, white-space, and a code viewer with a tab width picker.

How the SVG circle and ellipse work: cx, cy, r, rx and ry as attributes and CSS properties, animating cx with a transition, rounded rect corners and a drag editor.

How SVG text works: x and y, text-anchor, dominant-baseline for vertical centring, tspan line breaks, textPath on a curve, and labels screen readers can read.

What forced colors mode does to your CSS, and the fixes: @media (forced-colors: active), system colours like Canvas and Highlight, forced-color-adjust, testing.

Build a heart like button from a real button with aria-pressed, an SVG heart and a count. Add a pop animation, reduced motion and an optimistic update.

Add keyboard shortcuts with JavaScript keydown: e.key vs e.code, Mac Cmd vs Ctrl, skipping text fields, preventDefault, a Ctrl+K command palette and a help dialog.

Four hover effects in plain CSS: a lifting button, a growing underline, an image zoom and a sliding caption. Live examples, keyboard focus and touch screens covered.

How the JavaScript wheel event works: deltaY and deltaMode, why preventDefault is ignored, trackpad pinch as ctrlKey, sideways scroll and canvas zoom.

What element.textContent reads and sets, how it differs from innerText with hidden text and line breaks, why it is faster, and how to put user text on a page safely.

Build a CSS-only carousel with ::scroll-marker, ::scroll-button, scroll-target-group and scroll-initial-target. Live demos, tested engines and a script fallback.

Close the gaps around Japanese and Chinese brackets and commas with text-spacing-trim, and add space next to Latin text with text-autospace. Live demos included.

Change the colors inside a color font with font-palette and @font-palette-values. Live examples on the Segoe UI Emoji font, measured browser results, and fixes.

Use CSS object-view-box with inset() to crop and zoom an image or video on the element itself, animate the zoom, and add a fallback for browsers that ignore it.

box-decoration-break: clone gives every wrapped line its own padding, corners and shadow. Live examples, the -webkit- prefix rule, and boxes split across columns.

How scroll anchoring keeps your place when content loads above, when overflow-anchor: none is the right call, and how to keep a chat log stuck to the bottom.

reading-flow makes keyboard Tab follow the visual order of a grid or flex layout moved with order or grid placement. Live examples, all values, a safe fallback.

What shape-rendering, vector-effect, color-interpolation, color-rendering and buffered-rendering change on screen, measured in Chromium, Firefox and WebKit.

Reveal elements on scroll with IntersectionObserver and a CSS transition. Live examples for fade, slide and zoom, stagger, once or repeat, and reduced motion.

Clickable map markers on an SVG map or floor plan with plain HTML, CSS and JavaScript: percent positions, popups, grouping and keyboard access. Live examples.

Build 3D in the browser with plain CSS: a cube from six divs, drag to rotate, a product box viewer with preset views, and when to switch to WebGL. Live code.

Match URLs with URLPattern in JavaScript: named groups, wildcards, optional parts, a tiny router in one file and a RegExp fallback. Live examples you can edit.

Use Chrome DevTools on your own HTML page: inspect an element, edit CSS live, read console errors, spot 404s and test phone widths. Three broken pages to fix.

Measure an HTML page yourself: performance.now, marks and measures, long tasks, layout thrashing and image sizes, with live examples and a panel you can copy.

The toggle event fires when a details element or a popover opens or closes. Live examples of toggle, beforetoggle, newState and oldState, and a one-open accordion.

Lock the page behind a drawer or modal so clicks, Tab and focus cannot reach it. The inert attribute, the new CSS interactivity: inert, and measured support.

Make a div resizable with the CSS resize property and one overflow line. Live demos of every value, min and max limits, a resizable sidebar, and fixes.

Use WebGPU in a plain HTML page: get a device, write a WGSL shader, draw a triangle, animate it with a uniform buffer and run a compute shader. Live examples.

CSS border-shape draws a border along a circle, polygon or shape() path, and the shadow follows. Live examples, stroke vs fill mode, browser support and a fallback.

Hide an element when it is clicked: the one line of JavaScript, the CSS rule it needs, display vs visibility vs opacity, a no-JS option and a fade-out.

Replace mouse and touch listeners with pointer events: one handler for a mouse, a pen and every finger. pointerType, capture and smoother lines, with live demos.

The CSS speak property switches speech on or off per element. See which browsers parse it, test it live, and hide text from screen readers the way that works.

empty-cells: hide removes the border and background of empty table cells. Live examples, what counts as empty, and why it needs border-collapse: separate.

CSS app-region: drag turns part of an installed web app's title bar into a handle that moves the window. Live examples, no-drag for buttons, and support.

Use the CSS dynamic-range-limit property to cap how bright HDR images and video get. Live examples, the four values, browser support and a gallery pattern.

How the CSS baseline-shift property raises or lowers part of SVG text: sub, super and lengths, why HTML ignores it, the dy trap, and browser support.

overflow-block is overflow-y that follows writing-mode: it scrolls down in horizontal text and sideways in vertical text. Live demos, the media feature, and support.

How CSS overflow-clip-margin moves the edge where overflow: clip cuts content, with live demos, the box keywords, browser support and a Safari fallback.

hyphenate-limit-chars sets how long a word must be before it is hyphenated, and how many letters stay on each side of the hyphen. Live demos, value rules, support.

How font-language-override makes a font use the letter forms of another language: the OpenType tag value, how it differs from lang, traps, and browser support.

baseline-source picks which line of a multi-line inline-block or inline-flex box sits on the text line. Live examples, the three values, and a fallback for Safari.

shape-image-threshold sets how opaque a pixel must be to join a shape-outside image shape. Live gradient examples, clamping, percentages and browser support.

shape-margin keeps wrapped text an even distance from a shape-outside curve. Live examples, why the gap stops at the float's edge, and how it differs from margin.

overflow-inline decides what happens when a line is longer than its box: clip it or scroll along it. Live demos, vertical text, the fallback and browser support.

Build an Outlook email template as one HTML file: a live table-based example, what classic Outlook's Word engine skips, where Outlook stores templates, and fixes.

Svelte is a compiler, so there is no one-line script tag. Run a Svelte 5 component in one HTML file with the in-browser compiler, plus fixes and sharing.

Add jQuery to a single HTML file with one script tag, then click, toggle and add items. A live example to edit, the common mistakes, and how to share it as a link.

Use Mermaid in a plain HTML file: one module script turns diagram text into SVG. Live examples, the smallest working page, and fixes for the usual errors.

Run Angular from one HTML file with no install: live examples, the four parts every page needs, the errors that leave it stuck on Loading, and how to share it.

Browsers run JavaScript, not TypeScript. Compile it inside a single HTML file with the official compiler from a CDN. Live examples, common errors and sharing.

SvelteKit 3 is still a prerelease, and SvelteKit needs a build either way. What does run in one HTML file: Svelte compiled in the browser, live examples included.

Streamlit apps need a running Python server. Two ways to get one HTML file instead, live examples of a Streamlit-style app in plain JavaScript, and fixes.

How Next.js turns your pages into HTML, how to export static HTML files, and how to rebuild a small Next.js page as one HTML file you can open, edit and share.

Build a web component in a single HTML file with customElements.define and Shadow DOM. Live examples, a Lit version from a CDN, and fixes for the usual errors.

Make a Leaflet map in a single HTML file: one CSS link, one script tag and a div with a height. Live examples, common mistakes, and sharing it as a link.

htmx adds requests and page updates to HTML through attributes. A working single-file example with no server, the common mistakes, and how to share it as a link.