Constructing Content - HTML5 with CSS3 - page 90

Listing 4-16. A block of content wrapped in a div element
<div class="legal">
<p class="copyright">&copy; 2011-2012 Power Outfitters</p>
<ul class="nav-legal">
<li><a href="/legal/terms">Terms of Use</a></li>
<li><a href="/legal/privacy">Privacy Policy</a></li>
</ul>
</div>
A div is flow content and can contain text and any other elements. Although the div seems similar in
function to the section element, a div does not establish a new sectioning root in the document hierarchy
and doesn't imply any thematic relationship of its contents. A div alone imparts no deeper semantics to its
contents, so any text within it should be wrapped in a more meaningful element of its own. The div
element's only default styling is to behave as a block-level element; its contents begin on a new line and
occupy the full available width.
Because div s are so versatile and act as useful boxes to be styled with CSS, some web designers can
show a tendency to overuse them, crowding their markup with an excessive number of otherwise
meaningless div s strictly for presentational purposes. This bad habit is sometimes called “divitis” and you
should try to avoid it. Use div s wisely to support your content, and always prefer more semantically
valuable elements to semantically neutral elements. Like section , the div element is a content-
organization device, not just a page-layout device.
Required Attributes
The div element doesn't require any attributes.
Optional Attributes
There are no optional attributes for the div element.
figure
A new addition to HTML5, the figure element represents an image, video, quotation, code listing, or
some other content, along with an optional caption, that is self-contained and might be referenced as a
single unit from the main flow of content. That isn't to say the figure could be removed entirely; it's not
optional content like you'd find in an aside element. A figure is still essential content, but it's the sort of
illustrative example that could potentially be removed from the normal flow of content or appear at a
different point in the document without harming the readability of the main text.
You've seen many prime examples of figures throughout this topic: whenever we include a screen capture
or lengthy code listing, we give it a caption and refer to it from the main text. If we were writing this topic in
HTML, every one of those could be wrapped in a figure element, with its caption in a figcaption
element (more on that one next).