Web Design Glossary

The portion of a webpage visible without scrolling. Comes from newspaper printing where the most important stories appeared on the top half of a folded newspaper. In web design, content "above the fold" gets the most attention — it's what visitors see first before deciding whether to scroll down.

The practice of designing and building websites that can be used by everyone, including people with disabilities. The abbreviation "a11y" comes from there being 11 letters between the "a" and "y" in the word. Accessibility covers things like screen reader support, keyboard navigation, colour contrast, and clear language.

Short for "alternative text" — a written description added to an image using the HTML alt attribute. Screen readers use alt text to describe images to visually impaired users. Search engines also read alt text to understand what an image contains. Good alt text is descriptive and concise, like "a black Labrador running on a beach" rather than just "dog".

Application Programming Interface — a way for two software systems to communicate. On the web, APIs let your website request and receive data from external services. For example, an API might let you embed a Google Map, pull in Instagram photos, or process payments through Stripe. You send a request to the API and it sends back structured data (usually JSON).

Accessible Rich Internet Applications — a set of HTML attributes that make web content and applications more accessible. ARIA labels, roles, and properties give screen readers extra context about what elements do. For example, aria-label="Close menu" tells a screen reader what a button does when there's no visible text. ARIA should only be used when native HTML can't do the job.

The percentage of visitors who land on a page and leave without clicking anything or visiting another page. A high bounce rate might mean the page loads slowly, doesn't match what the visitor was searching for, or has poor content. However, context matters — a high bounce rate on a contact page or a blog post can be perfectly normal if visitors got what they needed.

A specific screen width at which a website's layout changes to look better on that device size. Breakpoints are defined in CSS using media queries. Common breakpoints are around 768px for tablets and 480px for mobile. Modern design starts with mobile layouts first and adds breakpoints as screen size increases — this is called mobile-first design.

A stored copy of files (like images, CSS, or JavaScript) saved by the browser or a server so they don't need to be downloaded again on the next visit. Caching makes websites load much faster for returning visitors. When a site is updated, cached files may need to be "cleared" or "busted" so visitors see the new version rather than the old one.

The "official" version of a URL when the same content exists at multiple addresses. For example, a page might be reachable at example.com/page, example.com/page/, and www.example.com/page. A canonical tag tells search engines which one to index. Without it, Google may split ranking signals across all three versions, hurting your SEO.

Content Delivery Network — a global network of servers that stores copies of your website's files (images, CSS, JavaScript) in locations around the world. When a visitor loads your site, the CDN serves files from the server closest to them, making the site load faster regardless of where your main hosting server is located. Cloudflare, Fastly, and AWS CloudFront are popular CDNs.

A Core Web Vital metric that measures how much the visible content on a page unexpectedly shifts while it's loading. If you've ever tried to click a button and had it jump away because an image or ad loaded late, that's a layout shift. A good CLS score is below 0.1. Fix it by always defining width and height on images and avoiding dynamically injected content above existing content.

Content Management System — a software platform that lets you create and manage website content without writing code. WordPress is the most popular CMS, powering over 40% of all websites. Other CMSs include Squarespace, Wix, Shopify (for e-commerce), and Webflow. A CMS is useful if you want to update content regularly without a developer's help.

Cascading Style Sheets — the language used to control how HTML elements look on a webpage. While HTML defines what's on the page, CSS controls colours, fonts, spacing, layout, and animations. The word "cascading" refers to how styles layer on top of each other — more specific rules override more general ones. CSS is read by the browser and applied visually to the page.

A call to action is any element that prompts a visitor to do something — a button, a link, or a form. Examples include "Get a Free Quote", "Sign Up", "Add to Cart", or "Learn More". CTAs are a core part of web design because they guide visitors toward the goal of the page. Effective CTAs are clear, visually prominent, and positioned where the visitor's eye naturally lands.

The process search engines use to discover and read web pages. A program called a "crawler" or "bot" (like Google's Googlebot) follows links from page to page across the web and reads the content on each page. If your page can't be crawled — because it's blocked by robots.txt, requires a login, or has broken links — it won't appear in search results.

The process of making a website or application available on the internet — moving it from a local development environment to a live server. Deployment can be as simple as uploading files via FTP, or as automated as pushing code to GitHub and having a service like Netlify automatically build and publish it. "Continuous deployment" means every code change is deployed automatically once tests pass.

The internet's phone book. DNS translates human-readable domain names (like example.com) into IP addresses (like 192.168.1.1) that computers use to find servers. When you type a website address, your device queries a DNS server to find out where that site lives. DNS changes can take up to 48 hours to fully "propagate" (spread) across the internet.

The browser's representation of a webpage as a tree-like structure of objects. When a browser loads HTML, it creates the DOM — a live model of all elements, their attributes, and their relationships. JavaScript uses the DOM to read and change page content dynamically without reloading the page. When you "inspect element" in DevTools, you're looking at the DOM.

The small icon that appears in your browser tab next to a website's title. "Fav" is short for "favourite" — favicons were originally shown in Internet Explorer's bookmarks. Modern favicons are typically supplied in several sizes (16×16, 32×32, 180×180 for Apple devices) and in SVG format where possible. You define them in your HTML using <link rel="icon"> tags in the head.

A CSS layout system designed for arranging elements in a single row or column. Flexbox makes it easy to align items, distribute space between them, and change their order. It's especially useful for navigation bars, card rows, and centring content. You activate it with display: flex on a parent element, then use properties like justify-content and align-items to control layout.

A pre-built collection of code, tools, and conventions that gives developers a starting structure for building applications. CSS frameworks like Bootstrap provide pre-styled components, while JavaScript frameworks like React or Vue handle how UIs update dynamically. Frameworks save time by solving common problems so you don't start from scratch, but they also add dependencies and learning curves.

A method of transferring files between your computer and a web server. FTP was the traditional way to upload website files to a hosting account using software like FileZilla. Today most developers use Git-based deployment (pushing to GitHub and letting a service deploy automatically), but FTP is still widely used with shared hosting providers and WordPress setups.

A version control system that tracks changes to code over time. Git lets you save "snapshots" (commits) of your project, work on separate branches without breaking the main codebase, and merge changes back together. GitHub is the most popular platform for hosting Git repositories online and collaborating with other developers. Git is free and widely considered essential for professional development work.

A CSS layout system for creating two-dimensional layouts (rows and columns). Unlike Flexbox which works in one direction, Grid lets you control both horizontal and vertical placement simultaneously. It's ideal for full-page layouts, image galleries, and dashboards. Activated with display: grid, you can define columns with grid-template-columns and rows with grid-template-rows.

The large banner area at the top of a homepage or landing page — typically the first thing a visitor sees. A hero section usually contains a headline, a short description, and one or two calls to action. It's designed to communicate what the site is about and why the visitor should stay. Good heroes are visually striking and immediately answer "what is this and what should I do?"

A service that stores your website's files on a server and makes them accessible on the internet 24/7. Without hosting, your website only exists on your local computer. Types of hosting include shared hosting (cheapest, resources shared with other sites), VPS (more power, more control), dedicated servers (expensive, entire server to yourself), and static hosting (very fast and often free, for sites without a database).

The standard language used to create the structure of web pages. HTML uses "tags" — like <h1>, <p>, and <img> — to define what each piece of content is and how elements relate to each other. HTML doesn't control how things look (that's CSS's job). Every webpage you've ever seen is built on HTML. It was invented by Tim Berners-Lee in 1991.

The process by which a search engine stores and organises the content it has crawled so it can appear in search results. Once a page is "indexed", it can show up when someone searches for relevant terms. You can request indexing through Google Search Console and check if a page is indexed by searching site:yourdomain.com/page in Google. Pages blocked by robots.txt or noindex tags won't be indexed.

The programming language of the web. While HTML provides structure and CSS provides styling, JavaScript makes web pages interactive and dynamic. It can respond to user clicks, update content without reloading the page, validate form inputs, fetch data from APIs, and much more. JavaScript runs directly in the browser — no special software needed. It can also run on servers using Node.js.

A technique where images and other media are only loaded when they're about to come into the user's viewport, rather than all at once when the page first loads. This significantly reduces initial page load time and data usage — especially important on mobile. In HTML you can enable it with <img loading="lazy">. The key is not to lazy load images that are already visible on page load (like hero images).

A Core Web Vitals metric that measures how long it takes for the largest visible content element (usually a hero image or headline) to appear on screen. A good LCP score is under 2.5 seconds. Slow LCP is usually caused by large unoptimised images, slow server response times, or render-blocking JavaScript. LCP is one of Google's ranking factors.

A collection of pre-written code that you can import and use in your own project. Unlike a framework (which dictates how your whole project is structured), a library handles one specific task and you call it on your own terms. jQuery is a JavaScript library for DOM manipulation. GSAP is a library for animations. Libraries save you from writing common functionality from scratch.

Information about a webpage that isn't displayed on the page itself, but is read by browsers and search engines. Meta tags live inside the HTML <head> element. Important meta tags include the <title> (shown in browser tabs and Google results), <meta name="description"> (the snippet shown in search results), and Open Graph tags for how a page looks when shared on social media.

The process of removing unnecessary characters from code (whitespace, comments, long variable names) without changing how it works. Minified CSS and JavaScript files are smaller, which means faster download times for visitors. Minified files often have a .min.js or .min.css suffix. Most build tools and hosting platforms minify assets automatically.

A design approach where you start by designing for the smallest screen (mobile) and progressively enhance the layout for larger screens. This is the opposite of the old approach of designing for desktop first and then trying to squeeze things down for mobile. Mobile-first is now the standard because over 60% of web traffic comes from mobile devices, and Google primarily indexes the mobile version of websites.

A piece of software you install into a CMS or application to add new functionality without writing custom code. In WordPress, plugins add features like contact forms, SEO tools, e-commerce, caching, and security. There are over 60,000 free plugins in the WordPress directory. The downside is that too many plugins can slow down a site and create security vulnerabilities if not kept updated.

A design strategy that starts with a functional baseline that works for all users and browsers, then adds layers of enhancement (better styles, JavaScript interactions) for those with more capable browsers. The opposite is "graceful degradation" — building a full-featured site and then trying to make it work on older browsers. Progressive enhancement ensures everyone gets a usable experience, even if not the ideal one.

A permanent redirect that sends visitors (and search engines) from one URL to another. When you change a page's URL or delete a page, you should set up a 301 redirect from the old URL to the new one. Without it, visitors get a 404 error and Google loses track of the page's ranking. "301" is the HTTP status code meaning "Moved Permanently". This passes most of the SEO value from the old URL to the new one.

The HTTP status code for a page that doesn't exist. When a browser requests a URL and the server can't find any content at that address, it returns a 404 response. This usually happens because a URL was typed incorrectly, a page was deleted without a redirect, or a link was broken. Every website should have a custom 404 page that helps visitors find what they're looking for.

A folder that contains all of a project's files and the complete history of changes tracked by Git. Repositories can be stored locally on your computer or remotely on platforms like GitHub. "Public" repos are visible to everyone; "private" repos are only visible to people you invite. When someone "forks" a repo, they create their own copy to work on independently.

An approach to web design where a site's layout automatically adapts to look good on any screen size — from a small phone to a large desktop monitor. Responsive design is achieved through flexible CSS layouts (flexbox, grid), relative units (%, rem, vw), and media queries that apply different styles at different screen widths. The alternative is building separate mobile and desktop sites, which is far more work to maintain.

A plain text file at the root of a website (e.g. example.com/robots.txt) that tells search engine crawlers which pages or sections they are allowed or not allowed to visit. You might block crawlers from accessing admin pages, staging environments, or duplicate content. Disallow: / would block everything; Disallow: /admin/ blocks only that directory. Search engines follow these rules voluntarily — they're not enforced technically.

Structured data added to HTML that helps search engines understand the content of a page more deeply. Schema markup can tell Google that a page is a recipe, a product, an event, a FAQ, or a review — enabling rich results (star ratings, prices, etc.) to appear directly in search results. Schema uses a vocabulary from schema.org and is usually added as JSON-LD in a <script> tag in the page head.

The practice of improving a website so it ranks higher in search engine results pages (SERPs) for relevant keywords. SEO includes on-page factors (page titles, meta descriptions, headings, content quality, internal links), technical factors (site speed, mobile-friendliness, crawlability, structured data), and off-page factors (backlinks from other websites). Good SEO builds long-term organic traffic without paying for ads.

A file (usually XML) that lists all the important pages on your website and helps search engines find and index them more efficiently. You submit your sitemap to Google via Search Console. A sitemap is especially important for large sites, new sites with few backlinks, or sites with pages that aren't easily discoverable through normal link crawling. The URL is typically example.com/sitemap.xml.

SSL (Secure Sockets Layer) and its modern replacement TLS (Transport Layer Security) are security protocols that encrypt data sent between a browser and a web server. When a site has SSL/TLS, its URL starts with https:// and browsers show a padlock icon. Google uses HTTPS as a ranking signal. Modern hosting platforms (Netlify, Vercel, Cloudflare Pages) provide free SSL certificates automatically.

A pre-designed layout or set of styles that determines how a website looks. In CMS platforms like WordPress, a "theme" controls the visual design — fonts, colours, layout structure — across the whole site. You can customise themes without touching code. A "template" usually refers to a specific page layout within a theme. Using a theme is quicker than building from scratch but offers less design flexibility.

The last part of a domain name — the bit after the final dot. Common TLDs include .com, .org, .net, and country-specific ones like .co.uk or .com.au. There are also newer TLDs like .io, .design, and .app. For most businesses, .com is still the most trusted and recognisable choice.

Everything a user sees and interacts with on a screen — buttons, menus, forms, icons, and layouts. UI design is concerned with making interfaces visually clear and easy to use. A good UI is intuitive: users should be able to achieve their goals without thinking too hard about how to do it. UI design sits alongside UX design, which focuses on the overall experience and journey, not just the visual elements.

The web address of a specific page or resource — what you type into a browser's address bar. A URL has several parts: the protocol (https://), the domain (example.com), the path (/about), and optionally query strings (?page=2) or fragments (#section). Clean, descriptive URLs are better for both SEO and user experience than long strings of numbers and symbols.

The overall experience a person has when using a website or app — how easy it is to navigate, how logical the structure is, whether it meets their needs, and how it makes them feel. UX design involves user research, wireframing, user testing, and information architecture. Good UX means visitors can find what they need quickly, accomplish their goals with minimal friction, and leave with a positive impression.

The visible area of a webpage in a browser window. The viewport size varies from device to device — a phone viewport is much narrower than a desktop. The HTML tag <meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to use the device's actual width rather than zooming out to show a desktop-sized layout. Without this tag, mobile sites often appear tiny and unreadable.

The empty space between and around design elements — also called "negative space". Whitespace isn't wasted space — it gives content room to breathe, improves readability, and makes interfaces feel clean and professional. Designers use whitespace to create visual hierarchy, group related elements, and guide the eye. Cramming too much content together is one of the most common mistakes in amateur web design.

A simple, low-fidelity sketch or diagram of a web page's layout — showing the placement of content blocks, navigation, and key elements, without any colour, typography, or imagery. Wireframes are used early in the design process to plan structure and user flow before investing time in visual design. They can be drawn on paper, in Figma, or with tools like Whimsical. They help clients and designers agree on layout before any code is written.

The world's most popular CMS, powering over 40% of all websites. WordPress.org is the free, self-hosted, open-source software you install on your own hosting. WordPress.com is a hosted service run by Automattic where WordPress is managed for you (with more restrictions). WordPress is highly flexible with thousands of themes and plugins but requires regular maintenance, updates, and security attention.

A CSS property that controls the stacking order of overlapping HTML elements. Elements with a higher z-index appear in front of elements with a lower one. For z-index to work, the element must have a position value other than static (e.g., relative, absolute, fixed). It's commonly used for modals, tooltips, sticky headers, and dropdown menus that need to sit above other page content.