Designate Headings with h h | How to Do Everything with HTML & XHTML

Designate Headings with <h#> </h#>

The purpose of the heading element is to indicate different heading levels in a document. The tags are made up of an h with a number following it. For example, to specify a level one heading, you would write:

<h1>This is a level one heading.</h1>

A level two heading would look like this:

<h2>This is a level two heading.</h2>

HTML includes six heading levels: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Try typing the following HTML code to see how the six heading levels will display on a Web browser:

<html>      <head>           <title>The Heading Element</title>      </head>      <body>           <h1>This is a level one heading.</h1>           <h2>This is a level two heading.</h2>            <h3>This is a level three heading.</h3>           <h4>This is a level four heading.</h4>           <h5>This is a level five heading.</h5>           <h6>This is a level six heading.</h6>      </body> </html>

Shortcut

Remember the file you created in Chapter 1 named template.htm? That file can save you the trouble of retyping the basic page elements every time you create a new page. Just open template.htm, then save it with a new name and, presto, you have a new HTML page ready to work with.

Now, save this file as headings.htm and open it in your Web browser. Figure 2-1 shows you what you should see when you display your page.

click to expand
Figure 2-1: The six heading levels of HTML

As you can see, the text displays in a range of different sizes, from very large to quite small. In fact, it has become commonplace to use the heading elements as an easy way to control font size. However, as you begin to learn to use HTML and XHTML, you will be wise to avoid this shortcut. The reason for this is that it defeats the purpose of the markup, which is to describe the content of your page. The <h#> elements were created to identify different divisions within a document, not to display different font sizes. To understand this concept further, consider how the text elements work.