Webflow Box-Element: Was das neue Layout-Element ändert und welche HTML-Tags wirklich zählen

Was hat Webflow am 13. Oktober geändert?

Webflow fasst Div Block, Section, Container, Columns, Grid, V Flex und H Flex zu einem einzigen Box-Element zusammen. Welcher HTML-Tag am Ende im Code steht, wählst du in den Einstellungen des Elements und kannst ihn jederzeit wechseln, ohne das Element auszutauschen. Zur Wahl stehen zehn Tags: div, section, nav, header, footer, main, article, aside, address und figure.

Dazu kommen laut Webflow 19 neue globale Tag-Selektoren. Damit legst du Grundstile einmal für einen Tag fest, etwa für alle section, alle button oder alle input-Felder, ähnlich einem Typselektor in CSS. Beides steht jeder Person mit Designer-Rolle zur Verfügung, in jedem Tarif einschließlich Free.

Muss ich an bestehenden Websites etwas tun?

Nein, zunächst nicht. Deine alten Elemente funktionieren weiter, Webflow blendet sie nur im Add-Panel aus. Eine Box mit div wird genauso veröffentlicht wie ein Div Block, und die neuen Tag-Selektoren starten leer. Laut Webflow sieht deine Website deshalb gleich aus, bis du einen davon änderst.

Aufpassen musst du erst, wenn du einen Tag-Selektor bearbeitest. Ein Stil auf dem Selektor für div trifft jedes Element, das als div ausgegeben wird, also auch Wrapper in Komponenten, Formularen und eingebundenen Widgets. Unsere Einschätzung: Tag-Selektoren für div und section nur für Dinge nutzen, die wirklich überall gelten sollen, etwa box-sizing oder eine Standard-Schriftfarbe. Abstände und Layout gehören weiter in Klassen.

Welche HTML-Tags helfen Screenreadern wirklich?

Nur ein Teil der zehn Tags erzeugt eine sogenannte Landmark. Das sind Orientierungspunkte, zu denen Screenreader-Nutzer per Tastatur springen können, statt die Seite Zeile für Zeile durchzuhören. Die Regeln dafür stehen im Leitfaden des W3C zu Landmark-Regionen:

Daraus folgen zwei typische Fehler in Webflow-Projekten. Erstens: Wer die Navbar in eine Section legt und dem Wrapper den Tag header gibt, bekommt keinen Kopfbereich, weil header in einer section keine banner-Landmark ist. Zweitens: Eine Seite aus zwölf section-Tags sieht im Code ordentlich aus, ist für den Screenreader aber keine einzige Region, solange die Sections keinen Namen tragen.

Und ein Detail zur Benennung: Den Rollennamen nicht ins Label schreiben. Heißt die Navigation „Hauptnavigation“, sagt der Screenreader „Hauptnavigation Navigation“. „Haupt“ reicht.

Was hat das mit dem Barrierefreiheitsstärkungsgesetz zu tun?

Semantische Struktur ist kein Extra, sondern Teil der Mindeststufe. Das Erfolgskriterium WCAG 1.3.1 „Info and Relationships“ auf Level A verlangt, dass Struktur, die man sieht, auch maschinell erkennbar ist. Als ausreichende Technik nennt das W3C ausdrücklich semantische HTML-Elemente für Seitenbereiche. Für wen das Barrierefreiheitsstärkungsgesetz gilt, haben wir in unseren Webdesign-Trends 2026 eingeordnet.

Unsere Einschätzung: Das Box-Element macht den richtigen Tag zum kleinsten Handgriff im Designer. Damit fällt die häufigste Ausrede weg, warum Webflow-Seiten nur aus div bestehen.

Was heißt das für dich?

Für die meisten Websites reicht eine einmalige Prüfung pro Seitenvorlage:

1. Hauptinhalt: Gibt es genau einen Wrapper mit main, der alles zwischen Kopf und Fuß umschließt?
2. Kopf und Fuß: Liegen header und footer außerhalb von section, main und article? Ein umschließender div stört nicht.
3. Navigation: Hat jede nav einen eigenen Namen, wenn es mehrere gibt (Hauptmenü, Footer-Menü)?
4. Sections: Brauchen wichtige Bereiche eine eigene Region? Dann ein aria-label als Attribut setzen, sonst reicht section ohne Namen als reine Gliederung.
5. Tag-Selektoren: Erst Formularfelder und Buttons vereinheitlichen, div und section nur sparsam anfassen.
6. Kontrolle: Seite mit einem Screenreader oder dem Barrierefreiheitsbaum der Browser-Entwicklertools ansehen und die Landmark-Liste prüfen.

Ob eine saubere Struktur auch bei Google oder in KI-Antworten hilft, belegt Webflow in der Meldung nicht. Unsere Einschätzung: Sie schadet nie, ersetzt aber keine klaren Überschriften und Inhalte. Was dafür zählt, steht in unserem Artikel zu SEO mit KI.

Was ändert sich für Designer-API-Skripte und Apps?

Eine Prüfung bricht. Laut Webflow-Entwicklerdokumentation liefert das Section-Preset kein Element vom Typ Section mehr, sondern eines vom Typ Block. Code, der auf type gleich Section prüft, läuft dann ins Leere. Den Tag fragst du künftig mit getTag() ab. Die Presets DivBlock, Section, BlockContainer, Grid, Row, HFlex und VFlex gelten als veraltet, funktionieren aber noch. Laut Webflow-Meldung lassen sich Box-Elemente auch über den MCP-Server von Webflow anlegen, also durch KI-Assistenten.

Wie passt das zu den Library-Tag-Styles vom 7. Oktober?

Eine Woche zuvor hat Webflow ermöglicht, Tag-Styles über Libraries zu teilen. Die Rangfolge: Klassen schlagen alles, danach kommen die Tag-Styles der Website, erst dann die der Library. Auf der Zielseite lassen sich Library-Tag-Styles nicht bearbeiten, Änderungen laufen über die Quellseite. Das gibt es in allen bezahlten Workspace-Plänen.

Zusammen ergibt das einen sauberen Weg für Unternehmen mit mehreren Webflow-Sites: Grundstile für Formulare, Buttons und Bereiche einmal in der Library festlegen und überall gleich ausrollen. Wenn du dabei Unterstützung willst, schau dir unsere Webflow-Agentur an.