Webflow Box element: what the new layout element changes and which HTML tags actually matter

What did Webflow change on October 13?

Webflow merges Div Block, Section, Container, Columns, Grid, V Flex and H Flex into a single Box element. You pick which HTML tag ends up in the code in the element settings, and you can switch it at any time without swapping out the element. There are ten tags to choose from: div, section, nav, header, footer, main, article, aside, address and figure.

On top of that, Webflow adds 19 new global tag selectors. They let you define base styles once per tag, for example for every section, every button or every input field, much like a type selector in CSS. Both features are available to anyone with the Designer role, on every plan including Free.

Do I need to change anything on existing sites?

No, not right away. Your old elements keep working, Webflow just hides them in the Add panel. A Box set to div publishes exactly like a Div Block, and the new tag selectors start empty. According to Webflow, your site therefore looks the same until you change one of them.

You only need to be careful once you edit a tag selector. A style on the div selector hits every element rendered as a div, including wrappers inside components, forms and embedded widgets. Our take: use the div and section tag selectors only for things that really should apply everywhere, such as box-sizing or a default text color. Spacing and layout still belong in classes.

Which HTML tags actually help screen readers?

Only some of the ten tags create a so-called landmark. Landmarks are reference points that screen reader users can jump to with the keyboard instead of listening to the page line by line. The rules are spelled out in the W3C guide to landmark regions:

That leads to two common mistakes in Webflow projects. First: if you put the navbar inside a Section and give the wrapper the header tag, you get no page header, because a header inside a section is not a banner landmark. Second: a page built from twelve section tags looks tidy in the code, but to a screen reader it contains not a single region as long as the sections have no name.

One more detail on naming: don't put the role name in the label. If you call the navigation "Main navigation", the screen reader announces "Main navigation navigation". "Main" is enough.

How does this relate to accessibility law?

Semantic structure is not an extra, it is part of the minimum level. Success criterion WCAG 1.3.1 "Info and Relationships" at Level A requires that structure you can see is also machine readable. The W3C explicitly lists semantic HTML elements for page regions as a sufficient technique. Who falls under the Barrierefreiheitsstärkungsgesetz (Germany's accessibility law implementing the European Accessibility Act) is covered in our web design trends 2026.

Our take: the Box element makes the right tag the smallest possible step in the Designer. That removes the most common excuse for Webflow pages built from nothing but divs.

What does this mean for you?

For most sites, a one-time check per page template is enough:

1. Main content: Is there exactly one wrapper set to main that encloses everything between header and footer?
2. Header and footer: Do header and footer sit outside section, main and article? A surrounding div does no harm.
3. Navigation: Does every nav have its own name when there is more than one (main menu, footer menu)?
4. Sections: Do important areas need their own region? Then add an aria-label as an attribute. Otherwise a section without a name is fine as plain structure.
5. Tag selectors: Standardize form fields and buttons first, and touch div and section only sparingly.
6. Check: Look at the page with a screen reader or the accessibility tree in your browser's developer tools and review the list of landmarks.

Whether clean structure also helps with Google or in AI answers is something Webflow does not back up in its announcement. Our take: it never hurts, but it does not replace clear headings and content. What does count is covered in our article on AI SEO.

What changes for Designer API scripts and apps?

One check breaks. According to the Webflow developer docs, the Section preset no longer returns an element of type Section but one of type Block. Code that checks for type equal to Section will come up empty. Going forward, you read the tag with getTag(). The presets DivBlock, Section, BlockContainer, Grid, Row, HFlex and VFlex are deprecated but still work. According to Webflow's announcement, Box elements can also be created through Webflow's MCP server, meaning by AI assistants.

How does this fit with the library tag styles from October 7?

A week earlier, Webflow made it possible to share tag styles through libraries. The order of precedence: classes beat everything, then come the site's tag styles, and only then the library's. Library tag styles can't be edited on the receiving site, changes go through the source site. This is available on all paid Workspace plans.

Together, that gives companies with several Webflow sites a clean path: define base styles for forms, buttons and sections once in the library and roll them out the same way everywhere. If you want help with that, take a look at our Webflow services.