Set semantic HTML5 tags on elements to improve your site’s accessibility and structure.
In web design, a semantic element has inherent meaning that it communicates to both the browser and the developer. HTML5 introduced semantic tags that 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 webpage (also called the document). In contrast, the Div tag has no semantic meaning, so an element that uses the Div tag isn’t a semantic element.
With Webflow, you can add these tags to elements in your site design to improve your site’s accessibility and structure.
Webflow lets you add a number of semantic HTML5 tags to your elements from the 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). If you use each semantic element for its intended purpose, the browser does 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, which shouldn’t contain repeated content like navigation links, site logos, or search forms
-
Section — defines a section of the document that groups content with similar themes together. To add a section, add a Box and choose the Section tag.
-
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 or owner of a document or an article
-
Figure — defines self-contained content (e.g., illustrations, diagrams, photos, code blocks)
To add a semantic tag to an element on your site:
- Select the element on the Webflow canvas
- Go to the Settings panel
- Click the Tag dropdown and choose the HTML5 tag that fits the selected element
When you set a tag on an element, the Navigator shows that tag’s name and icon, so you can see the structure of your page at a glance. An element with the Div tag shows as “Div”, and an element with the Section tag shows as “Section”.
You can style every element that uses a semantic tag at once with a tag selector, such as All Sections or All Headers. Learn more about HTML tags.
Important
Some elements, such as the navbar, have predefined HTML5 tags, and some elements, like H1 to H6 elements and lists, have predefined semantic meanings, so you can’t define HTML5 tags for them.
Semantic tags are only used for semantic purposes, so 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 you structure site content and heading hierarchy logically and properly.
As an added bonus, HTML5 tags contribute to better site performance and SEO. 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 inside non-semantic elements, like Div elements.
For accessibility
Sighted site visitors can often identify the parts of a website from its visual design. For site visitors with visual disabilities like blindness, or for machines like web crawlers, it’s difficult or impossible to identify the parts of a website visually and understand what they mean or how they work.
When you define elements with semantic HTML5 tags, you tell web crawlers and assistive technologies, like screen readers, what the parts of a website are, so they can render or communicate elements to site visitors more accurately.
Learn more: