Streaming live at 10am (PST)

How can I force the nesting of Webflow sections in order to maintain proper semanics and SEO?

Hi,

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?

Thanks in advance.

Bump.

Anyone able to help?

Does changing the tag type in the settings tab work for you?

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.

That is not correct. What you can’t do is nest “Sections”. You can create any structure you want using DIVs and then setting the properties as needed.

1 Like

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.

Did you watch the video? I showed setting DIVS to valid HTML5 elements.

Ah no, I wasn’t in a position to watch the video, but I did just now.

Thanks for the solution. That’ll work.

Why is it that Webflow will disallow the placement of semantic HTML elements into other semantic HTML elements, unless a DIV is used as a workaround?

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.
Shared with CloudApp

2 Likes