Headings

So far we've covered paragraphs and line breaks... but in a long document, we probably want more structure than that. How do we create section headings?

The <H> Tags

There are six levels of heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These block tags tell the browser to set off the heading from the rest of the text. The <h1> heading level is the most important heading, while the <h6> level is the least important.

Most browsers display headings in bold, with <h1> the largest and <h6> the smallest.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

What are the results?

Like the paragraph tag (<p>), the heading tags are block tags: they delineate a block of text. Each matched set of heading tags creates a new block, automatically separated from other blocks with line breaks.

Mangled Headings

In the section on paragraphs, we discussed the consequences of failing to close your <p> tags. This is even more important for heading tags.

<h3>Chapter 1

Robert Cohn was once middleweight 
boxing champion of Princeton.  Do not think I 
am very much impressed with that as a boxing
title, but it meant a lot to Cohn.

The results are not quite what we wanted...

The sensible thing to do is to close the <h3> tag. We'll put the text in its own HTML paragraph for good measure:

<h3>Chapter 1</h3>
<p>
  Robert Cohn was once middleweight 
  boxing champion of Princeton.  Do not think I 
  am very much impressed with that as a boxing
  title, but it meant a lot to Cohn.
</p>

Which results in:

The heading and paragraph are now properly separated.