Text
Use structural markup appropriately

Faced with the limited palette of HTML, designers have long been misappropriating structural HTML tags to achieve visual effects. For example, table tags are commonly put to use as a tool for Web page layout. By using invisible tables (tables without visible borders), designers can create the multicolumn layouts common in print. Site navigation links are often placed in the left cell of an invisible layout table, and page content in the right cell. Another common practice is to use the BLOCKQUOTE tag to create margins.

Then there are elements that are tagged improperly because designers object to the way the browser renders the element. For example, lists are often not tagged as lists because the designer does not want an indent, or wants to use a custom bullet, or wants no bullet at all. In these instances the solution is often to use nonstructural markup, such as line breaks, or to misuse markup, such as using tables to format a list.

These techniques undermine the power of machine-readable structural markup. When text is coded properly, software can do useful things with the embedded information. If, however, text marked as BLOCKQUOTE is not a quoted passage, or tables are used for both layout and data, then software can find no accurate way to make use of these elements.

Today’s browsers allow designers much more control over the visual formatting of elements. With style sheets, we can control the appearance of such elements as headings, paragraphs, lists, and form fields, and create multicolumn layouts. Designers no longer need to rely on workarounds and hacks to design attractive and usable Web pages.

When marking up a text document, do not think about what the various elements should look like when displayed in the browser. Think about what each element is and tag it accordingly. Then use style sheets to define the visual properties (Figure 3.8).