If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

So far, we’ve looked at paragraphs and line breaks. In longer documents, though, we need more structure. How do we create section headings?

The h Elements

HTML provides six levels of heading elements: h1, h2, h3, h4, h5, and h6. These block elements help organize content by indicating headings and subheadings. h1 is the most important heading, while h6 is the least important.

By default, 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>

Like the paragraph element (p), headings are block elements. Each heading creates its own block, automatically separated from other content with line breaks.

Why Closing Tags Matter

In “Paragraph Breaks”, we discussed problems caused by leaving <p> tags unclosed. The same principle applies to headings: failing to close a heading tag can cause formatting issues for the content that follows.

<h1>STAVE I: MARLEY'S GHOST						
MARLEY was dead: to begin with. There is no doubt
whatever about that. The register of his burial was
signed by the clergyman, the clerk, the undertaker,
and the chief mourner. Scrooge signed it: and
Scrooge's name was good upon 'Change, for anything he
chose to put his hand to. Old Marley was as dead as a
door-nail.

Here, the h1 tag wasn’t closed. The browser treats all subsequent text as part of the heading, making the oversized bold font spill over the rest of the content.

We can fix this by closing the <h1> tag and placing the paragraph text in its own p element:

<h1>STAVE I: MARLEY'S GHOST</h1>
<p>
MARLEY was dead: to begin with. There is no doubt
whatever about that. The register of his burial was
signed by the clergyman, the clerk, the undertaker,
and the chief mourner. Scrooge signed it: and
Scrooge's name was good upon 'Change, for anything he
chose to put his hand to. Old Marley was as dead as a
door-nail.
</p>

Now the heading and paragraph are properly separated, and the page displays as intended.