Prefer English?
Prefer English? Switch the website language for a better experience.
Webflow just rethought a gesture you repeat hundreds of times per project: choosing the right structural element. No more hesitating between Div Block, Section, Container, Columns, Grid, V Flex and H Flex. Enter the Box element, a single element whose HTML tag becomes a simple setting, changeable at any time.
In practice, you add a Box and choose its tag: div, section, nav, header, footer, main, article, aside, address or figure. You can change your mind along the way without deleting or recreating the element. Your structure stays intact, only the semantics evolve.
In the Navigator, each semantic tag now displays its own icon and its own name. Your tree instantly becomes more readable, even on a complex project with multiple nested sections.
The feature that comes with the Box element might actually be even more strategic: the massive expansion of tag selectors. These selectors work like a type selector in plain CSS: you style a tag once, and every element carrying that tag inherits the style.
Webflow now extends this principle to div, section, nav, header, footer, main, article, aside, address, button, input, textarea, select and many more. A Box set to "section" automatically picks up your "All Sections" styles. Styling "All Divs" also applies to any Box configured as a div.
Reassuring point: these new selectors start out completely empty. No existing style is applied by default, so your site keeps its current look as long as you do not deliberately touch anything.
Your current elements keep working normally. They are simply hidden in the Add panel in favor of the Box, without disappearing from your existing projects. A Div Block published before this update still renders as a div, exactly like a Box set to div published after it.
Searching in Quick Find also becomes more direct: type "box", "div", or the name of a tag like "address", and Webflow inserts an already preconfigured Box with the right tag. A real time saver during page assembly, especially on structures rich in HTML5 semantics.
Another notable point for technical teams: the Box element is fully accessible through Webflow's Designer API and MCP server. The getTag() method lets you check the HTML tag of a Box, including on custom elements. A door opened toward more advanced automation workflows.
| Before | With the Box element |
|---|---|
| 6 separate elements (Div, Section, Container, Columns, Grid, Flex) | 1 single element, adjustable tag |
| Changing tag = recreating the element | Changing tag = a simple setting |
| Styles tied to the chosen element | Styles tied to the HTML tag, via tag selectors |
| Navigator hard to read on complex structures | Dedicated icon and name per semantic tag |
{{webflow}}
At Mazette.co, we follow this kind of evolution with a particularly watchful eye, because it touches the very foundation of every site we build: the HTML structure. And on this one, Webflow gets it right.
Merging everything into a single element solves a real everyday annoyance. How many times have we seen junior designers hesitate between Section and Container, or pile up Div Blocks where a Grid would have made more sense? That choice friction, invisible to the end client, cost production time and sometimes resulted in HTML structures less clean than they should have been.
The real business benefit lies on the SEO and accessibility side. Richer, easier-to-apply HTML semantics mean pages better understood by search engines and assistive technologies. For our clients, that is a silent but real gain, with no extra effort on our part, simply because the tool makes the right reflex easier than the path of least resistance.
Tag selectors, for their part, bring Webflow even closer to classic CSS logic, designed for designers as much as for the developers who work on our projects. This is exactly the kind of evolution that makes Webflow design more rigorous without making it more complex. We also appreciate the full backward compatibility: no existing site breaks, no forced migration. This is the kind of transition we would like to see more often in the no-code ecosystem.
One minor downside: the adjustment period for teams very used to the old elements. But the learning curve stays gentle, and the medium-term gain far outweighs the small effort of relearning.
{{seo-aeo}}
If you are starting a new site, you might as well adopt the Box element directly rather than the older elements, now pushed to the background. On an existing project, there is no rush: your Div Blocks and Sections keep working normally, and you can transition progressively, section by section.
For agencies and product teams working with structured design systems, this is also a good opportunity to revisit your style library and use tag selectors to build a sturdier foundation, closer to web standards. A project worth planning upfront rather than improvising along the way.
If you want to check whether your current structure fully benefits from these updates, or rethink your site's architecture with this semantic logic from the design stage onward, our team remains available to discuss it on Mazette.co's contact page.
Code
Over 120 companies have already stepped out of the shadows with us.
Simply open the Add panel and search for "box", "div", or directly the name of a tag like "section" or "nav". Webflow then inserts a Box already configured with the desired HTML tag. You can also go through the Designer API or the MCP server to create and control Boxes in an automated way.
A Div Block only publishes a div tag, whereas a Box can take the form of div, section, nav, header, footer, main, article, aside, address or figure, changeable at any time without swapping the element. A Box set to "Div" publishes exactly the same output as an old Div Block, so there is no technical break. Older elements like Section or Container remain functional but are now hidden in the Add panel.
No, the new tag selectors start out empty, so your site keeps exactly the same look as long as you do not touch anything. As soon as you style "All Divs" for example, it also applies to any Box set to the div tag. It is a risk-free switch you can activate project by project.
Impactful titles, polished meta descriptions, sitemaps, Schema.org, Hn structure, and audits: these are the SEO foundations that make your content readable by both Google AND generative AI. We cover both simultaneously.
With over 180 clients, our agency is one of the few in France to hold the Webflow Premium Partner label, supporting you in every area, including custom web design, sophisticated automation, conversion optimization, and SEO and GEO visibility.
We create bespoke web designs focused on performance, user journeys, and conversion. Join over 180 clients who have trusted us to elevate their brand.
