Cascading stylesheets are only useful for semantic markup languages, such as HTML or many applications of XML. Although they can be used to style arbitrary XML elements, their full power is only available when styling markup with known meaning. The known meaning of markup allows the UA defaults and the user's preferences to help create an interface to which the user is largely accustomed.
CSS depends on the tree structure of a document. Therefore, it is essential that SGML (including HTML) documents be valid and XML documents be at least well-formed, if not valid as well. If a document's structure is ambiguous, styles cannot be applied in any sensible manner.
Because of browser bugs, there are additional constraints that should be met by HTML documents. These constraints are similar to the well-formedness constraints in XML. Authors should avoid tag minimization and omission. Omitting optional tags, by far the more common of these practices since it is largely supported by browsers, can cause problems in early CSS browsers whose parsers were not based on the (correct) document tree model. Thus it is better to write:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>Page title</title> </head> <body> <p>Paragraph.</p> <ul> <li>list item</li> <li>list item <ul> <li>sublist item</li> </ul> </li> </ul> <table> <tr> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> </tr> </table> </body> </html>
than the following, even though both are correct:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <title>Page title</title> <p>Paragraph. <ul> <li>list item <li>list item <ul> <li>sublist item </ul> </ul> <table> <tr> <td>cell <td>cell <tr> <td>cell <td>cell </table>
There are two major HTML validators on the web: the W3C HTML Validator and the HTMLHelp validator.
Most elements in HTML have accepted meaning. For example,
blockquote is used to represent quotations, ul
and li represent unnumbered list items, table
and other elements represent tabular data, etc. Don't use elements
in a way for which they were not intended just because you like the
formatting of those elements on your browser. Instead, write HTML
that represents the logical structure of the document, and then
style it. This will make your pages much more accessible to all
users: blind users, users browsing on small portable devices, etc.
The web is not a desktop publishing medium. If you can't get the layout that you want given current browser's support for CSS, don't completely redesign the document. (Considering current poor support for CSS, though, small changes are reasonable.) Instead, figure out a layout that can be suggested using CSS.
Using images to represent text is even worse than using presentational markup. But if you must do so, at least use good alt attributes.
For their own benefit, authors should use class names that convey
meaning rather than presentation. Doing so makes sites
easier to maintain. <div class="warning"> is
much better than <div class="boldred">.
The author may, in the future, decide that warnings should be italic and
blue.
There have been some attempts to make a standard set of classes.
None has been very successful. [Does anyone have more information
on these?] A standard set of classes would be useful to prevent
loss of information when a style specific to a class is overridden
by an !important rule in a user stylesheet.
(Up to User Stylesheets Guide, CSS, David Baron)
LDB, dbaron@dbaron.org, 1999-08-12