Web Teacher

One of the listservs I read regularly recently had the question posted, “What is a wrapper?” An answer provided by Paul Novitski was so clear that I thought it might be a useful tip here. With Paul’s permission, here is his response to the question.

A wrapper is an element, commonly a div, that encloses one or more other
elements in the HTML markup, e.g.:

<div id="wrap">
<h1>Headline</h1>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

The purposes of wrappers are several, including:

• to group elements semantically, for instance to separate page heading
  from body text from sidebar from footer.
• to group elements cosmetically, such as with a surrounding border or a
  common background image or color.
• to group elements in layout, such as to keep them all in the same column
  when columns are floated next to one another.
• to enable special positioning, as when a wrapper is given relative
  positioning in order to contain child elements with absolute positioning.
• to make it more convenient to specify elements in CSS and JavaScript by
  referring to their parent, without having to id or class each child
  element, as in:
  div#wrap h1 {...}
div#wrap p {...}
var aKids = document.getElementById("wrap")
.childNodes;
  (Note: the var above should all be on one line)

Some special effects require several nested wrappers, such as when a box is
given rounded corners.

Stumble it!