Students may have a problem grasping is the need for a wrapper div. I frequently find myself explaining it numerous times until the message finally sinks in.
The metaphor I’ll use today will be to compare a wrapper div to a fence.
A wrapper div, or a container div, has no semantic meaning. It’s a generic container. Therefore, <div> is the proper tag. A <section> element should not be used as a container. [See: Sections and Articles are Not Generic Containers]
What does a fence do?
- It demarks the edges of your property.
- It contains animals or children within a prescribed area. It keeps them from getting out.
- It creates a border between one area and another.
- It can be plain or decorative.
A wrapper div in an HTML document does the same things but to a layout instead of to actual property.
- The wrapper holds a design within certain boundaries.
- The various areas of a design cannot escape from the boundaries set by the wrapper.
- A max-width or min-width or varying width based on an @media query can be set for the wrapper that makes it size a design responsively.
- The id identifying a wrapper provides a CSS hook which enables more than size constraints. Borders and other decorations can be added.
With a wrapper div in place, a layout can be centered on the page. The width of the design can be controlled for easier reading and line-length.
It’s necessary to create the wrapper with a div and an id:
<div id="wrapper">everything on the page goes in here</div>
One of the principles of HTML5 is to pave the existing cow paths. Hence we have all sorts of new semantic elements like header, main, and footer that were once created using the same div with an id technique.
If wrappers are so great, why isn’t there a new HTML5 element called wrapper? I don’t know the answer for sure, but I’m guessing it’s because a wrapper is not a semantic element. It’s merely a container, a boundary into which you place all your semantic content.
By the same token, there is no ARIA landmark role for wrapper or container divs. The container carries no semantic meaning, it just puts a fence around the content. There’s no need to indicate it as a landmark on the page.
I think it is worth mentioning that body can be used in lieu of a “wrapper”. For example, setting a width on body and styling it with margin:auto will center the page the same way a wrapper would.
One thing to keep in mind when using ‘body’ in lieu of a wrapper is that the background of ‘body’ does not propagate to the viewport if html is itself styled with a background. This is why “best practice” is to apply background styling on ‘body’ rather than ‘html’.
Lastly, a wrapper often creates a containing block, which creates a ‘context switch’ when a box in the wrapper becomes styled with ‘position:fixed’. In other words, the offsets (top, left, etc.) and values in percentage may **differ** depending if the box is styled with position:fixed or not.
Thanks for sharing these points, Thierry. Very helpful.
Don’t wrapper.
“A wrapper div, or a container div, has no semantic meaning.” – Then it should not be in your HTML.
“A wrapper div in an HTML document does the same things but to a layout instead of to actual property.” – HTML is for structure and semantics, use CSS for layouting.
Some sort of element that will constrain the size of what it contains is necessary in design. It might be a grid container these days, but it is still needed.
It does not work that way. Grouping/wrapping containers is often necessary for layout purpose. Unfortunately, many people do not understand that simple concept (of using `div` as wrappers) which is the reason why we can see many documents out there misusing the `section` element (by using it in lieu of `div`).
Five years later, still very useful.
Hi, thank you sharing. Why wrapper div is not used on the fences images slider/toggler/switcher above similar to an example here: https://codepen.io/jpwd/pen/GpKOed
You would need to ask that question at codepen.