Streaming live at 10am (PST)

Section (Layout) vs. Div Block (Basic): Which one to use for Semantic Markup and Page Layout?


#1

Hello @thesergie,

I have a specific scenario where I wanna use Header and Footer (HTML5 Semantic) and I am in a bit dilemma as to whether I should use Section and change the Tag respectively or I should use Div Block and change the tag similarly.

There are few things that I have noticed such as limitation of nesting and recognition of the elements inside Webflow. If I use a Section then I am unable to nest another Section inside it even if I change the Tag of the parent section. Also, change in Tag doesn't reflect change in element type in Webflow.

On the other hand, if I use a Div Block and change Tag, the change of element type is reflected in Webflow as well as there is no nesting limitation.

So, naturally, I wanna use the Div Block but having this uncertainty of actual differences between Section and Div Block inside of Webflow technically with a major concern of what will I be loosing if I use Div Blocks instead of Section and change the Tag to Section or some other semantic element as and when required?


#2

From what I can tell you can use either.

The section element used in Webflow is a div with a class "w-section". It doesn't seem to do anything other then provide a visual in the designer (could very much be wrong).

When you use either the Section block or the div block you are placing a div tag. When you select section from the html5 options you are converting that div tag to a section tag.

This is how the HTML tags would look;
< div class="w-section" >(Webflow section block)
< div > (Webflow div block)
< section > (HTML5 markup)

I don't know if I answered you question, but I hope this helps.

Alex


#3

Thanks for the reply @Davidn. Actually, I figured that much out myself and no, I can't use either due to the nesting limitation in Section (Layout). I am more interested in the technical aspect of why Webflow is not allowing nesting while using Section (Layout) element.


#4

Was very curious about the semantic issue as well! They are both divs. From what I have read on the tags it is exactly as Davidn describes and there should be no difference between a div with a section tag and a webflow section aside from the prohibited behavior of the webflow section.

I ran into the nested section issue for the first time this past week. In the designer you can apparently nest them with impunity, but in the navigator you get a warning and it prohibits the action. I thought maybe it was a new restriction, because I have been nesting sections out of ignorance for 6 months. It made it a giant pain as I had to reconstruct and re-nest, relink and reconnect IX on all content to fix a site that was near completion originally built with nested sections. The site uses a page wrapper div that encompasses almost all of the content to enable z-index and a fixed footer. Same boat... Would appreciate some guidance on how to set it up properly if it is against the rules to nest a section in any other element (div). That is the nagging disturbing question to me. I see sites with page wrappers all the time.


#5

Published a simple version for side by side comparison in the web inspector. The only notable property difference is that for any item that contains the tag inherits:

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block
}

all receiving the block element designation.

section vs div without the tag has no change at all that I can see in the html or css. In fact the webflow section still requires you to designate the section tag manually if you want it to be designated as section in the HTML markup, otherwise a weblow section shows up as a div with only the .w-section class. Zero change in the css from an ordinary div aside from the obvious warning in the navigator section of the designer - it does not automatically add the section tag.

I am more confused by what purpose it serves to gain a class with no properties or tags. Why should you use the webflow section rather than just a div with the section tag?

<div class="w-section section"></div>

#6

Exactly @vlogic, if we are using a div with class for the purpose of section or some other tag such as footer or header then we're back to the likes of HTML4.


#7

Thank you for your comment @shyam. From what I am reading elsewhere I think I understand your point. I am just not understanding the illegal nature of nesting a section within a div.

If I define my page using section tags for the purpose of defining sections of like content on the same subject. Why is wrapping those sections in a div for efficient page formatting, global page margins and a common z-index considered illegal or bad form by webflow? Webflow generates an error message that sections should not be nested (in anything). I am not talking about nesting a section within another section - a section within a div.


#9

Hi @shyam, This may have been touched on in earlier responses, but to clear things up:

(1) Use Webflow Sections to build main content areas in your site.
(2) Use Div Blocks with the Section tag assigned to it for HTML5 Sections as outlined here: http://www.w3.org/TR/html5/sections.html#the-section-element


#10

I'm wondering the same thing. vlogic is right. The "section" element in webflow is merely an ordinary div with a .section class. The spec that

mentioned explicitly states that html section elements are NOT the same as div elements.


#11