Table of Contents
If you’re starting a new website project, it can be super helpful to know some of the terminology that might crop up when working with your chosen designer.
Covering everything from ‘accordion’ to ‘border-radius,’ I’ve put together this handy glossary with over 100 web design-related terms!
2FA
2FA (Two-Factor Authentication) strengthens website logins by requiring two verification steps, like a password and a code, to ensure secure user access.
404
A “404” error occurs when a user tries to access a web page that cannot be found. It typically indicates that the page has been moved or deleted.
Above the Fold
The portion of a website that is visible to the user without needing to scroll. Great for placing key information and CTAs to immediately capture the user’s attention.
Accordion
An interactive website feature that expands or collapses sections of content when clicked.
Alignment
Refers to the arrangement of elements (text, images, etc.) on a web page to create a structured layout.
Alt Text
Describes image content for screen readers, improving accessibility and SEO.
Anchor Text
Anchor text refers to the clickable text in any hyperlink, whether it links to another page, a different part of the same page, or an external site.
Animation
Animations refer to moving visual elements or transitions, such as hover effects or page transitions used to engage users and enhance the websites experience.
API
An API (Application Programming Interface) is a set of rules that allows websites and web applications to request and share data or services from other online platforms.
Back-End
The part of a website that handles data processing, server-side functionality, and database management. It is responsible for delivering content to the front-end of the website.
Back to Top
A handy button that appears as visitors scroll down your page, offering a quick way to return to the beginning with a single click—particularly useful for longer pages where scrolling back up would be tiresome.
Banner Ad
A graphical advertisement displayed on a web page designed to drive traffic to another website or promote products and/or services.
Below the Fold
The area of a web page that is not visible without scrolling down. It typically contains additional content secondary to what is above the fold.
Blog
A section of a website where regularly updated articles, posts, or content are published. Blogs are often used to engage visitors, provide updates, or improve SEO.
Body Text
Body text refers to the written copy on a web page, excluding headings, subheadings, or sidebars.
Border Radius
A CSS property that creates rounded corners for elements.
Breadcrumb
A navigation aid showing users their current location within a website’s structure.
Breakpoint
A breakpoint is the point where a website’s layout adjusts to ensure it looks and works well on different screen sizes, adapting to fit various devices.
Button
A clickable element that triggers actions such as form submission, navigating to another page, or interacting with dynamic content.
Call to Action (CTA)
A call to action is a prompt that encourages users to complete a specific task on your site such as “Download Brochure”, “Book Now” or “Subscribe”.
Caption
A caption is a short text description that accompanies an image, video, or other visual content on a web page. It provides context, explains the content, or adds additional information for users.
Carousel
A rotating display of images or content. Users can swipe or click to move between items, often used for showcasing multiple features, products, or images.
Categories
Categories help organise website content by grouping related topics, making it easier for users to navigate and find relevant information.
CMS (Content Management System)
A software system for site owners to create, manage, and modify content on a website without requiring specialised technical knowledge.
Columns
Layout elements that organise content into vertical sections. Columns help improve readability and create a more visually appealing structure.
Comments
Comments are messages left by readers to share their thoughts, feedback, or questions typically about a specific blog post or product. Comments can help foster a sense of community and increase user engagement.
Compression
Compression is the process of reducing the size of a file or data to save storage space or improve transmission speed. In web design, compression is often used for images, videos, and files to speed up website loading times.
Content
The textual, visual, or multimedia information presented on a website. Content is key to communicating the purpose and value of the site.
Cookie Pop-up
A cookie pop-up is a notification that appears on a website, informing users about the use of cookies—small data files stored on their devices. It often asks for consent to collect and process user data, ensuring compliance with privacy laws like GDPR or CCPA.
Cookies
A cookie is a small text file that a website saves on a visitor’s device to remember their preferences or actions, making the site easier to use during future visits.
Counter
An engaging, animated numerical counter designed to showcase achievements, milestones, product ratings, or other key metrics on your website, adding visual interest and interactivity.
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is a language used to control the appearance and layout of websites. It defines elements like colours, fonts, spacing, and positioning, allowing developers to separate a web page’s structure (HTML) from its style and design.
Divider
A horizontal or vertical line used to separate different sections of content on a web page, improving readability and structure.
Divi
A popular WordPress theme and powerful page builder that allows users to create custom layouts and designs using a visual editor.
Domain
A domain name is a unique address that identifies a website on the Internet. For example, ‘google.com’.
Download
The process of transferring files, data, or content from a website or online source to a user’s device for offline access.
Draft
Draft refers to an unfinished or preliminary version of a web page or post saved for further editing before being published or made live.
Drop-Shadow
A visual effect that creates the illusion of a shadow behind an element, adding depth to the design.
Dropdown Menu
A navigation feature where options remain hidden until the user clicks or hovers over a menu item at which point the options ‘drop down’ for easy selection.
E-commerce
The buying and selling of products or services online. E-commerce websites typically feature product listings, shopping carts, and secure checkout systems.
Email Address
An email address is a unique identifier for sending and receiving electronic messages. It often serves as a point of contact on websites for enquiries, subscriptions, or account-related communication.
Email Opt-in
A method for gaining consent from users to send them marketing emails, usually through a checkbox or form on a website.
Embed
Embedding involves placing content from external sources (such as videos or social media posts) directly on a web page using an HTML iframe or other embedding code.
External Link
An external link is a hyperlink that directs users to a web page or resource that resides outside of the current website or domain.
Favicon
A favicon is a small icon that appears in the browser tab next to a website’s title, making it easier for users to recognise and identify the site at a glance.
Filter
A filter is a tool or feature that allows users to narrow down or sort content based on specific criteria, such as price, category, or date. Filters are commonly used in e-commerce sites or search results to help users find information more easily.
Fixed Element
An element that remains in the same position on the screen even as the user scrolls down the page. Fixed elements are often used for navigation menus or CTAs.
Flipbook
An interactive online feature that allows users to flip through pages of a digital book, magazine, or brochure. It mimics the experience of reading a physical book.
Form
A set of input fields on a web page that collects data from users, such as contact details, feedback, or orders.
Front-End
The front-end is the visible part of a website that users interact with such as the layout, design and content.
FTP (File Transfer Protocol)
A standard method for transferring files between your local computer and a web server. This secure protocol ensures reliable uploading and downloading of website content, such as images and documents.
Gallery
A section or page that displays a curated collection of images and/or videos. Galleries are commonly used on portfolios, product pages, or media sites to highlight visual content in an organised and engaging way.
GDPR (General Data Protection Regulation)
GDPR (General Data Protection Regulation) is a set of EU laws that govern how businesses collect, store, and handle personal data, giving individuals more control over their information.
GIF
A type of image format that supports animations. GIFs are often used for short, looping visuals on websites and social media.
Gradient
A gradient is a smooth transition between two or more colours, often used as a background or to add depth and visual interest to design elements.
Hamburger Menu
A hamburger menu is a popular navigation tool in web design, especially for mobile devices. It features three horizontal lines that, when clicked or tapped, open up to reveal the site’s menu options.
Header
A header is the top section of a web page, usually featuring the site’s logo, main menu, and contact information. It serves as the first point of interaction and helps guide users through the site.
Headings
Headings are titles or subtitles used to organise and structure content on a web page. They help users quickly understand the hierarchy of information and improve readability. For example, H1 is typically used for the main title, H2 for section headings, and H3 for subheadings within those sections.
HEX Code
A hex code is a six-digit code used to specify colours on websites. It starts with a “#” and is followed by numbers and letters. For example, #8C00E3 is the hex code for a shade of purple. The code shows how much red, green, and blue make up the colour.
Hero Section
A hero image is a large, prominently placed image at the top of a web page. It is often paired with a headline or call-to-action to grab users’ attention and communicate the core message or purpose of the page.
HTML (Hypertext Markup Language)
HTML (Hypertext Markup Language) is the standard language used to create and structure content on the web. It defines the elements of a web page, such as layout, headings, paragraphs, links, images, and other content, using tags like <h1>, <p>, <a>, and <img>.
Hover Box
A hover box is an element on a web page that changes when you hover your mouse over it. For example, it might change colour or reveal more information, helping make the site more interactive.
Hyperlink
A clickable link on a web page that directs users to another page, website, or specific content within the same page.
Icon
Web Icons are small graphical symbols that represent actions or features. Icons help create visual interest while conveying information in a clear and efficient way.
Iframe
An HTML element that allows you to embed another web page or document inside your web page, commonly used for embedding videos, maps, virtual tours or external content.
Input Fields
An input field is a designated area within a form on a website where users can type and submit information. It allows for various types of data entry, such as text, numbers, dates, or selections.
JavaScript
JavaScript is a programming language used to create interactive effects and dynamic content on websites. It enables features like animations, form validation, interactive maps, and real-time updates, making web pages more engaging and functional.
JPG/JPEG
A commonly used image format that compresses file sizes without sacrificing too much image quality. Most often used for photographs.
Jump Link
A jump link or jump-to link is a specific type of link that directs users to a different section within the same page, often using an anchor tag (<a> with an id) to create the target location.
Justified Gallery
A justified gallery display images in a visually balanced grid where all photos maintain their aspect ratios while aligning perfectly to create uniform row heights without awkward gaps or cropping.
JSON
JSON (JavaScript Object Notation) is a lightweight, human-readable data format for storing and sharing data. It uses key-value pairs and lists to organise information, making it easy to exchange data between systems and applications, especially in web services and APIs.
Lazy Loading
Lazy loading is a technique whereby content, such as images or videos, only loads when it enters the user’s viewport. This helps improve page load speed and overall performance by reducing initial load time.
Landing page
A landing page is a standalone web page designed for a specific purpose, such as capturing leads, promoting a product, or encouraging a call to action. It is typically focused on one goal to help drive conversions.
Lightbox
A pop-up gallery feature that elegantly displays images against a dimmed background. When you click a thumbnail, it smoothly expands to show the full-sized photo whilst darkening the rest of the page, creating an engaging way to showcase your visual content.
Logo
A graphical symbol or design used to represent a brand, company, or product, usually displayed prominently on a website.
Lottie
A lightweight animation format that allows designers to add complex, scalable animations to websites using JSON files, often resulting in faster load times.
Margin
The space around an element, outside its border. It separates elements and creates breathing room between them.
Masonry Gallery
A grid layout that arranges images or items in columns of varying heights, creating a “brickwork” style look for galleries.
Media Library
A media library is where digital assets like images, videos, audio files, and documents are stored and managed for use on a website.
Media Queries
Media queries are CSS rules that adjust a website’s appearance by applying different styles based on the device’s screen size, resolution, or orientation, making the site more responsive across various devices.
Mega Menu
A mega menu is a large navigation menu showing multiple options or categories. It’s often used on complex websites with many pages and subcategories to help users find what they need quickly.
Mockup
A mockup is a high-fidelity graphical representation of a website’s design showing the exact layout, colours, typography, images, and content placement before any development begins.
Modal
A focused interface element that appears centre-screen, typically dimming the main page beneath it. Commonly used for important messages, forms or images that require the user’s immediate attention.
Navigation
A structured list of links or buttons that helps users move between different sections of a website, typically appearing as a horizontal bar at the top of the page or a vertical list in a sidebar.
Padding
Padding is the inner spacing that creates breathing room between a web element’s content (like text or images) and its borders.
Pages
A web page is a section of a website that displays specific content, such as ‘Home,’ ‘About,’ or ‘Contact,’ and is accessed via a unique URL.
Pagination
Pagination refers to the process of dividing content into separate pages or sections, making it easier for users to navigate through large amounts of information. It is often seen in blogs, search results, or product listings, where users can click on page numbers or “Next” and “Previous” buttons to view more content.
Parallax
Parallax is a web design effect where background elements move slower than foreground content as users scroll, creating an illusion of depth and dimensional movement on the page.
A PDF (Portable Document Format) is a file format that preserves a document’s exact formatting, fonts, and images across all devices and platforms, ensuring consistent viewing regardless of the software or system used to open it.
Placeholder
A placeholder is a temporary element used in web design to reserve space for content that will be added later. It can be text, an image, or a graphic that indicates where the final content will appear.
Plugins
Plugins are software components that add specific features or functionality to a website, enhancing the site’s capabilities. For example, forms, galleries, SEO, security, or social media integration without altering its core code.
PNG
PNG (Portable Network Graphics) is a popular image format that supports lossless compression, meaning it retains image quality without losing data. It also supports transparent backgrounds, making it ideal for web graphics, logos, and images that require clear edges or overlays.
Portfolio
A portfolio is a collection of a professional’s best work displayed on a website. It usually includes examples of past projects to showcase skills, experience, and style to potential clients, customers or employers.
Posts
Posts are individual pieces of content, often displayed in reverse chronological order used for articles or news on websites or blogs. They can include text, images, and links.
Publish
Publish refers to the process of making content publicly available on a website. When content is published, it is moved from a draft or unpublished state to be visible to visitors on the site.
Pricing Table
A pricing table is a visual element in web design that compares pricing plans, features, and benefits, helping users choose the best option in an easy-to-use format.
Prototype
A prototype is an early version of a website or app used to visualise and test its layout and functionality before the final version is built.
Redirects
A redirect is a helpful tool that automatically sends visitors from one URL to another. The most common types are the 301 redirect, which is permanent, and the 302 redirect, which is temporary. These ensure that if a page moves or changes, users can still find it easily, and search engines can keep track of the changes for SEO purposes.
Responsive Design
Responsive design is a web design approach that ensures a website adapts and displays properly across different devices and screen sizes. It utilises flexible layouts, images, and CSS media queries to deliver an optimal user experience.
RGB
RGB (Red, Green, Blue) is a colour model used to create colours on digital screens by mixing different levels of red, green, and blue light. In web design, it’s used in CSS to define colours, with values from 0 to 255 for each colour (e.g., RGB(255, 0, 0) for red).
Search
In web design, search refers to a feature that allows users to look for specific content or information on a website. It usually involves a search bar where users can enter keywords whereby the site will display the relevant results.
Sidebar
A sidebar is a vertical section on the side of a web page that displays additional content, such as navigation links, recent posts, ads, or social media feeds. It provides quick access to extra information or features.
Sitemap
A sitemap is a visual or text-based outline of a website’s structure, showing the hierarchy of its pages and how they are linked together. It helps users and search engines navigate the site by illustrating the importance and organisation of each page.
Slider
A slider is a component that allows users to view multiple images, videos, or content in a sliding format, often with navigation arrows or automatic transitions. It is commonly used to showcase featured items, galleries, or promotions on a website.
Smooth Scroll
Smooth scroll is a feature that provides a seamless, animated transition when navigating to different parts of a web page, usually via anchor links. Instead of jumping directly, the page scrolls smoothly, improving the user experience.
Social Feed
A section on a website that displays updates or posts from social media platforms, allowing visitors to engage with your brand across multiple channels.
Social Share button
Social share buttons allow users to easily share website content, such as blog posts, products, or events, across social media platforms, helping to boost engagement and visibility.
Sticky Element
A sticky element in web design stays in the same spot on the screen as the user scrolls. It’s often used for things like menus or buttons, making them easy to access.
Stock Photos
Stock photos are ready-to-use professional images you can license for your business. From people and places to abstract concepts, they’re an affordable way to add high-quality visuals to your website, ads, and marketing.
SVG
SVG (Scalable Vector Graphics) is a file format for vector-based graphics that can be scaled to any size without losing quality. It’s lightweight and easily customisable with code for changes in colours, shapes, or animations. Perfect for logos and icons, SVGs offer flexibility and fast performance.
Tagline
A tagline is a brief, catchy phrase or slogan used to convey the core message or value proposition of a website, brand, or business. It typically appears prominently on the homepage, often near the logo or in the header section.
Themes
Themes are pre-designed website templates that control your site’s visual appearance and functionality. They include preset layouts, colours, fonts, and features that can be customised to suit your brand’s requirements. Most content management systems offer both free and premium themes.
Thumbnail
A thumbnail is simply a smaller version of an image or video that acts as a preview of the full content. It’s like a visual teaser that helps users quickly get an idea of what they can expect if they click on it. You’ll often see thumbnails in galleries, video libraries, or search results, where they help keep things organised and easy to navigate.
Toggle
A toggle is a user interface element that lets users switch between two states, such as on/off or show/hide, with a single click or tap.
Tooltip
A tooltip is a small pop-up that appears when a user hovers over an element, providing extra information or details.
Upload
Upload is the process of transferring files or data from a local device to a remote server or website. It is commonly used for submitting images or documents to websites or applications.
URL
A Uniform Resource Locator, or URL, is the address used to access a web page on the internet (e.g., https://www.example.com).
Usability
Usability refers to how easy and efficient it is for users to interact with a website or app, focusing on simplicity and a smooth user experience.
Video Background
A video background is a moving video that plays behind a website’s main content, adding visual interest and setting the tone while keeping the focus on the content.
Web font
Web fonts are fonts that are specifically designed to be used on websites. They are loaded from a web server rather than being installed on a user’s device, allowing for consistent typography across different browsers and devices. Examples include Google Fonts and Adobe Fonts.
Whitespace
Whitespace is the empty space around and between elements on a web page, such as text, images, and buttons. It helps improve readability, creates balance, and makes the design feel less cluttered, leading to a better user experience.
Widget
A widget is a small block of content or functionality that can be added to sidebars, footers, or other areas of a website. Widgets allow users to easily add features like search bars, recent posts, or social media feeds without code.
Wireframe
A wireframe is a basic layout that shows the structure and elements of a web page, such as navigation, content, and buttons, without any detailed design or graphics. It helps when planning the website’s functionality and user experience.
WOFF
A .woff (Web Open Font Format) is a font file format specifically designed for use on websites. It allows fonts to be embedded in web pages and loaded quickly by browsers.
WordPress
WordPress is a popular, user-friendly content management system (CMS) for building websites. It offers themes, plugins, and customisation options, making it ideal for blogs, business sites, and e-commerce.
Z-Index
z-index is a CSS property that controls the stacking order of website elements. Higher values appear in front of lower values. For example, you can set a higher z-index for a text box to make it appear on top of an image.
Did you find this glossary helpful?
If you’re ready to start your web design project or have any questions, I’d love to hear from you—Get in touch.
