Foundation HTML5 with CSS3

Chapter 4

Listing 4-16. A block of content wrapped in a div element

<div class="legal">

<p class="copyright">© 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 divs 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 divs strictly for presentational purposes. This bad habit is sometimes called “divitis” and you

should try to avoid it. Use divs 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 book: 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 book 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).