Boxes
Discussion
There is no such element as a "box" in HTML, so we have to construct them using what we have to hand. Boxes are often created using a single-cell table but this is unsatisfactory since while a box may contain a table, a box is not in itself a table.
Structurally, a box is a division of the contents. By declaring a box we are saying that the contents is somehow separate from the surrounding text. US authors often use "sidebar" to mean something similar. It is a diversion from the main flow, to a greater or lesser degree. The contents of the box may be a clarification of some aspect of the text, may add detail which would be cumbersome within the main text or may contain matter of parallel interest which would otherwise not be included because it is not directly pertinent to the subject in hand. Boxes often act as containers for reference material which the reader might be grateful to find more easily than if it were buried in the text. Boxes stand out while footnotes stand back.
As far as the code goes, the separate nature of boxes has implications for how we mark-up text inside the box.
Technique
Wrapping the box
For simple boxes we use the versatile <div></div> with a class attribute to indicate the start and end of the box. No other changes in mark-up are required because once the boundaries of the box are set, everything within them will be treated by a separate set of rules defined outside the page code.1
Here is a heading and some text which needs to appear as a box:
<h2>Box heading</h2>
<p>
Text in box.
</p>
We wrap it in a <div></div> tag with a class attribute of "box":
<div class="box">
<h2>Box heading</h2>
<p>
Text in box.
</p>
</div>
This box may be one of several, so to identify it we give it an id attribute, which must be unique on the page and must start with a letter A-Z or a-z:
<div id="box01" class="box">
<h2>Box heading</h2>
<p>
Text in box.
</p>
</div>
Lastly, to help those with old and simple browsers we add invisible rules2 to delimit the box:
<div id="box01" class="box">
<hr class="hide" />
<h2>Box heading</h2>
<p>
Text in box.
</p>
<hr class="hide" />
</div>
Inside the box
Inside the box we handle the text just the same as anywhere else on the page, we don't have to do anything special with it. It's marked up in the same way we know and love.
Except...
... we treat headings slightly different:
When we enter a box we're entering a separate zone of the document, somewhere which is different from the rest of the page (like, otherwise we wouldn't have put stuff in a box, dude). So when we start to make headings in the box we re-set our heading level back to the top of the scale. Well, almost to the top. Remember, we start at level 2 (<h2></h2>) because our overall document title has the privilege of being top-dog <h1></h1>. So, when we come to a box, even though it might be under a level 4 heading, we re-set the counter and give the box a heading of level 2.
Imagine if we didn't do this. We come to a box under a level 4 heading and find we only have two levels to play with. Use level 5 to give the box a title (it can't be level 4 because that would be the same as the heading we're under and that's just confusing). So we're at level 5 and now we need a subhead in the box—level 6. So far so good, but we've now got nowhere left to run.
The box title
Where the box has a title with a prefix, such as "Box 1: Title" we should treat this as a single heading. But it would be nice to separate the prefix from the actual title of the box and we can do this by using a <span> element like this:
<h2><span class="itemnumber">Box 1: </span>The box title</h2>
This way the box number prefix can be given a separate treatment by, for example, assigning different a colour to items of that class. We leave the colon (:) in place so that the heading still makes sense in simple browsers.
Likewise, if the box heading has a subtitle we would use <span> again instead of creating a separate heading element. If we want to force our subtitle on to the next line we can use a break tag. Our heading, complete with subtitle and break, now looks like this:
<h2><span class="itemnumber">Box 1: </span>The box title<br /><span class="subtitle">Essential steps in easy stages</span></h2>
And later we might want to refer to the box from elsewhere in the text or from a contents list so we wrap the title in an anchor:
<h2><a id="box-01-00-00-00" name="box-01-00-00-00"><span class="itemnumber">Box 1: </span>The box title<br /><span class="subtitle">Essential steps in easy stages</span></a></h2>
And when we make a reciprocal link back to the contents list, the heading code will look like this:
<h2><a href="box-01-00-00-00ref" id="box-01-00-00-00" name="box-01-00-00-00"><span class="itemnumber">Box 1: </span>The box title<br /><span class="subtitle">Essential steps in easy stages</span></a></h2>
For more details about why we should do it like this, see the discussion of contents lists.
