Most Common Errors - Web Standards: Mastering HTML5, CSS3, and XML - page 466

Misused Tables
Tableless layout : the Web standardistas' motto. Tables are for organizing data, not for controlling layout. For that
purpose, div and other structuring elements should be used instead. Their positions, sizes, colors, layer orders,
transparencies, and other features can be set via style sheets (Listing 15-12 instead of Listing 15-11).
Listing 15-11. Fragment of a Misused Table
<table border="1" bgcolor="#898989" width="400">
<td align="center" valign="top" spanning="2"> &nbsp;
<td>
Listing 15-12. Correct Structure of Tabular Data in the Markup
<table>
<tr>
<td>Meaningful content in data cell</td>
<td>Content of other data cell</td>
</tr>
</table>
The position of the table is determined by the content elements, text, and images as well as the container div
element. The parameters should be given as CSS rulesets in the external style sheet associated with the document
(see the section “Table Styling”).
Nonoptimal Code Length
Analogously to the “tag soup” discussed in Chapter 1, the more specific “div soup” refers to the misuse and overuse of
divisions (Zeldman calls it divitis [2]). Listing 15-13 shows an example.
Listing 15-13. A Divitis
<div class="maincontainer"><div class="nounderlineleftmargin"><div class="container"><div class="top
headlinesleftalign">The Latest News</div><div class="maintextthickborder"></div></div></div>
</div>
The major problem is that there is no structure at all (even if the code might be valid). Unnecessary divisions
should be removed. Moreover, the names in the preceding example are far too long (although descriptive). They
should be kept within reasonable limits.
Remember that in (X)HTML5 other elements dedicated to structuring should be used as the main containers
except the general wrappers that should still be div s.
Element and Attribute Errors
A gross element error is when elements defined in another specification are used. Elements should be used according
to the document type.
Incorrectly nested elements break the document structure and should be avoided. The location and order of
elements within (X)HTML documents are not arbitrary and should meet the criteria of nesting rules discussed in
Chapter 3.
Both errors can cause the message “document type does not allow element here” in the W3C Markup
Validation Service.