Section 5.4. Inline Formatting

5.4. Inline Formatting

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.

5.4.1. Italics, Bold, and Underline

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:

Stop ! The mattress label says do not remove under penalty of law and you don't want to mess with mattress companies.

5.4.2. Emphasis and Strong

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 .

Tip: Technically, you can use style sheets to redefine the <i> tag in the same way. However, it seems confusing to have the <i> tag do anything except apply italics. After all, that's its name .

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).

5.4.3. Subscript, Superscript, and Strikethrough

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.

Figure 5-14. Strikeout text, superscript, and subscript and in action.

5.4.4. Teletype

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:

To solve your problem, use the Fizzle( ) function.

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.

5.4.5. Special Characters

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

Table 5-2. Common Special Characters


Name of character

What to type



Registered trademark


Cent sign


& pound ;

Pound sterling


Yen sign


Euro sign

&euro; (but &#8364; is better supported)


Degree sign



Plus or minus



Division sign



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


Tip: The euro symbol is a relative newcomer to HTML. Although you can use the character entity &euro; you'll have the best support using the numeric code &#8364; because it works with older browsers like Internet Explorer 4 and Netscape Navigator 6.

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).

Figure 5-15. Top: In Nvu, just choose Insert Characters and Symbols.
Middle: Dreamweaver forces you to do more work and choose Insert HTML Special Characters Other to see a relatively small set of special characters.
Bottom: Choose Insert Symbol to see FrontPages more comprehensive list. Note that FrontPage inserts Unicode characters (not just character entities). As a result, if you insert a special character in FrontPage, it might not appear correctly in older operating systems.

Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
Year: 2003
Pages: 135

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: