Part IV: Text Topics

Creating Custom Formatting Styles

Changing the Look of a Text Element

Defining Class Styles

Controlling the Typeface

Controlling Type Size

BLOG: Sizing up Type Sizing

Controlling Spacing

Controlling Justified and Ragged Type

Controlling Indents

Building Lists

Highlighting Text with Color

Rehabilitating Horizontal Rules

Adding a Dateline and Timestamp

Designing Data Tables

Using Pseudo-Elements

Defining ID Styles

Chapter 40. Using Text Elements Properly

Just about every Web designer has done it at one time or another: using an HTML tag to mark up some text based on how the result looks in a browser instead of what the tag is supposed to mark up. Need a quick line of bold text? Who among us hasn't been at least tempted to reach for a header tag, even if the text in question doesn't really function as a header? Need to add some whitespace? The blockquote tag does the trick, even when you aren't trying to format an offset quote.

Now that Cascading Style Sheets (CSS) have become somewhat reasonably reliable in most browsers, the old arguments for doing whatever works don't hold as much water. CSS allows any HTML element to look however you, the designer, want it to look, so you don't have to borrow a tag on the basis of its appearancewhich means that HTML tags can go back to their original purpose of defining the structure of the page. When you mark something up as a header, in other words, it really ought to function as a header on your page. When you mark something up as a blockquote, it should be an offset block of text, not an image that needs a little extra whitespace.

If you have been designing Web sites for any length of time, you may have gotten into some bad HTML habits, and you might forget exactly what HTML text tags are supposed to mark up. Enter Table 40.1.

Table 40.1. Common HTML Text Tags

Working with Header Tags

HTML provides six levels of headersh1 through h6in descending order of structural and visual importance, as Figure 40.1 shows. First-level headings are bold and large, like the main headline on the front page of a newspaper. Second-level headings are not quite as large, like the supplemental or section headlines in the paper. On it goes, until you get to sixth -level headings, which are like the bold text at the beginning of a classified ad: not much of a headline, but a headline nonetheless.

Your well-coded HTML document should use the header tags to denote the logical structure of your page. That is, the main headline of your page should use the h1 tag. A subsection under this heading gets the h2 tag; a sub-subsection gets the h3 tag, and so on. Ideally, if you remove all the running text from your page, a properly structured set of header tags gives you a complete and accurate outline of the information on your page, like this:

Welcome to my home site (h1)

What you will find on my site (h2)

About the games page (h3)

About the news page (h3)

About my online gift store (h3)

Information about me (h2)

My rsum (h3)

Current employment (h4)

Previous employment (h4)

Education (h4)

Graduate studies (h5)

College (h5)

My hobbies (h3)

Shoelace art (h4)

Favorite techniques (h5)

Links to shoelace sites (h5)

Basket -weaving (h4)

Favorite techniques (h5)

Links to basket-weaving sites (h5)

My contact information (h3)

Street address (h4)

Telephone/fax (h4)

Email (h4)

Remember, it doesn't matter so much what effect these tags have on the appearance of your text, since you can use CSS to make the tags generate whatever typography you want. The important thing is to make sure you use the tags consistently and as HTML designed them to be used.