Streaming live at 10am (PST)

Icons in Navigator

Hi,

I was wondering what the different squares next to “Section” and “Container” mean in the Navigator? At first, I thought those that had a class assigned had a regular square icon and those that didn’t have the square with lines, but that does not seem to be the case.

Thanks!

I believe the section icon has those lines to suggest that it is 100% width, where a container or basic div doesn’t necessarily span the whole screen width.

Welcome to the community @supershinysea!

The square icons represent div elements—with “Section” and “Container” representing the class name. These div elements are the building blocks of all of the structure you see on the web.

While the class name is the same, it’s important not to confuse these with the Webflow-specific elements like section or container—these are just div elements with special pre-applied styles to make them behave in certain ways out of the box. To prevent any confusion with class names, each element type has its own icon. In your screenshot, the fourth section icon represents the Webflow section element.

If you come from a web development background, it’s worth noting that the section element (strangely) does not relate at all to the Semantic Element type with the same name—all Semantic Tags can be set, on any element, within the Element Settings panel:

Hopefully that helps clarify things, but don’t hesitate to reach out if you have any other questions :+1:

Thank you for the detailed information!