A Complete Guide to Web Design

114 Chapter 7 – Formatting Text

Inline Type Styles

Web Design in a Nutshell, eMatter Edition

Headings

Headings are displayed in bold text with automatic line breaks and extra space

above and below. There are six levels of HTML headings, ranging from<h1>(the

top-level heading) to<h6>(lowest priority). Browsers display headings with a

diminishing font size so that<h1>s are the largest possible font and<h6>are the

smallest.

In fact,<h5>and<h6>are generally sized even smaller than the default body text,

making them not very commanding as headings. Some web authors use the fifth

and sixth level headings for the “small type” elements such as copyright informa-

tion at the bottom of the page. Figure 7-3 shows the relationship of the six

heading levels as displayed in a browser.

Legal HTML syntax requires that headings appear in order (i.e., an<h2>cannot

precede an<h1>), for proper document structure. In practice, however, designers

typically pick and choose from heading levels to create desired presentation

effects. For instance, a top-level<h1>heading, although it may make sense for the

structure of the document, may look too large and clunky for the page, so an

<h2>or<h3>might be used instead. Because browsers do not enforce correct

structural hierarchies, web page authors have gotten away with these techniques.

Now that HTML has been extended to provide more fine-tuned controls over font

display, headings have become less popular as text-formatting tools. In fact, now

the other extreme is common, in which pages are coded purely for presentation

(for instance, with the<font>tag) without providing any indication of the docu-

ment’s structure.

Style sheets, once they are fully supported, will be a welcome solution to this

dilemma, making it possible to structure documents with heading levels according

to legal HTML syntax while offering precise control over their presentation. For

more information, see Chapter 23.

Inline Type Styles

Most HTML text tags indicate style or structural information forinlineelements

(strings of characters within the flow of text). Inline style tags affect the appear-

ance of the enclosed text without adding line breaks or extra space. Closing tags

are required for inline style tags in order to turn “off” the style attribute.

Figure 7-3: Results of the six heading tags, with regular body text for comparison