[Chapter 4] 4.2 Headings

4.2 Headings

Users have a hard enough time reading what's displayed on a screen. A long flow of text, unbroken by title, subtitles, and other headers, crosses the eyes and numbs the mind, not to mention the fact that it makes it nearly impossible to scan the text for a specific topic.

You should always break a flow of text into several smaller sections within one or more headings (like this book!). HTML defines six levels of headings that can be used to structure a text flow into a more readable, more manageable document. And, as we discuss in Chapter 5, Rules, Images, and Multimedia, and in Chapter 9, Cascading Style Sheets, there are a variety of graphical and text-style tricks that help divide your HTML document and make its contents more accessible as well as more readable to users.

Heading Tags

The six heading tags, written as <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, indicate the highest (<h1>) to the lowest (<h6>) precedence a heading may have in the document.

The enclosed text within a heading typically is uniquely rendered by the browser, depending upon the display technology available to it. The browser may choose to center, embolden, enlarge, italicize, underline, or change the color of headings to make each stand out within the document. And to thwart the most tedious HTML writers, users, too, often can alter how a browser will render the different headings.

Fortunately, in practice most browsers use a diminishing character point size for the sequence of headers, so that <h1> text is quite large and <h6> text is quite minuscule (see Figure 4.3, for example).

Figure 4.3: Browsers typically use diminishing text sizes for rendering headings

[Graphic: Figure 4-3]

By tradition, HTML authors have come to use <h1> headers for document titles, <h2> headers for section titles, and so on, often matching the way many of us were taught to outline our work with heads, subheads, and sub-subheads.

Finally, don't forget to include the appropriate heading end tags in your document. The browser won't insert one automatically for you, and omitting the ending tag for a heading can have disastrous consequences for your document.

The align attribute

The default heading alignment for most browsers is left. Like the <div> and <p> tags, you can alter this alignment with the align attribute and one of the values: left, center, or right. Figure 4.4 shows these alternative alignments as rendered from the following source:

<h1 align=right>Right over here!</h1>
<h2 align=left>Slide back left.</h2>
<h3 align=center>Smack in the middle.</h3>

Figure 4.4: The headings align attribute in action

[Graphic: Figure 4-4]

The style and class attributes

The style and class attributes for the heading tags let you define an inline style for the content enclosed by the header tag, and format the content according to a predefined style sheet class. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"]

Appropriate Use of Headings

It's good form to repeat your document title in the first heading tag, since the title you specify at the beginning of your HTML document doesn't appear in the user's main display window. It should match the title in the document header. The following HTML segment is a good example of repeating the document's title in the header and in the body of the document:

<html>
<head>
<title>Kumquat Farming in North America</title>
</head>
<body>
<h3>Kumquat Farming in North America</h3>
<p>
Perhaps one of the most enticing of all fruits is the...

While the browser may place the title somewhere in the document window and may also use it to create bookmarks or hotlist entries, all of which vaguely are somewhere on the user's desktop, the level three title heading in the example will always appear at the very beginning of the document. It serves as a visible title to the document regardless of how the browser handles the <title> tag contents. And, unlike the <title> text, the heading title will appear at the beginning of the first page should the user elect to print the document. [the section called "The <title> Tag"]

In the example, we chose to use a level three header (<h3>) whose rendered font typically is just a bit larger than the regular document text. Levels one and two are larger still and often a bit overbearing. You should choose a level of heading that you find useful and attractive and use that level consistently throughout your documents.

Once you have established the top-level heading for your document, use additional headings at the same or lower level throughout to add structure and "scanability" to the document. If you use a level three heading for the document title, break your document into several sections using level four headings. If you have the urge to subdivide your text further, consider using a level two heading for the title, level three for the section dividers, and level four for the subsections.

Using Headings for Smaller Text

For most graphical browsers, the fonts used to display <h1>, <h2>, and <h3> headers are larger, <h4> is the same, and <h5> and <h6> are smaller than the regular text size. HTML writers typically use the latter two sizes for boilerplate text, like a disclaimer or a copyright notice. Experiment with <h5> and <h6> to get the effect you want. See how a typical browser renders the copyright reference in the following sample HTML segment (see Figure 4.5):

resulting in years of successful kumquat production 
throughout North America.
</p>
<h6>This document copyright 1995 by the Kumquat Growers of 
America. All rights reserved. </h6>
</body>
</html>

Figure 4.5: HTML authors typically use header level six for boilerplate text

[Graphic: Figure 4-5]

Allowed Heading Content

A heading may contain any element allowed in text, including conventional text, link anchors (<a>), images (<img>), line breaks (<br>), font embellishments (<b>, <i>, <tt>, <u>, <strike>, <big>, <small>, <sup>, <sub>, and <font>), and content-based style changes (<cite>, <code>, <dfn>, <em>, <kbd>, <samp>, <strong>, and <var>).

In practice, however, font or style changes may not take effect within a heading, since the heading itself prescribes a font change within the browser.

There is widespread abuse of the heading tags as a mechanism for changing the font of an entire document. Technically, paragraphs, lists, and other block elements are not allowed within a heading and may be mistaken by the browser to indicate the implied end of the heading. In practice, most browsers apply the style of the heading to all contained paragraphs. We discourage this practice since it is not only a violation of the HTML standard, but usually ugly to look at. Imagine if your local paper printed all the copy in headline type!

If you really want to change the entire font or type size of your document, consider instead defining a unique style for the <body> tag of your document. This style will be applied to all the content within the <body> and will make later modification of your document style much easier. See Chapter 9, Cascading Style Sheets for details.

Allowed Heading Usage

Formally, the HTML standard allows headings only within body content. In practice, most browsers recognize headings almost anywhere, formatting the rendered text to fit within the current element. In all cases, the occurrence of a heading signifies the end of any preceding paragraph or other text element, so you can't use the heading tags to change font sizes in the same line. HTML 3.2, however, defines the <font> tag for inline font size adjustments; see the section called "Expanded Font Handling" for details.

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. [the section called "The <img> Tag"]

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.

<h2>
<img src="info.gif">
For More Information</h2>

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

[Graphic: Figure 4-6]