What is The Difference Between Containers and The Traditional Section/Column?

The way we structure and divide up content on web pages has evolved over time. In the early days of the web, pages were built using HTML tags like <div> and <table> to section off content into blocks and columns. This approach was rigid and inflexible. Recently, Elementor introduced newer methods like CSS grid and flexbox have enabled a more modular approach to page structure using containers. This container-based approach offers greater flexibility and responsiveness when designing web pages.

But should containers completely replace the older approach of using HTML sections and columns? In this post, we'll look at the key differences between traditional web sections and newer, container-based approaches. We'll compare the benefits and downsides of each system. Understanding the strengths of containers and sections allows developers to use the best structural approach for their specific content and layout needs. With the right balance, both containers and sections can complement each other in building robust website architectures.

Defining containers and sections/columns

Let's start by clearly defining what we mean by sections/columns and containers when talking about page structure.

Sections/Columns

The traditional way of dividing up content on a web page is through the use of HTML tags that section off content into distinct blocks. Tags like <div>, <section>, <article>, <header>, <footer> etc. allow you to divide the page into columns and sections.

For example, you may use <header> for the top navigation bar, <section> for the main content body, <aside> for a sidebar, and <footer> for the bottom elements. These HTML elements create fixed containers for specific content types.

Containers

Containers take a different approach, using CSS properties like Flexbox and CSS grid to divide the page into structural modules or boxes. These containers have adjustable widths and positions, making the layout more flexible and responsive.

Instead of <div> tags, developers can use classes like ".container", ".header", and ".sidebar" to define reusable, modular components. Containers aren't tied to specific content types like sections. The focus is on creating a flexible box model.

This allows for more customizable and adaptive page layouts compared to the more rigid sections created with HTML tags.

Why Use Containers?

Containers allow you to quickly create web page layouts and group widgets. This enables you to control how your content is displayed and streamline your web-building workflows.

By using Flexbox Containers, you can improve page speed through leaner code, gain finer control over responsiveness, and more easily create complex layouts. With container templates, you can create templates to use on other parts of your website.

Containers are a stable Elementor experiment, they will be active by default on new sites or you can activate them for existing sites from the WordPress dashboard. Here are some benefits of using containers.

Responsiveness

When designing web pages, it's important to consider both page loading performance and how the content adapts across devices and screen sizes. Using containers allows for greater control over responsiveness and content display compared to traditional sections.

With containers, elements can be grouped in ways that optimize their order and visibility for different platforms. This avoids inefficiently stacking hidden elements, and creates a smoother responsive experience. Containers give designers flexibility to define exactly how content should reflow or shift layouts on varying viewports.

Overall, leveraging containers in addition to sections improves user experience through enhanced cross-device optimization. Containers enable precise management of display behaviors and content priority as screen sizes change. This results in fast-loading pages that intelligently adapt their layout for optimal viewing on every device.

Layout Control

Containers provide greater flexibility for optimized design and complex layouts compared to traditional row/column sections. Since containers are not limited to a grid structure, designers have more fine-grained control over sizing and positioning.

You can customize container dimensions, and nest containers within other containers. This modular "container in container" approach makes it easy to build sophisticated page templates with reusable components. Designers can create and apply templates for recurring elements like headers, sidebars etc. This ensures continuity across the site.

In contrast, sections can only divide content into distinct blocks in a linear document flow. The row/column grid limits layout options. Containers lift these constraints, enabling truly customizable responsive behavior and reusable template modules.

Page speed

Using containers instead of sections for page design can help improve page loading speed. Containers minimize the number of dividers and structural HTML elements required compared to sections.

Sections often have many nested columns, rows, and sub-sections that increase the complexity of the DOM tree. More complex DOMs result in slower page loads due to larger file sizes and more resource requests.

Containers simplify the backend code and DOM structure by reducing unnecessary dividers. The leaner DOM means faster construction of the page when loaded in the browser.

To optimize page speed, inspect your site's DOM tree in Developer Tools and look for opportunities to consolidate sections into containers. Removing excess containers directly streamlines the DOM for faster page loads.

Hyperlinking

Containers offer more flexibility for links compared to sections. Entire containers can be made clickable using HTML anchor tags, causing the whole module to act as a linked button.

This is useful for containers with call-to-action imagery. In the past, custom code was needed to make a full column clickable. With containers, turning any module into a seamless hyperlink is as easy as adding an anchor tag.

Sections do not directly support this clickable capability. The only options for section links are individual text or media elements within a section.

By enabling container-level linking, containers make it simpler to create effective calls-to-action and improve site navigation. This expansive linking potential exceeds the constraints of standard sections.

Drawbacks Of Using Container

Here are some potential drawbacks of using containers instead of sections:

• Less semantic meaning - Sections created with HTML5 tags like <header>, <footer> etc. have inherent semantic meaning and SEO benefits. Containers lose this contextual meaning for screen readers and search engines.
• Steeper learning curve - Containers require knowledge of CSS grid and flexbox to create complex layouts. These are newer skills versus simple sectioning with divs. The learning curve may be steeper.
• Browser compatibility issues - Older browsers may not fully support all features of CSS grid and flexbox. Layouts may break or be inconsistent across browsers. Sections work reliably across all browsers.
• More effort for simple layouts - For basic, linear page structure, sections provide an easy way to divide content that may be overkill for containers. Containers shine for complex pages.
• Specificity challenges - Heavy use of containers can lead to CSS specificity conflicts. More debugging effort may be required. Sections have cleaner cascading styles.
• Harder to visualize structure - The nested nature of containers may make the page layout and relationship between elements less intuitive. Sections provide clearer visual divisions.
• Risk of overuse - Containers enable so much flexibility that it may be tempting to over-engineer layouts. Restraint is needed to keep it simple when appropriate.

In summary, containers unlock advanced responsive capabilities but require more design consideration to maximize their benefits while mitigating any downsides.

Wrapping Up

As we've explored, both sections and containers offer advantages for structuring web page content. Sections provide an easy way to semantically block out distinct content areas and establish a clear visual hierarchy. Containers enable more modular and customizable layouts using advanced CSS capabilities like flexbox.

Knowing when to use sections versus containers allows you to leverage the benefits of each approach. For most websites, a combination of both will prove optimal. Sections can establish the overall page outline and higher level content blocks. Containers can then provide flexible modules for complex or responsive components like headers, sidebars, footers, etc.

Page builder tools like Elementor have started integrating containers as an option alongside traditional sections. This makes it easy for web designers to harness the power of containers within an intuitive drag-and-drop interface. For example, templates created with Elementor containers can be reused across other container areas.