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.