Heading Level Tags

Return to Main Page of Ted’s HTML Tutorial

To help define the hierarchy and the structure of a web page, headings can be used. (These are not the same as the <HEAD> & </HEAD> tags used to demarcate the header section of an HTML source code document.)

HTML uses six levels of “heading level” tag pairs; the smaller the heading level number, the larger is the print size:

<H1>heading</H1>: creates heading level #1 (24 point type—largest)

<H2>heading</H2>: creates heading level #2 (18 point type)

<H3>heading</H3>: creates heading level #3 (14 point type)

<H4>heading</H4>: creates heading level #4 (12 point type)

<H5>heading</H5>: creates heading level #5 (10 point type)

<H6>heading</H6>: creates heading level #6 (8 point type—smallest)
A line space automatically is inserted before and after a heading (that is, an entire line is skipped between a heading and any text before and after it). Note: No matter what the font size is, headings with the same level number are always the same size.

Note: Headings are always in bold print.

The <H#> tag may contain within it an alignment parameter (recognized by most browsers) as part of the command:

ALIGN="LEFT"|"CENTER"|"RIGHT": positions the heading at a specific location on the page. "LEFT" (the default) aligns the heading with the left margin of the page.
"CENTER" centers the heading horizontally on the page.
"RIGHT" aligns the heading with the right margin of the page.
Note: Some browsers do not recognize the ALIGN parameter for headings.

In most cases, it is preferable for a heading to be centered horizontally on the page. However, since some browsers so not recognize the ALIGN parameter for headings, it is a good idea to center a heading by using <CENTER> & </CENTER> tags.

Below are 2 groups of headings (along with a horizontal rule, or <HR>, in each group), followed by what the marked up versions look like as displayed on a web browser. The first group employs the ALIGN parameter in the <H#> tags. The second group is centered using <CENTER> & </CENTER> tags.

If the ALIGN parameter is recognized by a browser, this group of headings:

<H1 ALIGN="CENTER">Heading Alignment</H1>
<HR WIDTH="36%" SIZE="5" NOSHADE="NOSHADE">
<H1 ALIGN="LEFT">Heading Level #1</H1>
<H2 ALIGN="CENTER">Heading Level #2</H2>
<H3 ALIGN="RIGHT">Heading Level #3</H3>
<H4 ALIGN="LEFT">Heading Level #4</H4>
<H5 ALIGN="CENTER">Heading Level #5</H5>
<H6 ALIGN="RIGHT">Heading Level #6</H6> would appear properly centered, left justified, and right justified on a browser like this:

Heading Alignment

Heading Level #1

Heading Level #2

Heading Level #3

Heading Level #4

Heading Level #5

Heading Level #6

Note: The CENTER alignment attribute was not used in the <HR> tag, because ALIGN="CENTER" is the default for the horizontal rule.

These same headings centered with <CENTER> & </CENTER> tags:

<CENTER>
<H1>Heading Centering</H1>
<HR WIDTH="35%" SIZE="5" NOSHADE="NOSHADE">
<H1>Heading Level #1</H1>
<H2>Heading Level #2</H2>
<H3>Heading Level #3</H3>
<H4>Heading Level #4</H4>
<H5>Heading Level #5</H5>
<H6>Heading Level #6</H6>
</CENTER> would look like this:

Heading Centering

Heading Level #1

Heading Level #2

Heading Level #3

Heading Level #4

Heading Level #5

Heading Level #6

The appearance of any heading may be matched with bold print of the appropriate font size. These two groups of HTML commands:

<H1>Heading Level #1</H1>		<FONT SIZE="6"><B>Heading Level #1</B></FONT>
<H2>Heading Level #2</H2>		<FONT SIZE="5"><B>Heading Level #2</B></FONT>
<H3>Heading Level #3</H3>		<FONT SIZE="4"><B>Heading Level #3</B></FONT>
<H4>Heading Level #4</H4>		<FONT SIZE="3"><B>Heading Level #4</B></FONT>
<H5>Heading Level #5</H5>		<FONT SIZE="2"><B>Heading Level #5</B></FONT>
<H6>Heading Level #6</H6>		<FONT SIZE="1"><B>Heading Level #6</B></FONT>

will produce identical markups on a browser:

Heading Level #1		Heading Level #1
Heading Level #2		Heading Level #2
Heading Level #3		Heading Level #3
Heading Level #4		Heading Level #4
Heading Level #5		Heading Level #5
Heading Level #6		Heading Level #6

In some cases, one may not wish for the headings on a web page to be limited to six (6) standard font sizes. There is a way to make every heading level, throughout the entire page, be any size and color one wishes it to be, using “style” tags:

<STYLE>H_ {FONT-SIZE: ___pt; COLOR: ___}</STYLE>: specifies the exact font size and color of a particular heading. Note: The heading level may be 1, 2, 3, 4, 5, or 6. The font size, in points, may be any positive whole number. The color may be expressed either as a hexidecimal code (see Categorized Color Charts) or as a color name (see Color Names Charts).

Normally, heading levels 2 (<H2> & </H2>) and 3 (<H3> & </H3>) are sizes 18-point and 14-point, respectively. As typically written here, these headings: <CENTER>
<H2>Heading #2</H2>
<H3>Heading #3</H3>
</CENTER> would appear this way:

Heading #2

Heading #3

However, one might wish for the respective size of each of these heading levels to be somewhat larger, as well as the same respective color to be uniform, throughout a page. In such a case, the following size and color specifications: <STYLE>H2 {FONT-SIZE: 21pt; COLOR: #000080}; H3 {FONT-SIZE: 17pt; COLOR: #008000}</STYLE>
<CENTER>
<H2>Heading #2</H2>
<H3>Heading #3</H3>
</CENTER> now would cause the headings to appear like this:

Proceed to Text Modification Characters & Tags

Return to Main Page of Ted’s HTML Tutorial