🎓 A1Learner
🔍

HTML Headings

An HTML heading is a title line that labels a section of a page. HTML provides six heading levels, named h1 through h6.

The main heading

The h1 element holds the main title. It is the largest heading by default.

<h1>City Guide</h1>

The first three levels

Each lower level marks a smaller section. The text of each level appears in order.

<h1>City Guide</h1>
<h2>Places to Eat</h2>
<h3>Street Food</h3>

The smallest levels

Levels h4 to h6 mark fine detail. Pages use them less often.

<h4>Opening Times</h4>
<h5>Weekdays</h5>
<h6>Public Holidays</h6>

Example

<!DOCTYPE html>
<html>
<head>
<title>Garden Guide</title>
</head>
<body>
<h1>Garden Guide</h1>
<h2>Plants</h2>
<p>Roses need full sun.</p>
<h2>Tools</h2>
<p>A spade digs the soil.</p>
</body>
</html>

Key points

  • h1 element: the main heading of the page
  • h2 to h6 elements: headings for smaller sections
  • Use one h1 element as the main title of a page
  • Use lower levels for sections under a higher heading
  • A heading labels the content that follows it.

In this example, the h1 heading gives the page its main title. The first h2 heading labels the plants section. A short paragraph follows it. The second h2 heading labels the tools section. Its paragraph follows in the same pattern.

Note

Choose a heading level by importance, not by desired size.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which element holds the main title of a page?