In web design, a semantic element is an element with intrinsic or inherent meaning which represents that meaning to both the browser and the developer. HTML5 introduced semantic tags that allow you to define an element’s purpose on your site. For example, the Nav tag defines navigation links, and the Main tag defines the main content of a web page (also called “the document”). In contrast, the Div tag has no semantic meaning, so Div blocks aren’t considered semantic elements.
With Webflow, you can add these tags to elements in your site design to improve your site accessibility and structure.
In this lesson, you’ll learn:
How to use semantic tags
Webflow lets you add a number of semantic HTML5 tags to your elements from the Element settings panel. It’s best practice to use semantic tags for any elements that serve a specific purpose and have an intrinsic meaning (e.g., headers, footers, navigation, etc.).
Pro tip: If you use each semantic element for its intended purpose, the browser will do most of the work to make that element accessible!
Webflow’s available semantic HTML5 tags include:
- Header — defines a header for the document or a section that’s typically at the top of the page and meant to be introductory, which might contain heading elements, a logo, a search form, etc.
- Footer — defines a footer for the document or a section, which might contain author information, links to related pages, etc.
- Nav — defines a set of navigation links in the document. Commonly used for menus, tables of content, and indexes
- Main — defines the main content of the document. The Main element should not contain repeated content like navigation links, site logos, search forms, etc.
- Section — defines a section of the document that groups content with similar themes together
- Article — defines a stand-alone composition on a page, like a forum post, newspaper article, or blog post
- Aside — defines content aside from the page content, like a sidebar or a call-out
- Address — defines the contact information for the author/owner of a document or an article
- Figure — defines self-contained content (e.g., illustrations, diagrams, photos, code blocks, etc.)
To add a semantic tag to an element on your site:
- Select the element on the Webflow canvas
- Go to the Element settings panel
- Click the Tag dropdown and choose the appropriate HTML5 tag for the selected element
Important: Some elements, such as the navbar, have predefined HTML5 tags, and some elements, like H1-H6 elements and lists, have predefined semantic meanings, so you won’t be able to define HTML5 tags for them. However, Webflow’s section element doesn’t have a predefined Section HTML5 tag, so you’ll need to manually define HTML5 tag on section elements.
The benefits of semantic tags
Semantic tags are only used for semantic purposes — that is, they have no effect on your site’s visual design. However, they have many important benefits for designers and developers, as well as for site visitors.
For designers and developers
For designers and developers, semantic HTML5 tags differentiate semantic elements from elements used solely for design and make code more readable and maintainable. They also help designers and developers structure site content and heading hierarchy logically and properly.
As an added bonus, HTML5 tags contribute to better site performance and SEO, as semantic HTML is often lighter in file size than non-semantic code, and search engines give more importance to keywords inside semantic elements than keywords included in non-semantic elements (like Div elements).
For sighted site visitors, it can be intuitive to identify the various parts of a website based on their visual design — but for site visitors with visual disabilities like blindness, or machines like web crawlers, it’s difficult or altogether impossible to visually identify the various parts of a website and what they mean or how they work.
By defining elements semantically with semantic HTML5 tags, we tell web crawlers and assistive technologies (like screen readers) what the parts of a website are, so they can render elements and/or communicate elements to site visitors more accurately.