HTML The Definitive Guide (32 page)

4.2.6 Adding Images to Headings

It is possible to insert one or more images within your headings, from small bullets or icons to full-sized logos. Combining a consistent set of headings with corresponding icons across a family of documents is not only visually attractive, but an effective way of aiding users' perusal of your
document collection. [, 5.2]

Adding an image to a heading is easy. For example, the following text puts an "information" icon inside the "For More Information" heading, as you can see in
Figure 4.6
:

For More Information

In general, images within headings look best at the beginning of the heading, aligned with the bottom or middle of the heading text.

Figure 4.6: An image within a heading

4.1 Divisions and Paragraphs

4.3 Changing Text

Appearance

Chapter 4

Text Basics

4.3 Changing Text Appearance

HTML has a number of tags that change the appearance of and can associate hidden meaning with text. In general, these tags can be grouped into two flavors: content-based styles and physical styles.

In addition, the W3C standard for Cascading Style Sheets is now well-supported by the popular browsers, providing another, more comprehensive way by which HTML authors may control the look and layout of their document text. Netscape also has implemented style sheets through JavaScript. We
describe the HTML tag-based text styles in this chapter. See Chapter 9 for details about Cascading

Style Sheets, and Chapter 13, Executable Content, for JavaScript-based style sheets.

4.3.1 Content-based Styles

Content-based style tags inform the browser that the enclosed text has a specific meaning, context, or usage. The browser then formats the text in a manner consistent with that meaning, context, or usage.

Because font style is specified via semantic clues, the browser can choose a display style that is appropriate for the user. Since such styles vary by locale, using content-based styles helps ensure that your documents will have meaning to a broader range of readers. This is particularly important when a browser is targeted at blind or handicapped readers whose display options are radically different from conventional text or are extremely limited in some way.

The HTML standard does not define a format for each of the content-based styles except that they must be rendered in a manner different from the regular text in a document. The standard doesn't even insist that the content-based styles be rendered differently from one another. In practice, you'll find that many of these tags have fairly obvious relationships with conventional print, having similar meanings and rendered styles, and are rendered in the same style and fonts by most browsers.

4.3.2 Physical Styles

We use the word "intent" a lot when we talk about content-based style tags. That's because the meaning conveyed by the tag is more important than the way a browser displays the text. In some cases, however, you might want the text to appear explicitly in some special way - italic or bold, for example - perhaps for legal or copyright reasons. In those cases, use a physical style for the text.

While the tendency with other text-processing systems is to control style and appearance explicitly, with HTML you should avoid explicit, physical tags except on rare occasions. Rather, provide the browser with as much contextual information as possible. Use the content-based styles. Even though current browsers may do nothing more than display their text in italic or bold, future browsers and

various document-generation tools may use the content-based styles in any number of creative ways.

4.2 Headings

4.4 Content-based Style Tags