There are several alternatives, then, for creating headings. You can use <hn> tags with their default stylings, use the tags with modified stylings, or forego the tags altogether and create your own heading classes. No one option is a best solution in all cases.

Group Selectors

Major and minor headings on a Web page should share common styling as visual clues to their common function as section breaks in page content. Often, headings have the same font faces and colors while differing in their sizes and alignments. Use of <hn> tags makes it easy to control heading styles within embedded style sheets through use of group selectors.

A group selector is two or more tag selectors, separated by commas, that share in the same styling. For example, the following style sheet declares a common font face and color for a set of <hn> tags, establishing a common visual style for all headings used on the page.

The selector h1, h2, h3 is a group selector, meaning the associated style declarations apply to all tags in this list. Assume further that <h1> headings are centered for major content breaks, that <h2> and <h3> headings are left aligned, and that <h3> headings are displayed in italic style. These additional group and individual stylings can be added to the above style sheet.

Major Heading

Side Heading

Side Heading

Group selectors are not different in effect from simple selectors. They just permit a shorthand way to declare shared styles. They also illustrate quite clearly the concept of style interitence. In the above example, all three headings inherit the same font face and color from their participation in the overall h1, h2, h3 group selector; <h2> and <h3> headings inherit left alignment from their participation in the h2, h3 group selector. By taking advantage of such inheritence it saves from having to code separate, duplicate styles for each and every tag selector.

Incidentally, it is not necessary that group selectors be composed of the same tag type. All tags that share the same style can be part of the group selector. For example, the group selector

p, blockquote, div {font-family:verdana; font-size:10pt}

indicates that all paragraphs, blockquotes, and divisions on a page are to share the same type face and size.

The <pre> Tag

Normally, no formatting of text takes place in the browser unless it is surrounded with XHTML tags. Although editor code may be indented and line-spaced by using the Space Bar and Enter keys, all contiguous spaces and lines are collapsed to a single blank space in the browser. There is one case, though, where text as formatted in the editor can be displayed in identical fashion in the browser.

A block of text surrounded by the <pre> tag is displayed in a monospace font in precisely the way it is formatted in the editor. That is, blank spaces and blank lines used to format XHTML code in the editor are faithfully reproduced in the browser, space by space and line by line. The <pre> tag is often used to create simple tables where alignment of columns is produced with embedded blank spaces. The following code, for example, produces a table that is displayed in the browser identical to the way it is typed in the editor.

<pre>
                  Table 1
              Sales by Region
----------------------------------------------
Region/Year   2000     2001     2002     2003
----------------------------------------------
East          35.2     37.4     39.8     40.0
West          28.0     25.6     27.4     29.8
South        102.3     86.1     98.6    100.2
North         10.5      8.6      9.8     10.4
----------------------------------------------
</pre>

Because all text lines are surrounded by the <pre> tag, columns can be aligned with the Space Bar and line breaks made with the Enter key. This alignment and spacing is possible because both the editor and browser display characters in a monospace font producing equally spaced characters. You need to make sure that your editor uses a monospace font such as Courier New in order to accurately space the text. Browser output is not shown here because it is identical to the table arrangement produced in the editor.

You can include minor styling of the monospaced text as long as the formatting does not change character sizes, thereby changing the space count between letters. The following code, for example, dresses up the previous table with bold and italic font styles along with a text color. Just make sure that you align the information in the table properly before adding extra style tags, which visually displace the aligned text when viewed in the editor. These extra tags inside the <pre> tag, however, do not add spacing to the table when viewed in the browser.

<pre style="color:blue">
                  <b>Table 1</b>
              <b>Sales by Region</b>
----------------------------------------------
<b><i>Region/Year   2000     2001     2002     2003</i></b>
----------------------------------------------
<b>East</b>          35.2     37.4     39.8     40.0
<b>West</b>          28.0     25.6     27.4     29.8
<b>South</b>        102.3     86.1     98.6    100.2
<b>North</b>         10.5      8.6      9.8     10.4
----------------------------------------------
</pre>

                  Table 1
              Sales by Region
----------------------------------------------
Region/Year   2000     2001     2002     2003
----------------------------------------------
East          35.2     37.4     39.8     40.0
West          28.0     25.6     27.4     29.8
South        102.3     86.1     98.6    100.2
North         10.5      8.6      9.8     10.4
----------------------------------------------

Although the above examples show coding for a data table, a later tutorial describes use of formatting tags especially designed for laying out tables. Although these table tags are the most common way to display rows and columns of tabular information, you can use the <pre> tag as a quick and easy way to accomplish similar displays.