Heading Level Tags

or scroll down the page.

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:

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

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:

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

Copyright © 1998– by Ted M. Montgomery.  All rights reserved.