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 Elements

There are six levels of heading elements: h1, h2, h3, h4, h5, and h6. These block elements 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.

Like the paragraph element p, the heading elements are block elements. Each matched set of heading elements creates a new block, automatically separated from other blocks with line breaks.

Mangled Headings

In “Paragraph Breaks”, we discussed the consequences of failing to close your open <p> tags. This is even more important for heading elements.

Whoops! The h1 element’s oversized, bold font has spilled over onto the rest of the text. The browser has no indication where the h1 element is supposed to end, and so it interprets the h1 element as enclosing everything else on the page.

Let’s fix this by closing the open <h1> tag. We’ll put the text in its own HTML paragraph for good measure:

The heading and paragraph are now properly separated.