Glossary · 24 terms

HTML & CSS

Layout, selectors, accessibility and the modern platform.

Beginner · Students and graduates

Flexbox: A one-dimensional layout model: a flex container distributes space between its children along one axis and aligns them on the other. Docs
Margin: The transparent space around an element, outside its border. Vertical margins between blocks can collapse into one. Docs
Padding: The space inside an element, between its content and its border. It takes the element’s background colour. Docs
Selector: A pattern such as .card, #nav or a > b that matches elements in the document so a rule’s declarations apply to them. Docs
Alt text: The alt attribute on an img. Screen readers announce it, and browsers show it when the image fails to load. Decorative images get an empty alt. Docs
Viewport: The part of the document you can currently see. Mobile layouts depend on the viewport meta tag setting its width to the device width. Docs
Semantic: Semantic HTML uses elements for what content is, not how it looks. It gives screen readers and search engines structure for free. Docs
Cascade: The algorithm that resolves conflicting declarations by origin, importance, layers, specificity and finally source order. Docs

Grid: CSS Grid places items into rows and columns at the same time, with tracks sized by fr units, minmax() and auto-placement. Docs
Media query: An @media block that applies CSS when conditions match, such as a minimum width, a dark colour scheme or reduced motion. Docs
Container: Container queries let a component change its layout based on the size of its container, so it adapts wherever it’s placed. Docs
Clamp: clamp(min, preferred, max) returns the preferred value but never goes below min or above max. It’s the usual tool for fluid type. Docs
ARIA: Accessible Rich Internet Applications: attributes like role and aria-expanded that describe widgets to assistive technology. Native HTML comes first. Docs
Dialog: The dialog element. Opened with showModal(), it traps focus, closes on Escape and renders above the page with a ::backdrop. Docs
Popover: The popover attribute turns any element into a light-dismiss layer that a button can toggle with popovertarget, on the top layer. Docs
Nesting: Native CSS nesting lets you place child rules inside a parent rule, using & for the parent selector, much like Sass. Docs

Subgrid: grid-template-columns: subgrid makes a child grid reuse the parent’s column or row lines, so content in separate cards aligns. Docs
Has: :has() matches an element if it contains something matching the argument, e.g. form:has(:invalid). It can select based on descendants or siblings. Docs
Layer: @layer defines cascade layers. Later layers win over earlier ones regardless of selector specificity, which keeps resets and libraries in check. Docs
Scope: @scope applies rules only inside a root element and can stop at a lower boundary, so component styles don’t leak. Docs
Anchor: Anchor positioning lets an element position and size itself relative to a named anchor element, with fallbacks when it would overflow. Docs
Reflow: Also called layout. Changing geometry, or reading it right after a change, forces the browser to recompute layout, which can cause jank. Docs
Stacking: A stacking context groups elements for z-index. Properties like opacity, transform and position with z-index create new ones. Docs
LCP: Largest Contentful Paint: the time until the largest image or text block in the viewport is rendered. Under 2.5 seconds is good. Docs