In Webflow, elements like “nav”, “header”, “article” etc. are all considered to be variants of the “section” object.
In order to maintain proper HTML semantics and also for SEO optimization, I need to be able to place nav elements inside headers, headers inside articles and articles inside sections.
How can I force the structure that I want given that Webflow won’t allow you to nest any of the above mentioned elements inside each other?
It doesn’t. Webflow won’t allow for any of the semantic HTML5 tags to be nested, which is very problematic given that they need to be nested for good HTML semantics.
Unfortunately DIVs are not a solution since they’re not semantic HTML elements. My question is not about layout structure, it’s about HTML semantics.
Being able to nest semantic HTML elements (e.g. section, nav, header, footer, aside) is integral to contemporary HTML and is important for maintaining a semantically correct website. Semantics affect both accessibility and SEO, so it’s not something that can be solved with DIVs.
A Webflow “Section” is not a HTML5 <section>; rather a DIV that has special values and the designer does not allow nesting of it. Most of us don’t use it and prefer to use the approach I demonstrated. Using DIV’s as the building block and setting the tag does allow for nesting. https://share.getcloudapp.com/qGuNp6Zw