Glossary

131 terms from HTML & CSS Basics, in plain words, each with the chapter that teaches it.

Search the glossary

#

!important: A flag added to a CSS declaration, such as `color: red !important;`, that makes it beat normal declarations in the cascade. It is best avoided, because it makes later style changes painful to override.

A

Absolute URL: A full web address that starts with `https://`, used to link to other websites, such as `https://www.usps.com`.
Alpha: An optional fourth value in a color, such as `rgb(0 0 0 / 50%)`, that sets how see-through the color is. Lower values let the background show through.
Alt text: A short description of an image, written in the `alt` attribute. Screen readers read it aloud and browsers show it if the picture fails to load.
Attribute: Extra information inside a start tag, written as `name="value"`, such as `lang="en"` on `html` or `src` on `img`.

B

Block element: An element such as `p`, `h1` or `div` that starts on a new line and stretches across the full available width.
Boolean attribute: An attribute that needs no value because its presence switches it on, such as `required`, `checked` or `reversed`.
border-collapse: A CSS property that, with the value `collapse`, makes neighboring table cells share one border instead of each drawing its own with gaps between. It is how the Kettle & Crane price table gets clean lines.
border-radius: A CSS property that rounds the corners of an element's box. `8px` gives gentle corners, and a huge value such as `999px` makes a button's ends fully round.
Box model: The way the browser treats every element as a rectangle made of four layers: content, padding, border and margin.
box-sizing: A CSS property that decides what `width` measures. With `border-box`, the width includes padding and border, so a 300 px card really measures 300 px.
Branch: One line of a repository's history on GitHub. `main` is the default branch that GitHub Pages publishes from.
Browser: The program, such as Chrome, Firefox, Safari or Edge, that requests web pages from servers and renders them on your screen.

C

Cache: The copies of files your browser keeps after downloading them. It can show you an old version of Kettle & Crane's site until you refresh while holding Shift.
Cascade: The fixed order of tie-breakers the browser uses when several CSS rules set the same property: origin and importance first, then specificity, then which rule comes last.
Character reference: A code written as `&`, a name and `;`, such as `&` for `&` or `©` for ©, used to show characters that mean something to HTML or have no key.
Checkbox: A form control made with `input type="checkbox"` for one yes/no choice. Its value is sent only when the box is checked.
Child: An element directly inside another element, called its parent. For example, `strong` is a child of the `p` it sits in.
Class: A label you invent and add with the `class` attribute so CSS can style matching elements together. It is selected with a dot, as in `.price`.
Code editor: A program for writing plain text files of code. It colors the code to make it easier to read and helps you type it, unlike a word processor, which adds hidden formatting browsers can't read.
colspan: A table cell attribute that makes one cell stretch across several columns (`colspan`) or rows (`rowspan`). A stretched cell counts as that many cells.
Comment: A note for people that the browser ignores. In HTML it goes between ``, in CSS between `/*` and `*/`.
Commit: A saved set of changes in a repository's history, such as the files Alex uploads to GitHub for Kettle & Crane.
Computed tab: The DevTools tab that shows each property's final value after the cascade and inheritance, such as `18px` when you wrote `1.125rem`, plus the box model in pixels.
Console: The DevTools tab that lists the browser's messages and errors, including files that failed to load, such as a missing `mug.jpg`.
Contrast: The difference in lightness between text and its background, measured as a ratio from 1:1 to 21:1. Normal text should reach at least 4.5:1 to be easy to read.
Control: A part of a form that people fill in or click, such as a text box, checkbox, menu or button.
CSS: The language that controls how a page looks: colors, fonts, spacing and layout.

D

data- attribute: A custom attribute whose name starts with `data-`. It is allowed on any element and ignored by browsers, but a service such as Netlify can read it, as with `data-netlify="true"` on the inquiry form.
Declaration: One `property: value;` pair inside a CSS rule, such as `color: saddlebrown;`.
Default styles: The built-in looks every browser gives each element, such as big bold headings and indented lists, until your CSS replaces them.
Developer tools: A panel built into desktop browsers for inspecting a page, seeing which CSS applies, testing changes and finding errors.
display: A CSS property that sets how an element is laid out, for example `block`, `inline`, `inline-block` (sits in a line but accepts width and height), `flex` or `grid`.
div and span: Generic containers with no meaning, used for styling. `div` is a block box; `span` is its inline twin for a few words inside a line.
DNS: The internet's directory that turns domain names such as `kettleandcrane.com` into server addresses. Pointing your own domain at a host means adding records there.
Doctype: The first line of a page, `<!DOCTYPE html>`, which tells the browser to treat it as modern HTML rather than drawing it in an old quirky way.
DOM: The browser's live model of a page, built from your HTML after fixing mistakes. The DevTools Elements panel shows it as a tree.
Domain: The name part of a web address, such as `kettleandcrane.com`, which points to the site's server.

E

Element: A start tag, its content and its end tag together, such as `<h1>Kettle & Crane</h1>`.
Elements panel: The DevTools panel that shows the DOM as a tree of the page's elements and highlights each one on the page as you hover.
Emmet: A shortcut tool built into VS Code that expands short abbreviations into code. Typing `!` then Tab in an empty `.html` file writes the page skeleton.
End tag: The tag that closes an element, written like the start tag with a slash in front, such as `</p>`.

F

Favicon: The small square picture shown on the browser tab and in bookmarks, set with `<link rel="icon" href="…">`.
Fieldset and legend: A `fieldset` groups related form controls, such as a set of radio buttons, and its `legend` holds the question or title for the group.
Figure and figcaption: A `figure` wraps a picture, and its `figcaption` gives that picture a caption.
File extension: The end of a file name, such as `.html` or `.css`, that tells the computer and browser what kind of file it is.
Flexbox: A CSS layout tool switched on with `display: flex` that lines an element's children up in a row or column. Kettle & Crane uses it for the header menu and the product cards.
Font stack: A list of fonts in `font-family` that the browser tries in order, ending with a generic family as a fallback.
Form: A `form` element that collects information from a visitor through its controls and sends it to the address in its `action`.

G

Generic family: A type of font every browser has, namely `serif`, `sans-serif` or `monospace`. It goes last in a font stack as a safe fallback.
GET and POST: The two ways a form can send data. GET puts the name/value pairs in the URL, which suits searches, while POST sends them inside the request, which suits private data or orders.
GitHub: A website for storing and sharing code. Its free GitHub Pages service publishes a static site from a repository, which is how Kettle & Crane goes live.

H

Headings: HTML has six heading levels, `h1` to `h6`, that outline a page like a document. Use one `h1` per page and don't skip levels; change size with CSS, not the level.
Hero: The large introduction at the top of a homepage, such as Kettle & Crane's big headline, sentence and button.
Hex code: A color written as `#` and six hexadecimal digits, two each for red, green and blue, such as `#6b3f24` for the Kettle & Crane brown.
Hexadecimal: A way of counting with sixteen digits, 0 to 9 and then `a` to `f`. Two hex digits run from `00` to `ff` (255).
Hosting: Renting space on an always-on server so your site has a public address. GitHub Pages and Netlify host static sites for free.
href: The attribute on a link that says where it goes: another page, a file, a `#id` on a page, or a `mailto:` or `tel:` address. It is also the path on a `link` element that loads a style sheet.
HTML: The language that gives a web page its content and structure: headings, paragraphs, links, pictures and so on.
HTTPS: The protocol browsers use to talk to a web server, shown as `https://` at the start of an address. The `s` means the connection is encrypted.

I

id: An attribute that gives one element a name that must be unique on the page. It lets you link to it with `#name` and select it in CSS.
Image formats: The common picture file types: JPEG for photos, PNG for screenshots and sharp graphics, SVG for logos and icons that stay sharp at any size, and WebP for smaller files.
Indentation: Spaces at the start of a line that show which element is inside which. The browser ignores it.
Inheritance: The way some CSS properties, mainly text ones such as `color` and the font properties, pass from a parent to everything inside it.
Inline element: An element such as `a`, `strong` or `span` that sits within a line of text, is only as wide as its content and ignores width and height.
Inline style: CSS written in a `style` attribute on a single element, such as `<p style="color: red">`. It beats any selector, but it mixes looks into the content and is hard to find and change later, so it is best avoided.
Input types: The `type` of an `input` decides which control you get: `text`, `email`, `tel`, `number`, `date`, `checkbox` or `radio`. Types such as `email`, `number` and `date` also give a matching phone keyboard and automatic checking.

J

JavaScript: The programming language of the web, which controls what a page does when people interact with it, such as updating a cart total.

L

Label: The text that names a form control. It is linked to the control by a `for` attribute matching the control's `id`, so screen readers announce it and clicking it selects the box.
Layout: The arrangement of boxes on the page, such as putting cards in a row. It starts with the `display` property.
line-height: A CSS property for the space from one line of text to the next, written as a multiple of the font size without a unit. About 1.5 to 1.7 is comfortable for paragraphs.
Link: An `a` element whose `href` takes visitors to another page or place. The separate `link` element in the `head` attaches a style sheet or icon.

M

mailto: and tel: links: Special `href` values: `mailto:` opens a new email to an address, and `tel:` lets phone users call by tapping, with the number written as `+1` and no spaces.
Margin collapsing: When the bottom margin of one block and the top margin of the next overlap and the larger one wins, so 20 px and 30 px give a 30 px gap, not 50.
Markup language: A way of labeling parts of a text so a program knows what each part is. HTML is one; it describes content but doesn't calculate or decide anything.
max-width: A CSS property that caps how wide an element can grow, so it fills a narrow phone screen but stops at a comfortable size on a wide one.
meta: An element in the `head` that gives one piece of information about the page, such as its character encoding (`charset="utf-8"`, which covers every language and emoji), its viewport behavior on phones, or a description for search engines.

N

Name/value pair: A form control's `name` together with what is in it, such as `cafe=Bloom Café`. A control without a `name` isn't sent.
Nesting: Putting one element inside another, such as `strong` inside `p`. Inner elements must close before outer ones.
Netlify: A hosting company with a free plan. Netlify Drop publishes a folder you drag onto its page, and Netlify can also receive form submissions.
Network tab: The DevTools tab that lists every file the page requested, with its status code and size.
Normal flow: The default way the browser lays out a page: block elements stack down the page and inline content runs along lines.

O

Ordered list: A numbered list made with `ol`, used when order matters, such as steps. The browser does the numbering.

P

Padding, border and margin: The three box model layers around an element's content. Padding is space inside the border and takes the background color, the border is a line around it, and the margin is transparent space outside pushing other elements away.
Parent: The element another element sits directly inside. The `p` is the parent of a `strong` placed in it.
Path: Directions from one file to another through folders, such as `images/mug.jpg`, or `../images/mug.jpg`, where `..` means up one folder.
Pixel (px): One of the tiny dots of a screen, and a CSS unit of length that doesn't scale with the visitor's text-size setting.
Placeholder: Gray hint text shown inside a form box and set with the `placeholder` attribute. It disappears as you type, so it can't replace a label.
Property: The part of a CSS declaration that names what to set, such as `color` or `font-size`.
Pseudo-class: A selector for an element in a particular state, written with a colon, such as `a:hover` for a link under the pointer or `input:focus` for a box ready for typing.

Q

Query string: The `?name=value&…` part of a URL, which a GET form uses to carry its data, such as `thanks.html?cafe=Bloom+Caf%C3%A9`.

R

Radio button: One of a group of round buttons that share a `name`, so only one can be chosen. Each has its own `value`, which is what gets sent.
Refresh: Reloading a page in the browser to see your latest saved changes (Ctrl+R or Cmd+R). Holding Shift forces a fresh copy.
Registrar: A company that sells domain names, such as Cloudflare, Porkbun, Namecheap or GoDaddy.
Relative URL: An address that gives the way from the current page to another file in the same site, such as `about.html`. It works unchanged on your computer and on the published site.
Rendering: The browser's job of drawing a page on screen from its code.
Repository: A project folder on GitHub that keeps a history of every change. A repository named `username.github.io` holds the site for GitHub Pages.
Request: A browser asking a server for a file, such as `about.html`. The server's reply, containing the file's text, is the response.
rgb(): A way to write a color with red, green and blue amounts from 0 to 255, such as `rgb(107 63 36)`, with an optional alpha value.
Root: The `html` element, which holds everything else. Its font size, 16 px by default, is what `rem` is measured against.
Rule: A CSS selector plus its block of declarations in curly braces.

S

Screen reader: Software that reads a page aloud for people who are blind or have low vision. It relies on good structure, headings, labels and alt text.
Select and textarea: A `select` with an `option` for each choice makes a drop-down menu, where the option's text is shown and its `value` is sent. A `textarea` is a box for several lines of text and, unlike `input`, has an end tag.
Selector: The part of a CSS rule that picks which elements to style, such as `p`, `.price`, `#contact`, `nav a` or `h1, h2`.
Semantic element: An element that says what its content is rather than how it looks, such as `header`, `nav`, `main`, `section`, `article`, `aside` and `footer`. Browsers, screen readers and search engines use them to understand a page.
Server: A computer that stores a site and sends its web pages to browsers when asked.
Shorthand: One CSS property that sets several values at once, such as `margin: 2rem 0` (top and bottom 2rem, sides 0). With four values, go clockwise from the top.
Skeleton: The basic structure every HTML page needs: the doctype, `html`, a `head` with `meta` and `title`, and a `body`.
Specificity: How precise a selector is, counted as (IDs, classes, types). A more specific selector wins over a less specific one when origin and importance are equal.
Start tag: The tag that opens an element, such as `<p>`. Attributes go inside it.
Static site: A site of fixed files that the server sends exactly as they are, the same to every visitor. It is the simplest and cheapest kind to host.
Status code: A number carried by every server response saying how the request went: 200 means OK and 404 means not found.
Style sheet: A file of CSS rules, such as `style.css`, linked from each page's `head` so one file styles the whole site.
Submit: To send a form's data, usually by clicking a `button type="submit"`.

T

Table: A way of showing data in rows and columns, built row by row with `table`, `tr`, `th` (header cell) and `td` (data cell). `scope` says whether a header labels a column or a row.
Tag: A name inside angle brackets that marks where an element starts or ends, such as `<h1>` and `</h1>`.
title: The `title` element in the `head` names the page. It shows on the browser tab, in bookmarks and as the headline in search results, so make it specific to each page.

U

Units (px, rem, em, %, vw, ch): CSS length units. `rem` is relative to the root font size, `em` to the element's own font size, `%` to the parent's size, `vw`/`vh` to 1% of the window's width or height, and `ch` to the width of a "0". `rem` is the best choice for text because it grows with the visitor's browser font-size setting.
Universal selector: The `*` selector, which matches every element. It is often used to set `box-sizing: border-box` everywhere.
Unordered list: A bulleted list made with `ul`, with each item in an `li`, used when order doesn't matter.
URL: A web address made of a protocol, a domain and a path, such as `https://kettleandcrane.com/shop/mugs.html`.
User agent: The technical name for the browser. Its built-in CSS appears in DevTools as the user agent stylesheet.

V

Validation: Checking what people type before a form is sent, using `required`, input types, `min` and `max`. It helps honest visitors but isn't security, so the server must check again.
Validator: A tool, such as the free W3C checker, that checks your HTML against the rules and lists every problem. W3C is the group that publishes web standards.
Value: What a CSS declaration or an attribute is set to, such as `saddlebrown` in `color: saddlebrown` or `en` in `lang="en"`.
Viewport: The visible area of the browser window. The `meta name="viewport"` tag tells phones to show the page at their real width instead of shrinking a desktop-sized page.
Void element: An element with no content and no end tag, such as `br`, `meta`, `img`, `input` and `link`.
VS Code: Visual Studio Code, a free code editor for writing HTML, CSS and other plain text files, with colored code and a built-in color picker for CSS colors. It is used for writing the Kettle & Crane pages.

W

WCAG: The web's accessibility guidelines. They ask for a text contrast of at least 4.5:1 for normal text and 3:1 for large text.
Web font: A font file downloaded along with the page so everyone sees the same typeface. Each one adds a download, so use one or two at most.
Web page: A plain text file of HTML that a browser renders as a page.