University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Element

Element

Elements are individual HTML components that constitute a webpage’s structure and contents. Opening and closing tags define them, enclosing content between less than (<) and greater than (>) symbols. For example, a heading tag <h1> defines a heading on a webpage and looks like this:

<h1>The tag on the left is an opening tag, while the tag on the right is a closing tag.</h1>

Elements enable web developers and designers to organize a webpage’s content in a clear and visually appealing way. While elements don’t aid search engines like Google in crawling or indexing, their correct use can enhance a page’s structure, potentially improving its ranking on search engine results pages (SERPS).

Visit Webflow University to learn about how to design with elements and element hierarchy.

Relevant courses

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

Getting started with Webflow

Get familiar with Webflow’s website experience platform.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Welcome to Optimize

Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and the power of AI.

CSS styling

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Button

→
A button is an interactive element that facilitates user actions.

Slug

→
A slug, also known as a URL slug or a website slug, is descriptive text that appears at the end of a URL and identifies a web page.

Static page

→
A static page is a document with fixed content that makes up an individual web page on your site.

Free plan

→
The perfect Webflow subscription&nbsp;for getting started, giving you access to all Designer features, so you can start building a site right away.

Color wheel

→
The color wheel shows several colors in a circle to represent primary, secondary, and tertiary colors and their relationships.

Certificate authority

→
A certificate authority (CA), also known as a certification authority, issues digital certificates that verify a website’s owner.

Asynchronous

→
Asynchronous programming is an approach where programs simultaneously run multiple operations independently without waiting for previous tasks to complete.

Forms section

→
A section of the Add panel that houses form elements like inputs, checkboxes, and radio buttons.

Hotlink

→
A hotlink — also known as a remote or inline link — is a hyperlink that directs to a resource, such as an image or a file, without the owner’s explicit permission.

Component Module

→
A section in the Add Panel that houses pre-built Webflow elements such as sliders, tabs, and lightboxes.

Breadcrumb

→
A breadcrumb, or breadcrumb trail, is a navigational element representing a user’s current location within a website's hierarchical structure.

Undo

→
To move backward one step while making changes to a Webflow site.

Text link

→
A typography element that is used to link to other pages or sections of a webpage.

Client-side

→
Client-side is the user-facing part of a web app, responsible for processing user input and displaying content.

Call-to-action (CTA)

→
A call-to-action (CTA) is a website feature that prompts visitors to perform a specific action.

Authorized applications

→
Third-party applications that you've given access to your personal and/or website data.

Profile settings

→
The area where you can manage your profile, email settings, and security settings.

Width

→
Width defines how wide an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Item state

→
The default UI state for Collection lists, which displays the items in the Collection. It is the opposite of the empty state.

Bottom padding

→
Bottom padding is the space between the bottom of an element and its border.

Smoke test

→
A smoke test, also called build verification testing or confidence testing, is a preliminary examination to determine the basic functionality of a software, website, or application.

Widget

→
A widget is an interactive element embedded in a user interface that facilitates specific user actions or displays important information at a glance.

Total Site Pages

→
The amount of pages your site currently has.

Document object model (DOM)

→
The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

Flex-sizing

→
A flexbox property that determines the resizing behavior of flex children across viewport sizes. They can shrink, grow, or remain static.

CSS (Cascading Style Sheets)

→
Cascading Style Sheets (CSS) is a web development language that controls the appearance of elements on a webpage.

Contextual advertising

→
Contextual advertising is a form of paid advertising that matches web content with ad intent.

Div block

→
A generic element that is typically used to group content, or when no other element is specifically or semantically suitable. Div blocks have no effect on the content or layout until styled with CSS.

Password protection

→
Password protection is a security feature restricting certain website areas to authorized users, requiring a secret phrase or key to access them.

Reference field

→
A CMS field used in Collections. This powerful field allows you to link to other Collections within your website to populate fields in Collection lists and Collection pages.

Semantics

→
Semantics accurately represent the structure and purpose of content in computer languages, enabling web developers and programmers to ensure the written code produces an output legible to humans and machines.

Display: block

→
Display properties tell browsers how an element should behave on the page. The most common display property keyword category is display: block.

Hyperlink

→
Hyperlinks are clickable elements that allow users to navigate between web pages, documents, or other types of digital content.

Selector state

→
A pseudo-class that allows you to change the styles of an element when it is hovered, pressed, or focused.

Inheritance

→
Inheritance describes a principle where child elements adopt the style properties of parent elements.

Node title

→
The type of element you're working with, i.e., H1, link, button, etc.

Mutable

→
In JavaScript, mutable objects are dynamic elements that allow post-creation changes and modifications.

Mobile (landscape) breakpoint

→
A Webflow canvas setting that lets you create styles for viewports with a minimum width of 480px and a maximum width of 767px. Also known as the mobile landscape media query.

CRLF

→
On Windows-based systems, the sequence of two ASCII characters representing a line break in text files is called "Carriage Return, Line Feed," or CRLF.

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

Navbar

→
A navbar, or navigation bar, is an interactive user element with a menu or a set of links to a website’s main sections.

Flex-grow

→
The flex-grow CSS property defines how much an element grows relative to other flexible items inside the same flex parent.

Flex-direction

→
Flex-direction is a CSS property that defines the main axis and direction of flex items, dictating the arrangement of the items within a flex container.

URI

→
A Uniform Resource Identifier (URI) is a string of characters identifying an online resource.

Right margin

→
Right margin is a CSS property that defines the space between the right edge of an element and its surroundings.

Design mode

→
The mode that enables a designer to build in Webflow.

Margin

→
Margins are an essential spacing element of web design, dictating the amount of whitespace between a box and its surroundings.

Latency

→
Network latency is the time data needs to travel from one point to another, impacting the responsiveness and speed of web applications and services.

Webflow Editor

→
Webflow's visual content editor. You can access it through the Webflow Dashboard by clicking the “3 disclosure dots” on a site thumbnail, then clicking “Editor.” Guest editors can access it anywhere on their live site by adding ?edit after the page URL (e.g., yoursite.com/page/?edit).

Top margin

→
Top margin is a CSS property that defines the space between the top edge of an element and its surroundings, such as other elements, the browser window, or the edge of a container.

Child

→
A child element is an element nested within a parent element in a hierarchy.

Collection list layout

→
Lets you control how Collection items display inside a Collection list. The default layout option has each item covering the full width of the parent element. You can change this to display Collection items in 2, 3, 4, or 6 columns.

Facebook button

→
A Facebook button is a clickable element on a website that allows users to connect to or share content on the social media platform.

Video field

→
Available in CMS Collections. You can add videos via a link — not an embed code — from an online video host like Vimeo or YouTube. Just paste in the video link and it’ll appear in the native video format from the 3rd-party video player.

Flex-shrink

→
The flex-shrink CSS property defines how much an element shrinks relative to other flexible items inside the same parent element.

Adobe Fonts API token

→
An Adobe Fonts API token protects and supports your data from Adobe Fonts with other programs you may be using to personalize your website’s fonts.

Python

→
Python is a high-level, object-oriented, general-purpose programming language (GPL).

Tag

→
A Hypertext Markup Language (HTML) tag is a code snippet that defines and describes the structure and content of web pages.

User interface (UI)

→
A user interface (UI) is any visual element humans interact with on a device, webpage, or application.

Height: auto

→
The "height: auto" CSS property automatically adjusts an element’s height based on its content.

Custom domain hosting

→
A Webflow service that lets you point a custom domain to your Webflow-hosted site.

Gamut

→
Color gamut describes the full range of colors a device can reproduce on its display.

Bundling

→
Bundling, or bundle pricing, is a pricing technique in which retailers sell products together at a lower price than they would be sold at individually.

Accessibility tree

→
A webpage’s accessibility tree indicates which parts of the page are compatible with assistive technologies such as braille displays, screen readers, and voice commands.

Switch field

→
Available in CMS Collections. This field offers you a powerful filtering tool for Collection items. For example, you could create a switch labeled "Featured?" for Blog Posts, and then switch on the toggle to showcase particular posts.

Clickjacking

→
Clickjacking is when a malicious actor deceives website visitors into clicking buttons or links hidden in a fake layer to steal sensitive data or install malware.

Idempotent

→
Idempotency is a computing principle where multiple applications of a function or operation produce the same result as a single execution.

Page settings

→
You can manage your site pages within Page settings. Here, you can rename, duplicate, delete, or save pages as drafts. You can also set SEO, Open Graph, and site search settings, as well as insert custom code. Additionally, you can set RSS settings for Collection pages.

States dropdown menu

→
The dropdown menu to the right of the Selector field that allows you to access and change the styles of an element when it is hovered, pressed, or focused.

SVG (Scalable Vector Graphics)

→
Scalable Vector Graphics, or SVG, is a file format for displaying scalable vector graphics on the web.

Strong text

→
The&nbsp;&lt;strong&gt;&nbsp;element defines important text with added semantic&nbsp;importance.

Link

→
A link, short for hyperlink, is a clickable website element that enables navigation between different web resources.

Element

→
Elements are individual HTML components that constitute a webpage’s structure and contents.

Primitive

→
A primitive is the simplest JavaScript data type, representing fundamental values that do not encapsulate any object, method, or property.

Comment

→
A comment is a text note in source code that offers context, internal information, or other guidance to any developers using it.

Plain text field

→
A plain text field is an input field for short-form text without formatting or styling.

Editor toolbar

→
The toolbar that appears at the bottom of the Editor. From here, you can access the various Editor panels to manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

Flex-order

→
In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently on mobile than on desktop.

Username

→
The ID used to log into your Webflow account.

Bad neighborhood

→
Bad neighborhoods are groups of websites that search engines have downgraded because they violate search engine guidelines.

Link field

→
A link field is a form input field that enables you to add links to your designs dynamically. You can connect a link field to text links, buttons, or other link elements to turn them into active links.

Paginate items

→
This checkbox allows you to enable or disable pagination on the selected Collection list.

Registrar

→
A registrar, or domain name server (DNS) registrar, manages the sale of domain names and the assignment of IP addresses, ensuring each domain’s uniqueness.

Publish destination

→
The specific domain or subdomain where your Webflow site is displayed.

Image

→
A Webflow&nbsp;element that displays graphical files on your website.

Safe

→
"Safe" is a Hypertext Transfer Protocol (HTTP) method that doesn't modify the server's state or resources.

Style panel

→
The first tab in the right-side panel that allows you to assign classes to elements and style them.

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Section

→
A section is an element of design layout that divides a web page into visually distinct segments.

Content-first design

→
A design approach that prioritizes content planning and production in the design process.

Interpolation

→
Interpolation is a mathematical process that estimates and creates new values based on known values and their relationship.

Parent

→
The element directly above in the hierarchy tree.

Automagically

→
Automagically describes complex content or functions that appear as if they were created using magic.

Minified code

→
Minified code refers to the process of removing unnecessary characters and whitespace from the source code file without affecting its functionality.

Display: flex

→
The most flexible display property in CSS is the aptly named display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

Designer

→
The main interface where you can build sites.

External link

→
External links direct users to different websites and impact a site's search engine visibility and rankings.

Text block

→
A typography element that is used when no other element is specifically suitable.

Pixel

→
A pixel (px) is the smallest unit of measure in a digital image or display, representing a single point of color or light.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more