Web, design & development glossary.
A practical reference for the terminology that appears in front-end development, CSS, WordPress, UX, graphic design and typography. Definitions stay short enough to scan, but each term links to a deeper page with a concrete example, a practical check and nearby concepts.
Then follow the related definitions when two concepts sound similar. The glossary is organized to make those distinctions easier to see.
Web Fundamentals
Core browser, network, markup and scripting vocabulary.
HTML
HTML, or HyperText Markup Language, is the markup language used to define the structure and meaning of content in a web document.
CSS
CSS, or Cascading Style Sheets, is the stylesheet language used to control the presentation of HTML and other markup documents.
JavaScript
JavaScript is the Web’s native scripting language and is commonly used to add behavior and interactivity to web pages.
DOM
The Document Object Model, or DOM, is the browser’s object representation of a document such as an HTML page.
HTTP
HTTP, the Hypertext Transfer Protocol, is the application-layer protocol used to transfer web resources and messages between clients and servers.
HTTPS
HTTPS is HTTP carried over an encrypted TLS connection.
URL
A URL, or Uniform Resource Locator, identifies the location of a resource and the protocol used to access it.
DNS
The Domain Name System, or DNS, maps human-readable domain names to records used to locate and configure internet services.
Browser
A web browser is software that retrieves, interprets and displays web resources.
Web Server
A web server is software, and often the computer running it, that receives web requests and returns resources or application responses.
API
An API, or Application Programming Interface, is a defined interface through which software components communicate.
AJAX
AJAX is a web-development technique for requesting data asynchronously and updating a page without performing a full document navigation.
JSON
JSON, or JavaScript Object Notation, is a text format for representing structured data with objects, arrays, strings, numbers, booleans and null.
XML
XML, or Extensible Markup Language, is a markup language for structuring and transporting data with user-defined elements.
SVG
SVG, or Scalable Vector Graphics, is an XML-based format for two-dimensional vector graphics.
Responsive Web Design
Responsive web design is an approach in which a layout adapts to different viewport sizes, devices and available space.
Accessibility
Web accessibility is the practice of making websites and digital interfaces usable by as many people as possible, including people with disabilities.
Semantic HTML
Semantic HTML uses elements according to the meaning and role of the content they contain rather than choosing elements only for appearance.
Viewport
The viewport is the area of a web page that is currently available for presentation in the browser or other user agent.
Web Performance
Web performance concerns how quickly and reliably web content loads, renders and becomes usable.
CSS & Layout
The language used to describe styling, layout, states and responsive behavior.
Selector
A CSS selector is the part of a CSS rule that identifies which elements a set of declarations should apply to.
Specificity
Specificity is the weighting system CSS uses when competing selectors from the same cascade origin and layer match the same element.
Cascade
The CSS cascade is the set of rules used to resolve which declarations apply when multiple declarations target the same property on the same element.
Inheritance
CSS inheritance is the mechanism by which some property values are passed from an element to its descendants.
Box Model
The CSS box model describes an element as content surrounded by padding, border and margin areas.
Margin
Margin is the space outside an element’s border in the CSS box model.
Padding
Padding is the space between an element’s content and its border.
Border
A CSS border is the line or decorative edge drawn around an element’s padding and content areas.
Flexbox
CSS Flexbox is a one-dimensional layout model for arranging items along a main axis and a cross axis.
CSS Grid
CSS Grid is a two-dimensional layout system for arranging content in rows and columns.
Positioning
CSS positioning controls how an element participates in normal flow and how offsets are calculated.
Z-index
z-index controls the stacking order of positioned and certain other elements within stacking contexts.
Media Query
A media query conditionally applies CSS according to characteristics of the output environment or viewport.
Pseudo-class
A CSS pseudo-class selects an element based on state, position or another condition that is not expressed as a normal element attribute.
Pseudo-element
A CSS pseudo-element represents a generated or abstracted part of an element that can be styled without adding a separate HTML element.
CSS Variable
A CSS custom property, often called a CSS variable, is an author-defined property whose value can be reused with the var() function.
Breakpoint
A breakpoint is a chosen condition, usually a viewport width, at which a responsive layout changes.
Animation
CSS animation changes property values over time using keyframes and animation properties.
Transition
A CSS transition interpolates between an element’s old and new property values when a change occurs.
Transform
CSS transforms visually translate, rotate, scale or skew an element without using ordinary document-flow positioning.
WordPress & CMS
Publishing, templating and extensibility terms used in content-managed sites.
CMS
A content management system, or CMS, is software used to create, organize and maintain website content through an administrative interface.
WordPress
WordPress is an open-source content management system used to publish and manage websites.
Theme
A WordPress theme controls the presentation and templates used to render a site.
Plugin
A WordPress plugin is a package of code that extends or changes WordPress functionality.
Block Editor
The WordPress Block Editor is the editing interface that represents page and post content as individual blocks.
Gutenberg
Gutenberg is the WordPress project that introduced block-based editing and continues to develop block and site-editing capabilities.
Block Theme
A block theme is a WordPress theme whose templates and template parts are composed primarily of blocks.
Template
A WordPress template defines the structure used to display a type of page or request.
Template Part
A template part is a reusable section of a WordPress template, such as a header or footer.
Pattern
A WordPress block pattern is a predefined arrangement of blocks that can be inserted as a starting layout.
Widget
A WordPress widget is a small content or interface unit historically used in registered widget areas such as sidebars and footers.
Shortcode
A WordPress shortcode is a compact bracketed token that is expanded into generated content when WordPress processes a post or page.
Hook
A WordPress hook is an extension point that allows custom code to run without editing WordPress core files.
Action Hook
A WordPress action hook allows registered callback functions to run at a particular point in WordPress execution.
Filter Hook
A WordPress filter hook passes a value through registered callback functions so the value can be modified and returned.
Taxonomy
A WordPress taxonomy is a system for grouping content by terms.
Category
A WordPress category is a hierarchical taxonomy used to group related posts.
Tag
A WordPress tag is a non-hierarchical taxonomy term used to describe or connect posts.
Slug
A WordPress slug is the URL-friendly text identifier associated with content, taxonomy terms and other objects.
Permalink
A permalink is the stable URL used to address a specific piece of website content.
Design & UX
Structure, interaction and visual decision-making terminology.
UI
UI, or user interface, refers to the controls, visual elements and interactive surfaces through which a person uses a digital product.
UX
UX, or user experience, concerns the overall experience a person has while using a product, service or system.
Wireframe
A wireframe is a simplified representation of a page or interface used to define structure, hierarchy and placement before detailed visual design.
Prototype
A prototype is a model of a proposed interface or product used to explore, demonstrate or test behavior before final implementation.
Mockup
A mockup is a static or mostly static visual representation of how a finished design is expected to look.
Design System
A design system is a maintained collection of reusable design rules, tokens, components and documentation used to create consistent products.
Component
A component is a reusable interface element or group of elements designed to perform a consistent role.
Auto Layout
Auto layout is Figma’s system for arranging items in a frame according to spacing, padding, flow and sizing rules.
Frame
A frame in Figma is a parent container that can hold and organize other design objects.
Visual Hierarchy
Visual hierarchy is the ordering of visual emphasis that helps viewers understand what to notice and read first.
White Space
White space, also called negative space, is the intentionally unoccupied space between and around visual elements.
Alignment
Alignment is the placement of elements along shared visual lines, edges, centers or baselines.
Contrast
Contrast is the visual difference between elements, such as differences in color, size, weight, shape or spacing.
Balance
Balance is the distribution of visual weight within a composition.
Grid System
A grid system is a set of alignment guides used to organize content into consistent columns, rows and spacing relationships.
Affordance
An affordance is a property or cue that suggests how an object or interface can be used.
Usability
Usability describes how effectively, efficiently and satisfactorily people can use an interface to achieve intended goals.
Information Architecture
Information architecture is the organization, labeling and structuring of information so people can understand and navigate it.
Call to Action
A call to action, often abbreviated CTA, is an interface element or message that prompts a user to take a specific next step.
Above the Fold
Above the fold refers to the portion of a page visible before the user scrolls.
Graphics & Typography
Image, color, compositing and type terminology used in visual production.
Raster Image
A raster image is an image represented by a rectangular grid of pixels, with each pixel storing color information.
Vector Graphic
A vector graphic is an image built from mathematically described points, lines, curves and shapes rather than a fixed grid of pixels.
Pixel
A pixel is the smallest addressable picture element in a raster image or digital display representation.
Resolution
Resolution describes the amount or density of image detail represented in a digital or printed output context.
DPI
DPI, or dots per inch, describes the density of printed dots produced by an output device.
PPI
PPI, or pixels per inch, expresses pixel density relative to a physical inch.
RGB
RGB is an additive color model that represents colors with red, green and blue components.
CMYK
CMYK is a subtractive color model based on cyan, magenta, yellow and black inks and is widely used in commercial printing.
Hex Color
A hexadecimal color value is a text notation commonly used in CSS to represent RGB channel values.
Alpha Channel
An alpha channel stores transparency or opacity information separately from color channels.
Layer
A layer in Photoshop is an independently editable level in a document stack that can contain pixels, text, shapes, adjustments or other content.
Layer Mask
A layer mask controls which parts of a Photoshop layer are visible without permanently deleting the underlying layer content.
Vector Mask
A vector mask is a resolution-independent path used to control the visible area of a Photoshop layer.
Smart Object
A Photoshop Smart Object is a layer that preserves source image data so many transformations and filters can be applied nondestructively.
Clipping Mask
A clipping mask uses the content or transparency of one layer or shape to control where another layer is visible.
Blend Mode
A blend mode determines how the color values of one layer or element are mathematically combined with the content beneath it.
Typography
Typography is the selection, arrangement and styling of type to communicate written content effectively.
Kerning
Kerning is the adjustment of spacing between particular pairs of characters.
Tracking
Tracking is the uniform adjustment of spacing across a range of characters.
Leading
Leading is the vertical distance between lines of type, commonly measured from one baseline to the next.