All HTML guides

The HTML noscript tag shows its content only when JavaScript is turned off, not when a script fails. Live examples, head vs body rules and mistakes to avoid.

white-space: nowrap keeps text on one line. See nowrap, pre, pre-wrap, pre-line and break-spaces side by side, plus text-wrap balance and pretty.

Keep the footer at the bottom of short pages with flexbox or grid and min-height: 100dvh. Live examples, plus why position fixed and sticky differ.

Build a sidebar in HTML with aside and CSS grid, make it sticky, turn it into a drawer on phones and collapse it to icons. Live examples and code to copy.

Build a stopwatch in HTML and JavaScript with performance.now(), pause and resume, lap times and digits that do not jitter. Live examples to try and code to copy.

Build a flip card in HTML and CSS with perspective, preserve-3d and backface-visibility. Hover or click to flip, keyboard support, and cards that fit their text.

CSS scroll snap in plain words: scroll-snap-type, scroll-snap-align, scroll-snap-stop and scroll-padding. Live examples to try, and fixes when nothing snaps.

How CSS transition works: property, duration, delay, ease, cubic-bezier and steps, allow-discrete for display: none, and the transitionend event.

How CSS transform-origin picks the point an element rotates and scales around: keywords, percentages, px, the 3D z value and transform-box for SVG. Live demos.

Read ?q=... from the address, build a query string from a form, and update the address bar without a reload. get, getAll, set, append and encoding, live.

How stroke-dasharray and stroke-dashoffset cut an SVG stroke into dashes, draw a line on screen and fill a progress ring. Live examples, code and fixes.

Make a dot follow a curve with CSS offset-path and offset-distance: path(), ray(), circle(), offset-rotate and offset-anchor, with live examples to copy.

Style SVG shapes from CSS with fill and stroke, cut holes with fill-rule evenodd, fade them without a dark band, and outline text with paint-order. Live examples.

Wrap a DOM change in document.startViewTransition() and style it with view-transition-name and ::view-transition-old/new. Live examples, fallback and reduced motion.

Run a CSS animation on scroll instead of time: animation-timeline with scroll() and view(), named timelines, timeline-scope and animation-range, plus a fallback.

What each touch-action value lets the browser do, why a finger drag scrolls the page, and how overscroll-behavior stops scroll chaining and pull-to-refresh.

Change the blinking text cursor colour with caret-color, try the block and underscore shapes of caret-shape, and build a terminal-style caret. Live examples.

What appearance: none removes on each form control, why checkboxes vanish, and the states you must redraw. Live examples to toggle, test and copy.

The CSS color-scheme property tells the browser which schemes a page supports, so inputs, scrollbars and default colours go dark. Live examples and light-dark().

Change list bullets and numbers with list-style-type: every value, custom strings and emoji, list-style-image, inside or outside, ::marker and @counter-style.

Why a flex or grid item refuses to shrink and pushes things off screen, and how min-width: 0, minmax(0, 1fr) and clamp() fix it. Live demos you can edit.

How CSS grid-auto-flow places items: row, column and dense, how grid-auto-rows and grid-auto-columns size the tracks the browser adds, and a masonry-style gallery.

Why icons, avatars and buttons get squashed in a flex row, how flex-shrink: 0 stops it, and how the browser decides who shrinks most. Live demos and fixes.

justify-self moves one grid item left, center or right inside its cell. Try it live with justify-items and place-self, and see why flexbox ignores it.

hyphens: auto splits long words at syllables, but only when the page sets a language. Try none, manual and auto live, plus ­, hyphenate-character and justify.

Indent the first line of a paragraph with CSS text-indent, make a hanging indent for reference lists, and add a drop cap with ::first-letter. Live demos and code.

Read a picked file in the browser with FileReader: readAsText, readAsDataURL and readAsArrayBuffer, onload and onerror, file.text(), image previews and CSV tables.

Format numbers in JavaScript with Intl.NumberFormat: currency, percent, units, 1.2K compact notation, decimal places, formatToParts, and a live price formatter.

Run heavy JavaScript in a Web Worker so the page never freezes. One-file setup with a Blob URL, postMessage, progress, cancel with terminate, and transferables.

Make a UUID with crypto.randomUUID(), build short IDs and passwords with crypto.getRandomValues(), and fix the "not a function" error on http pages. Live examples.

Read and set location.hash in JavaScript, react with the hashchange event, and build hash tabs for a one-file page. Live examples, encoding rules and history.

Record a canvas animation to a video file with MediaRecorder and captureStream, no camera needed. Pick a mimeType, collect chunks, download the file, add sound.

Use TextEncoder and TextDecoder to count real UTF-8 bytes, catch broken input with fatal, and Base64-encode Korean or emoji text. Live examples and code to copy.

Make sound with an AudioContext: oscillators, gain envelopes that stop clicks, resume() for autoplay, a playable keyboard synth and an AnalyserNode visualiser.

Build a custom right-click menu with the contextmenu event. Keep it on screen, close it on Escape or a click outside, and open it by keyboard and long press.

Draw a line chart in HTML from an array of numbers with plain SVG and a short script: scales, axes, gridlines, hover tooltip, responsive viewBox, several series.

Build a flowchart in HTML with no library: CSS grid or flex places the boxes, SVG paths draw the arrows from measured positions, and a ResizeObserver redraws them.

WebGL in a plain HTML page: get a context, write a vertex and a fragment shader, fill a buffer, animate with uniforms and add a texture. Live examples and fixes.

What the W3C Nu HTML validator checks, the errors it finds most often, and how browsers quietly repair them. Live demos show the repaired tree and a small checker.

Write formulas in HTML with the <math> tag: mi, mn, mo, fractions, powers, subscripts and square roots. Live examples, a tested browser table and accessibility tips.

Read what a user typed or picked: .value, valueAsNumber, valueAsDate, checked, selects, radio groups and FormData. Live examples, a working calculator and fixes.

How CSS content-visibility skips off-screen rendering, why it needs contain-intrinsic-size, and what auto and hidden do to Ctrl+F, focus and screen readers.

Put a border on one side with border-left, border-top, border-bottom or border-right. Accent bars, underlines, logical sides for RTL, and triangles, with live code.

How CSS border-image cuts a picture into nine pieces and draws it as a border. Live examples for slice, fill, width, outset and all four repeat modes.

What margin-left: auto does in a flex row, how margin: 0 auto centres a block, margin-top: auto in a column, collapsing margins and negative margins, tried live.

What CSS bottom, top, left and right measure from, how the inset shorthand works, and how inset: 0 stretches a box. Live examples, a pinned card footer and fixes.

How CSS object-position places an image inside its box: keywords, percentages, edge offsets, focal points for avatars and banners, and animating it. Live demos.

Put sesame dots or circles over or under text with CSS text-emphasis. Set the shape, color and side, and fit numbers in vertical text. Live examples.

field-sizing: content makes inputs, textareas and selects size to their text. Live examples, min and max limits, a support check and a short JavaScript fallback.

Use text-box-trim and text-box-edge to cut the empty space above capitals and below the baseline, so buttons and headings line up. Live examples, code, fallback.

Make text italic or bold in HTML with a tag or CSS. Live examples of font-style italic and oblique, font-weight numbers, fake italic and bold, and variable weights.

Set wght, wdth, slnt, opsz and custom axes with font-variation-settings, or with font-weight and font-stretch. Live sliders, a system font that works, and fixes.

What the HTML cite tag is for, how it differs from the hidden cite attribute on q and blockquote, and how dfn, abbr and links build a glossary readers can use.

Put arrowheads on SVG lines and paths with the marker element: marker-start, marker-mid, marker-end, orient, markerUnits and context-stroke, with live examples.

Fill SVG shapes, text and strokes with linearGradient and radialGradient. Stop offsets, stop-opacity, gradientUnits, spreadMethod and fixes, with live examples.

Build SVG filters from primitives: feGaussianBlur, feDropShadow, feColorMatrix, feFlood, feComposite and feDiffuseLighting, then apply them to HTML with CSS.

Pinch to zoom an image or map inside a page with pointer events: two fingers, zoom around their midpoint, Ctrl + wheel on desktop and a reset button. Live examples.

Add swipe gestures to HTML with pointer events: follow the finger, decide on distance or speed, tell a swipe from a scroll, and use touch-action: pan-y. Live code.

div is a block box for layout, span is an inline box for a few words. See the layout boxes in a live demo, check for a meaningful tag first, and avoid nesting traps.

What meta charset="utf-8" does, why it must sit in the first 1024 bytes, and how a BOM or the server header overrides it. Live demos decode the same bytes.