Summary
To create headings in HTML, use the h1
, h2
, h3
, h4
, h5
, and h6
elements:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
To see what these elements looks like in the browser, view the Demo section below.
Details
Heading elements allow you to create titles for the various sections on your web page and help give your web page structure.
By default, the h1
element is rendered as the largest heading, and h6
is rendered as the smallest heading (you can change their size using CSS, however).
Generally speaking, you only want one h1
element per page.
Things to avoid
Don’t use the heading elements based on their size or the way they look.
When you start using heading elements, start with an h1
tag. Don’t skip to the h2
tag or any of the lower heading tags. In other words, avoid this:
<body>
<h2>Main Title</h2>
</body>
Similarly, don’t use the heading tags out of order. Avoid this:
<body>
<h6>Main Title</h6>
<h3>Subheading 1</h3>
<p>Sample paragraph.</p>
<h2>Subheading 2</h2>
<h6>Section title</h6>
<p>Section paragraph.</p>
<h4>Subheading 3</h4>
<p>Sample paragraph.</p>
</body>
Instead, do this:
<body>
<h1>Main Title</h1>
<h2>Subheading 1</h2>
<p>Sample paragraph.</p>
<h2>Subheading 2</h2>
<p>Sample paragraph.</p>
<h3>Section title</h3>
<p>Section paragraph.</p>
<h2>Subheading 3</h2>
<p>Sample paragraph.</p>
</body>
When used properly, the headings essentially form an outline of the document, which is especially useful for people using screen reader software. The example above forms the following outline:
- Main Title
- Subheading 1
- Subheading 2
- Section title
- Subheading 3
Demo
Exercises
Using your text editor or CodePen, try creating your own heading elements. Experiment with using the different levels of headings and experiment with content of varying lengths.
References
The Heading elements on MDN