| Formatting tags are HTML tags that explicitly turn on typographic effects such as boldface, underlining, and italics. Unlike phrase elements, formatting tags do not identify the structure of the text they mark up. They simply indicate that a particular string of text should display as bold, italic, or underlined. The formatting tags are b (for boldface), i (for italic), u (for underline), and s or strike (for strikethrough). Figure 43.1 shows them in action. Figure 43.1. This paragraph uses formatting tags to achieve boldface, italics, underlines, and strikethrough. 
GEEKSPEAK A formatting tag is an HTML tag that describes the appearance of a block of content but does not identify the content's structure or purpose. |
TIP Watch out for underlining, no matter how you implement it. Underlines almost always signify hyperlinks. If you underline nonlink text on your page, your visitors will try to click the text, guaranteed. If you make the underlined text a different color, you might as well be begging people to fire off frustrated emails to the Webmaster. Better just to stay away from nonlink underlines altogether, and use italics to emphasize your text instead. |
Since formatting tags have nothing to do with structure, and since HTML is supposed to be a structure-only markup language, formatting by way of these tags nowadays is a design faux pas. You should use CSS style definitions instead, like the kind in this topic's Toolkit. Copy these definitions into your site's style sheet, or put them between style tags in the head section of your HTML file. Then, to format a piece of text with them, use the span tag, as Figure 41.2 demonstrates. Put the name of the style that you want to use in the class attribute.  | TOOL KITCSS Style Definitions to Replace Formatting Tags This Toolkit gives you four CSS style definitions to replace the HTML formatting tags of bold, italic, underline, and strikethrough. .b { font-weight: bold; } .i { font-style: italic; } .u { text-decoration: underline; } .s { text-decoration: line-through; }
|
|
Listing 43.1. View Source for Figure 43.2. <p>This style gives you <span >bold</span> text.</p> <p>This style gives you <span >italic</span> text.</p> <p>This style gives you <span >underlined</span> text.</p> <p>This style gives you <span >strikethrough</span> text.</p>
Figure 43.2. Instead of formatting tags, use CSS style definitions. They work just as well, and free up HTML to be a purely structural language once again. 
TIP The abbreviated names of the style classesb, i, u, and scome from the names of the corresponding formatting tags as a way to trick old-school Web designers into using CSS. If you'd prefer more descriptive names, say like bold or ital, feel free to give these in the style definitions. Make sure the class attributes of your span tags reflect your revised class names. |
|
