Expressive HTML5 tags

When it comes to website design, a meaningful element is an element with inherent meaning that effectively conveys that meaning to both the browser and the developer. HTML5 brought in expressive tags that empower you to establish the purpose of an element on your website. For instance, the Nav element defines navigation links, whereas the Main element identifies the primary content of a webpage (often referred to as “the document”). On the other hand, the Div element lacks inherent meaning, so Div blocks are not considered meaningful elements.

Utilizing Webflow enables you to incorporate these tags into your site design to enhance its accessibility and organization.

Throughout this tutorial, you will discover:

1. Instructions for leveraging expressive tags
2. The advantages of utilizing expressive tags

Tips for leveraging expressive tags

In Webflow, you can assign a variety of expressive HTML5 tags to your elements via the Element settingspanel. It is prudent to use expressive tags for any elements that serve a specific purpose and hold inherent meaning (e.g., headers, footers, navigation, etc.).

‍Top advice: By appropriately using each expressive element for its intended purpose, the browser can automate most of the work to enhance the accessibility of that element!

The expressive HTML5 tags available in Webflow include:

• Header — establishes a header for the document or a section typically positioned at the top of the page, serving an introductory function which may encompass heading elements, a logo, a search form, etc.
• Footer — specifies a footer for the document or a section, which might contain author information, links to related pages, etc.
• Nav — indicates a set of navigation links in the document. Frequently used for menus, tables of content, and indexes
• Main — defines the primary content of the document. The Main element should not comprise repetitive content such as navigation links, site logos, search forms, etc.
• Section — delimits a section of the document that groups content with similar themes together. Webflow’s section element is equipped with a Section HTML5 tag by default.
• Article — characterizes a self-contained composition on a page, like a forum post, newspaper article, or blog post
• Aside — designates content apart from the main page content, like a sidebar or a call-out
• Address — specifies the contact information for the author/owner of a document or an article‍
• Figure — distinguishes self-contained content (e.g., illustrations, diagrams, photos, code blocks, etc.)

To integrate an expressive tag into an element on your site:

1. Select the element on the Webflow canvas
2. Access the Element settings panel
3. Choose the suitable HTML5 tag for the selected element from the Tagdropdown

Essential: Certain elements, such as the navbar, feature predefined HTML5 tags, and elements like H1-H6 elements and lists have preassigned semantic meanings, preventing you from defining HTML5 tags for them.

The advantages of expressive tags 

Expressive tags are exclusively implemented for expressive purposes, without influencing your site’s visual design. However, they offer numerous significant benefits for designers, developers, and site visitors. 

For designers and developers

Expressive HTML5 tags distinguish meaningful elements from elements exclusively utilized for design, enhancing code readability and maintainability. They aid designers and developers in logically structuring site content and heading hierarchy. Additionally, HTML5 tags contribute to enhanced site performance and SEO, as semantic HTML often results in lighter file sizes compared to non-semantic code. Search engines prioritize keywords within semantic elements over those included in non-semantic elements like Div elements.

For accessibility 

While sighted users may intuitively recognize various webpage components based on visual design, visually impaired users or web crawlers face challenges in visually identifying and understanding website components. By semantically defining elements using expressive HTML5 tags, we inform web crawlers and assistive technologies (such as screen readers) about the different parts of a website, facilitating more accurate rendering and communication of elements to site visitors.

Learn more:

• HTML5 semantic elements and Webflow: the essential guide
• HTML: A good basis for accessibility
• Semantic HTML5 elements explained