Recognizing Semantics - HTML5 Mastery: Semantics, Standards, and Styling - page 110

Figure 3-5. Example output from the HTML5 Outliner by Geoffrey Sneddon
Figure 3-6. The Chrome HTML5 Outliner extension appears on the right side of the address bar.
The image shows part of the outline of the http://w3.org site.
Are divs (and spans) obsolete?
All this discussion about sectioning content on a page and barely a mention of div s!
How times have changed. Before HTML5, div s were found all over web pages; they
were the unavoidable scaffolding used to created headers, footers, columns, and all the
other sections of a page. With all the new sectioning elements, has the div gone the way
of blink ? No, div s are still very much present; they have been augmented and sup-
planted in some cases with more semantically defined elements, but they are still a valid
element and have their place. Since div elements do not have any semantics of their
own, they can appropriately be used to, for instance, group related content, unrelated
content, the whole page, or a sentence. 6 These are all equal from a semantic perspect-
ive, and the div is not adding further meaning to these groupings. Their versatility is in
their lack of extra semantic baggage. Therefore, they continue to be useful for applying
CSS rules or accessing a piece of content from JavaScript. When no other element will
fit, a div is a great catchall element!
Likewise, the span is still very much present in HTML5. It holds an analogous place
to div ; where div is used for flow content, span could be used for phrasing content.
If you have a piece of content that does not appear to fit under another element, the
following are two good rules of thumb to determine whether you should use a div (or
span , if you're dealing with text-level phrasing content):
• Are you using the markup purely as a hook to apply CSS styles or to
access the content from JavaScript?