Read HTML The Definitive Guide Online
Authors: Chuck Musciano Bill Kennedy
The default heading alignment for most browsers is left. Like the
tags, you can alter this alignment with the align attribute and one of the values left, center, right, or justify.
Figure 4.4
shows these alternative alignments as rendered from the following source: Right over here! Slide back left. Smack in the middle.
Figure 4.4: The headings align attribute in action
The justify value for align is not supported yet by any browser, and don't hold your breath. The align attribute is deprecated in HTML 4.0 in deference to style sheet-based controls.
4.2.1.2 The dir and lang attributes
The dir attribute lets you advise the browser as to which direction the text within that paragraph ought to be displayed, and lang lets you specify the language used within the heading.
[The dir
attribute, 3.5.1.1] [The lang attribute, 3.5.1.2]
4.2.1.3 The class, id, style, and title attributes
Use the id attribute to create a label for the heading that can later be to used to unambiguously reference that heading in a hyperlink target, for automated searches, as a stylesheet selector, and with a host of other applications.
[The id attribute, 4.1.1.4]
Use the optional title attribute and quote-enclosed string value to provide a descriptive phrase for the heading.
[The title attribute, 4.1.1.5]
Use the style attribute with the heading tags to create an inline style for the headings' contents. The class attribute lets you label the heading with a name that refers to a predefined class declared in
some document-level or externally defined style sheet. [Inline Styles: The style Attribute, 9.1.1]
[Style
4.2.1.4 Event attributes
User-initiated events that may happen in and around a heading each are recognized by the browser if it conforms to the HTML 4.0 specification (none do fully). With the respective "on" attribute and value, you may react to that event by displaying a user dialog box or activating some multimedia event.
[JavaScript Event Handlers, 13.3.3]
4.2.2 Appropriate Use of Headings
It's good form to repeat your document's 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. The title should match the one in the document's
. The following HTML segment is a good example of repeating the document's title in the header and in the body of the document:Kumquat Farming in North America
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
In the example, we chose to use a level three heading () 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.
4.2.3 Using Headings for Smaller Text
For most graphical browsers, the fonts used to display
Experiment with
resulting in years of successful kumquat production throughout North America.
Figure 4.5: HTML authors typically use heading level six for boilerplate text
4.2.4 Allowed Heading Content
A heading may contain any element allowed in
text
, including conventional text, link anchors (), images (), line breaks (
), font embellishments (, , , , , , , , , and ), and content-based style changes (, , , , , , , , and ). 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!
Of course, designating large sections of text as heading content defeats the purpose of the tag. If you really want to change the entire font or type size of your document, consider instead defining a unique style for the
details.
And we strongly recommend that you carefully test your pages with more than one browser and at several different resolutions. As to be expected, your
resolution, but disappear on a 600 × 800 display.
4.2.5 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. Rather, use styles to achieve those acute display effects.
[Inline Styles: The style Attribute, 9.1.1]