As you learned earlier in this chapter, it's best not to format HTML too heavily. Instead, to get the maximum control and make it easy to update your Web site's look later on, you should head straight to style sheets (as described in the next chapter). However, there are a few formatting tags in HTML that are so commonly used that you should know them. These are inline character styles tags you can use inside another block element, like a paragraph, heading, or list.
You've already seen these tags in Chapter 2. They're staples in HTML, allowing you to quickly format snippets of text in a few simple ways. Here's an example that uses all three<i> for italics, <b> for bold, and <u> for underline:
<p <b>Stop!</b> The mattress label says <u>do not remove under penalty of law</u> and you <i>don't</i> want to mess with mattress companies. </p>
It's displayed like this in a browser:
The <em> tag (for emphasized text) is the logical equivalent of the physical tag <i>. In just about every browser these two tags have the same effectthey italicize text. Philosophically, the <em> tag is a better choice, because it's more generic. When you use <em>, you're simply indicating that you want to emphasize a piece of text, but you aren't saying how to emphasize it. You can use a style sheet later on to change how emphasized text is displayed. Possibilities include making it a different color , a different font, or a different size .
The <strong> tag is the logical equivalent of the <b> tag. If you aren't using style sheets, this simply applies bold formatting to a piece of text. Overall, the <i> and <b> tags are more commonly used than <em> and <strong>, but the latter are preferred because they're more flexible.
Here's the previous example rewritten to use the <em> and <strong> tags:
<p> <strong>Stop!</strong> The mattress label says <u>do not remove under penalty of law</u> and you <em>don't</em> want to mess with mattress companies. </p>
There's no logical equivalent for the <u> underline tag, although you can always use one of the generic tags discussed earlier, like <span> (see Section 5.4.2).
You can use the <sub> tag for subscript text that's smaller and placed at the bottom of the current line. The <sup> tag is for superscript smaller text at the top of the current line. Finally, wrapping text in a <strike> tag tells the browser to cross it out. Figure 5-14 shows an example.
|
Text within a <tt> element displays using a fixed-width ( monospaced ) font, like Courier. Programmers sometimes use it for snippets of code in a paragraph.
<p>To solve your problem, use the <tt>Fizzle()</tt> function.</p>
Which renders like this:
Teletype text (or typewriter text) looks exactly like the text in a <pre> block (see Section 5.2.5), but <tt> text is meant to be placed inside another block element. Unlike preformatted text, spaces and line breaks in <tt> text are ignored, as they are in every other HTML tag.
Not all characters are available directly on your keyboard. For example, what if you want to add a copyright symbol ( ), a paragraph mark ( ), or an accented e ( )? Good news: they're all supported by HTML, along with about 250 relatives, including mathematical symbols and Icelandic letters . However, to add them, you'll need to use some sleight of hand. The trick is to use HTML character entities special codes that the browser recognizes as requests for unusual characters. Table 5-2 has some common options, with a sprinkling of accent characters. For the complete list, see http://webmonkey.wired.com/webmonkey/reference/special_characters.
Character | Name of character | What to type |
---|---|---|
| Copyright | © |
| Registered trademark | ® |
| Cent sign | ¢ |
& pound ; | Pound sterling | £ |
| Yen sign | ¥ |
| Euro sign | € (but € is better supported) |
° | Degree sign | ° |
± | Plus or minus | ± |
· | Division sign | ÷ |
x | Multiply sign | × |
µ | Micro sign | µ |
¼ | Fraction one-fourth | ¼ |
½ | Fraction one-half | ½ |
¾ | Fraction three-fourths | ¾ |
| Paragraph sign | ¶ |
§ | Section sign | § |
« | Left angle quote, guillemot left | « |
» | Right angle quote, guillemot right | » |
| Inverted exclamation | ¡ |
| Inverted question mark | ¿ |
| Small ae diphthong (ligature) | æ |
§ | Small c, cedilla | ç |
| Small e, grave accent | è |
| Small e, acute accent | é |
| Small e, circumflex accent | ê |
« | Small e, dieresis or umlaut mark | ë |
| Small o, dieresis or umlaut mark | ö |
‰ | Capital E, acute accent | É |
Many HTML editors have features for easily inserting special characters, without forcing you to look up the character entity in a list (see Figure 5-15).
|