HTML, CSS & the Browser
Plenty of people publishing a page today did not write it line by line: an AI produced it, a tool exported it, or a colleague handed it over. This category is the vocabulary for reading that page and fixing it. It covers the structure — elements, attributes, the doctype whose absence quietly puts the browser into quirks mode, the head section where the title and meta tags live — and the styling, from selectors and specificity to flexbox, grid, media queries and the custom properties that make a dark mode a few lines rather than a rewrite. The last part is diagnosis: what the console is telling you, what the Elements panel shows that view-source does not, and why a render-blocking stylesheet or an image without dimensions makes a page feel worse than it is.
34 terms in this category
Async Attribute
The async attribute lets a script download in the background and run the moment it is ready, without waiting for the rest of the HTML. It does not block parsing, and it does not keep order either.
Breakpoint
A breakpoint is the viewport width at which a layout changes — the number you put in a media query. The query is the mechanism; the breakpoint is the decision about where the design stops working and needs rearranging.
Browser Compatibility
Browser compatibility is whether a page behaves the same in every browser and version your visitors actually use. Most modern features work everywhere; the trouble comes from the few that do not, and from old versions.
Console Error
A console error is a message the browser writes when something on the page fails — a script throwing, a file that would not load, a request the browser refused. It is the first place to look when a page misbehaves.
Critical CSS
Critical CSS is the small part of your stylesheet needed to draw the top of the page correctly. Inlining it in the head lets the browser paint before the full stylesheet has arrived.
CSS Class
A CSS class is a label put on one or more HTML elements through the class attribute, so a stylesheet can style them together. In CSS the same name is written with a leading dot, as in .card.
CSS Grid
CSS Grid is the layout mode for arranging items in two dimensions at once — rows and columns together. You turn it on with display: grid on the parent and define the tracks with grid-template-columns and grid-template-rows.
CSS Selector
A CSS selector is the part of a rule before the braces that says which elements the rule applies to. It can match by tag name, class, id, attribute, position in the document or state, and selectors can be combined to be as narrow as you need.
CSS Specificity
Specificity is how the browser decides which rule wins when two of them set the same property on the same element. Each selector scores a weight, the higher weight wins, and only an exact tie is settled by which rule comes later in the stylesheet.
CSS Variable
A CSS variable, properly called a custom property, is a named value declared in a stylesheet and reused wherever it is needed. You write it as --brand-blue: #1d4ed8 and read it back with var(--brand-blue).
Cumulative Layout Shift
Cumulative Layout Shift measures how much the content of a page moves about while it is loading. A good score is 0.1 or below; anything above 0.25 counts as poor.
Dark Mode
Dark mode is a light-on-dark version of a page, shown to visitors whose operating system is set to a dark appearance. In CSS it is detected with the prefers-color-scheme media query, and with custom properties it is usually a handful of lines rather than a second stylesheet.
Defer Attribute
The defer attribute on a script tag tells the browser to download the file while it carries on parsing the HTML, and to run it only once the whole document has been parsed. Deferred scripts run in the order they appear.
Developer Tools
Developer tools are the inspection panels built into every desktop browser, opened with F12 or by right-clicking and choosing Inspect. They show the live page, its scripts, its network requests and its errors.
Doctype
The doctype is the single line <!DOCTYPE html> at the very top of an HTML file. It tells the browser to render the page by modern standards instead of falling back to quirks mode, where old layout bugs are deliberately reproduced.
DOM Element
A DOM element is a single node in the live tree the browser builds from your HTML — one heading, one button, one image — that JavaScript can read, change or remove while the page is open.
Event Listener
An event listener is a function attached to an element so that it runs when something happens to it — a click, a keypress, a form submit. It is how a static page becomes interactive.
Fetch API
The Fetch API is the browser's built-in way for JavaScript to request something over the network without reloading the page. You call fetch with a URL and get back a promise that settles into a response.
Flexbox
Flexbox is the CSS layout mode for arranging items along a single axis — a row or a column — and distributing the space left over. You switch it on with display: flex on the parent, and the children become flex items.
Form Element
A form element is the HTML form tag and the controls inside it. It collects what somebody types and, on submit, either sends it to a URL or hands it to JavaScript.
Form Validation
Form validation is checking that what somebody typed is usable before it is accepted — a required field filled in, an email address shaped like one, a number in range. The browser does a good deal of it for free.
Graceful Degradation
Graceful degradation means a page built for modern browsers still does its job in an older one, with the clever parts simply absent rather than broken. Less capable, not unusable.
Head Section
The head section is the part of an HTML file between <head> and </head>. Nothing in it is drawn on the page; it holds the title, the character encoding, the viewport setting, stylesheet links, scripts and the meta tags search engines and social networks read.
HTML Attribute
An HTML attribute is a name and value written inside a start tag that configures the element — where an image lives, which stylesheet rule applies, what a link points at. Attributes change behaviour and appearance without changing what the element is.
HTML Element
An HTML element is a single named piece of a page — a heading, a paragraph, an image — written as a start tag, its content and an end tag. Elements nest inside one another to form the structure the browser draws.
Inline Style
An inline style is CSS written directly on one element through the style attribute, as in style="color: red; margin-top: 8px". It applies to that element only and outranks almost anything a stylesheet says.
Media Query
A media query is a block of CSS that only applies when a condition about the device is true — most often a minimum or maximum viewport width. It is the mechanism behind responsive design, written as @media followed by the condition and a set of rules in braces.
Polyfill
A polyfill is a piece of JavaScript that implements a feature a browser is missing, so code written for the modern feature runs there anyway. It fills the gap rather than routing around it.
Progressive Enhancement
Progressive enhancement means building a page that works with HTML alone, then adding CSS and JavaScript on top. Each layer improves it; none of them is needed for the content to be readable.
Render-Blocking Resource
A render-blocking resource is a file the browser has to download and process before it can show anything at all. Stylesheets and ordinary script tags in the head block; almost nothing else does.
Stylesheet
A stylesheet is the set of CSS rules that tells the browser how a page should look. It is usually a separate .css file linked from the head, though it can also sit in a style element inside the HTML itself.
The DOM
The DOM, short for Document Object Model, is the live tree of objects the browser builds from an HTML file. It is what CSS styles and what JavaScript reads and changes — and after a script has run it can differ from the source you wrote.
View Source
View source shows the raw HTML the server sent for a page, before any JavaScript has run. On a client-rendered page that can be almost empty even though the page in front of you looks full.
Viewport Units
Viewport units are CSS lengths measured as a percentage of the browser window: 1vw is one per cent of its width and 1vh one per cent of its height. They are how a section is made exactly as tall as the screen, and they behave awkwardly on mobile unless you use the newer dvh, svh and lvh variants.