HTML and CSS Reference
In-Depth Information
</nav>
<p class="slogan">Proud purveyors of practical paraphernalia for the
contemporary costumed crime-fighter</p>
<p class="copyright">Copyright © 2011–2012 Power Outfitters</p>
</footer>
A Space for Content
With our masthead and footer in good shape, we finally turn to the real meat of the page: a broad, blank
canvas where the site's content will live. We know from our wireframes that we'll need a space for the
primary page content and space for a sidebar full of supplemental content, but what's inside those blocks
will change from page to page. We need general, multipurpose containers for these content sections, if
only to group them together and provide a convenient wrapper for layout and styling.
When it comes to carving up chunks of a page like this, your first instinct might be to reach for the new
section
element. After all, they're sections of the document, aren't they? But the
section
element has
specific semantics—it represents a distinct piece of a greater whole, a block of content that deserves its
own title but doesn't quite stand on its own out of context (as an
article
element would). Don't use
section
only for styling or scripting purposes. If you just need a generic container, the trusty old
div
is the
most fitting element:
<div class="main">
...
</div>
However, in the case of our sidebar, it's slightly more than a generic box; it's optional, supplemental
content that relates to the main content of the page, but isn't necessarily part of it. HTML5 introduced the
aside
element for just such content. Even though a
div
could serve the same grouping and styling
function here, wrapping our sidebar in an
aside
gives it that little bit of added meaning:
<aside class="extra">
...
</aside>
We've opted for classes instead of IDs on our content blocks because we expect to use them as style
hooks when we lay out the page with CSS. We also know we'll need to fill these containers with a wide
variety of content that may need different styling depending on their context; an
h2
in the main body might
need to be different from an
h2
in the sidebar. A class selector is less specific than an ID selector in CSS,
so classes are less likely to cause trouble when we need more specific selectors to override other style
rules. An ID selector is powerful and can only be trumped by another ID. Relying too much on IDs for
styling purposes can lead to “specificity wars,” forever escalating the strength of your selectors with more
specific IDs. If you like, you could certainly assign unique IDs to these content blocks but still rely on
reusable classes for styling purposes.
We're wrapping our sections of content in their own containers and that should be enough to finish this
template. However, we also know that we'll want to surround those two content blocks with a single
container, partly for styling purposes but also to hold them together as the related content they are. Once
