The Promise of CSS - Pro CSS Techniques - page 5

Also, do not repurpose structural tags for presentational effect. Before browsers supported
CSS, many a web developer (including the authors of this topic!) found creative ways to use tags
for purposes other than their intended ones. For example, developers used the table element—
designed for displaying tabular data such as spreadsheets and invoices—as a layout grid for
their pages. They used the <blockquote> tag to create indentions. This sort of repurposing,
while clever, is simply not necessary on the modern Web. Using CSS, you can style any element
to look any way you'd like. There's no need to use an <li> tag just to get a bullet to appear next
to some content. Use the list item element ( li ) if it really is a list item, but if it's not, simply use
CSS to restyle the appropriate element with a bullet. Remember, the (X)HTML should tell us
what it is , not what it looks like.
Avoiding Nonstructural Tags
To provide as much structure as possible, limit your use of (X)HTML's nonstructural tags as
much as possible. <div> and <span> are incredibly useful—and absolutely necessary for CSS
development—but they have no semantic meaning. Always check for an appropriate semantic
tag you could use instead before resorting to <div> and <span> .
The div element serves as a unit for grouping structural areas of your web document—for
example, lumping together all of the primary content and then all of the secondary content.
The purpose of the span element is to set apart inline content within a parent element. For
example, consider the header text “Chapter One: Modern Markup.” If you consider the phrase
“Modern Markup” emphasized, then you should mark it up like so:
<h1>Chapter One: <em>Modern Markup</em></h1>
If, on the other hand, you wish to set “Modern Markup” apart for some nonsemantic reason
(perhaps because you want to style it differently), use <span>:
<h1>Chapter One: <span>Modern Markup</span></h1>
div and span should not be used to replace more appropriate elements. For example, there is
no reason to do this:
<div>This is a paragraph of text.</div>
when you could simply do this:
<p>This a paragraph of text.</p>
The first example is meaningless, whereas the second provides the paragraph structure to the
browsers and other devices reading it.
Avoiding “Divitis” and “Classitis”
Often, developers who are accustomed to using the table element for layout will be inclined
to create markup with lots of nested <div> tags, effectively replicating their table layouts with
the div element. This practice, which has been dubbed divitis , should be avoided.
Similarly, be careful about “wrapping” single elements in <div> tags. This is often done for
styling purposes—and it is sometimes necessary to create a particular effect—but usually it is
wasted markup. For example, why do this: