All HTML guides

Cut any element into a triangle, circle or custom polygon with CSS clip-path. Drag points in a live editor, copy the value, and fix shadows and jumpy animations.

How the HTML label tag works: for and id or wrapping, bigger checkbox click targets, screen reader names, layouts, custom toggles, and why a label is not working.

How the JavaScript FormData object reads a form: get vs getAll, append and set, checkboxes, files, converting to JSON, and why console.log shows it empty.

How the HTML ol tag numbers a list: type, start, reversed and li value, list-style-type in CSS, and CSS counters for number badges and 1.1 / 1.2 outlines.

How the HTML img tag works: src and alt, width and height to stop the page jumping, loading="lazy", the gap under images, and a fallback for broken files.

How to mark up a quote with blockquote, q and cite, where to put the source, and how to replace the default indent with a bar, a big quote mark or a card.

What HTML entities are, the few characters you must escape, when UTF-8 lets you type the rest, how   really works, and a symbol list you can search and copy.

What belongs in the HTML head tag, the order that avoids garbled text and late styles, head vs header, and a complete head template to copy. With live examples.

What the HTML main tag is for, the one-per-page rule, where it may not go, main vs div and section, a skip link target and a sticky footer layout. Live examples.

When to use the br tag in HTML, when p and margin are the better fit, how to show typed line breaks with white-space: pre-line, and where wbr helps long URLs.

How the HTML figure tag and figcaption work: caption position, the default side margins, caption vs alt, and numbered figures with CSS counters. Live examples.

How CSS text-transform works: uppercase, lowercase, capitalize and none, why capitalize is not title case, lang and Turkish i, and small caps. Live examples.

vertical-align only works on inline boxes and table cells, not on a div. Live examples of every value, the image gap fix, and how to center anything vertically.

text-align lines up the text, images and buttons inside a block, not the block itself. Live examples of center, justify and start/end, plus centering fixes.

Align flex items along the main axis or grid tracks along the inline axis. Try six common values and diagnose missing space, growth and auto margins.

How CSS aspect-ratio sizes any box: 16:9 video frames, square tiles, 4:3 cards. Live examples, the padding hack it replaces, and fixes when it does not work.

An HTML comment is <!-- text -->. Write one-line and multi-line comments, avoid the nesting trap, use the editor shortcut, and comment inside CSS and JavaScript.

What the HTML aside tag is for, how it differs from section and div, and how to build a sidebar that drops below on phones and one that stays sticky. Live examples.

The strong tag marks important text, b only draws the eye, and both look bold. Live examples of strong vs b, font-weight 100 to 900, and why 600 can look like 700.

Build an HTML range slider: show its value as it moves, style the track and thumb with CSS, fill the track, add ticks, and make a two-thumb price filter.

How the HTML abbr tag marks abbreviations, why its title tooltip misses phone and keyboard users, and how to style it and add a popup that works for everyone.

Use <sup> and <sub> for exponents, chemical formulas, ordinals and footnotes. Live examples, the CSS that stops uneven line spacing, and linked footnotes.

Use <code> for inline code and <pre><code> for code blocks. Live examples for whitespace, long lines and tab-size, plus a block with line numbers and a copy button.

The em tag marks stress that changes what a sentence means. Live examples of em vs i vs cite, true and fake italics, and styling emphasis without italics.

What each font-size unit measures from, why em shrinks nested lists, why rem follows the reader's text setting, and fluid type with clamp(). Live examples.

How addEventListener works: vs onclick, target vs currentTarget, bubbling and capture, once, passive and signal, and why removeEventListener seems not to work.

How the HTML meter tag shows a level in a known range, why its colour changes with low, high and optimum, meter vs progress, and how to style it. Live examples.

How CSS border-radius works: one to four values, the slash syntax for oval corners, circles, pills, nested corners, clipping children, and blob shapes. Live demos.

What CSS float is for, with live examples: wrap text around an image, clear: both, fix a parent with zero height, and wrap text around a circle with shape-outside.

The mark tag highlights text that matters right now, such as search matches. Live examples of styling it, mark vs strong vs span, and a safe search-in-page box.

Build a hamburger menu with a real button, a CSS icon that turns into an X, a drop-down or drawer, and closing on Escape, link click and outside click.

How to center a div horizontally and vertically: flex, grid, margin auto, text-align and absolute positioning, tried live, plus why centering is not working.

How setTimeout and setInterval work, how to stop them with clearInterval, why timers drift, and how to debounce input. Live examples to try and code to copy.

What thead, tbody and tfoot do, why the browser adds a tbody you never wrote, how to group rows with several tbody elements, and a live table with totals.

Give a table a real title with <caption>, move it with caption-side, and style whole columns with <colgroup> and <col>. Live demos show which CSS works on col.

What the td, th and tr tags do, how th differs from td, when to add scope, and how to pad and align cells. Live examples to try, code to copy, and fixes.

How the HTML dl, dt and dd tags work: several dd per dt, div groups, the default indent, a two-column CSS grid, and when to use dl instead of a table or ul.

Use the HTML ruby tag with rt and rp to put small readings above text: furigana for kanji, pinyin for Chinese. Live examples, CSS for rt, and fixes.

The HTML <template> tag holds markup that stays hidden until you clone template.content. Live examples for repeating rows, slots and a small custom element.

The HTML style tag puts CSS inside the page. Where it goes, why order and specificity decide the winner, the media attribute, and swapping themes with JavaScript.

Build a toggle switch in HTML and CSS on a real checkbox: track, knob, keyboard focus, disabled state, sizes, iOS look, a button version, and fixes when it breaks.

Open menus and panels with the HTML popover attribute and a button, no JavaScript needed. Auto vs manual, styling, positioning and popover vs dialog, live.

Make any element fullscreen with one JavaScript call: a fullscreen button, exit detection, :fullscreen styling, iframe permission, and fixes when it is refused.

Make a file in the browser with new Blob(), give it a blob: URL with createObjectURL, and use it for downloads and previews. Live examples, code, and fixes.

How element.classList adds, removes, toggles and checks CSS classes, why className = wipes the others, and how class toggles drive tabs, accordions and transitions.

Cut long text with "..." in CSS: the three properties for one line, line-clamp for several lines, and fixes for when the ellipsis will not show in flexbox or tables.

align-items places flex and grid items across the main axis. Try stretch, center and baseline live, compare it with align-content, and fix it when nothing moves.

How text-shadow works value by value, with a live generator, glow, neon, outline and letterpress examples to copy, and a fix for hard-to-read text over images.

Style scrollbars with scrollbar-color, scrollbar-width and ::-webkit-scrollbar. Which one the browser uses, how to hide a bar safely, and scrollbar-gutter.

A CSS loading spinner from one div and a keyframe: ring, dots, bars, pulse and skeletons, sized in em, read by screen readers, and shown only after a delay.

flex-wrap lets flex items move onto a new line instead of shrinking or overflowing. Try it live, set how many fit per row with gap, and fix a stretched last row.

Every value grid-template-columns accepts, with a live builder that shows the column sizes in px. fr math, minmax(0, 1fr), auto-fill vs auto-fit, rows and areas.

How the HTML checkbox works: checked attribute vs .checked, what a form sends, select all with indeterminate, accent-color and custom CSS boxes, with live demos.

How HTML radio buttons work: grouping by name, the default checked one, reading the value in JavaScript, keyboard use, and card-style radios in CSS. Live examples.

pointer-events: none lets clicks, taps and hover go to whatever is underneath. Live examples, the child-with-auto trick, SVG values, and what it does not block.

Set letter-spacing and word-spacing in CSS, and why em beats px. Live sliders, the off-centre button fix, ligatures, and a WCAG text spacing test to try.

Build a star rating from radio buttons: CSS-only hover, half stars, a read-only 4.3 display with partial fill, and an average screen readers can read. Live code.

The CSS box model with live demos: how width adds padding and border, why vertical margins collapse, and how to read box sizes in DevTools and JavaScript.

How flex-grow shares free space, how flex-shrink removes overflow, and what flex: 1, flex: auto and flex: none really mean. Live calculator, layouts and fixes.

What each CSS overflow value does, why overflow-x: hidden turns y into auto, hidden vs clip for sticky, and how to find what scrolls a phone page sideways.