Runnable HTML Docs: Headings

Q: How many heading tags are there in HTML?

Six: , , , , and . is the most important (the page title) and the least. There is no ; a tag like that is treated as an unknown inline element.

Q: What are the default sizes of HTML headings?

With the default 16px text, browsers render h1 at 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) and h6 10.72px (0.67em), all bold.

Q: Can I have more than one h1 on a page?

HTML allows it, but one naming the page is the clearest structure for screen reader users and search engines. Use for the main sections under it.

Q: How do I change the size of a heading?

Set font-size in CSS, for example h2 { font-size: 20px; } or a class on one heading. Never pick a heading level because of its default size.

The six HTML heading tags

HTML has six heading levels, <h1> to <h6>. <h1> is the top level (the title of the page) and <h6> the lowest. Browsers show each level smaller than the one before, all in bold, each on its own line:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Tag	Default size	With 16px text
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> and <h6> are smaller than normal text by default, which surprises people. The size is only a default, and the next sections show why the level should never be picked by size.

Headings are the page outline

Headings are not decoration. Together they form the outline of the page, like the table of contents of a book. Screen reader users jump from heading to heading to find what they want, and search engines read them to understand the topics on the page.

The rule is simple: one <h1> for the page title, <h2> for each main section, <h3> for subsections inside an <h2>, and so on, without skipping levels. This example builds a table of contents from the headings, the same way assistive tools see them:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Change the second <h3> to <h5> and the outline shows a gap: a reader using headings would wonder where h4 went.

Changing the size of a heading

Pick the level by position in the outline, then set the look with CSS. A sidebar title may need to be an <h2> but look small; a hero title may be an <h1> that is very large:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

The same applies in reverse: do not use a heading tag just to make text big or bold. For bold words inside a sentence use <strong>, and for big text that is not a heading use a <p> with a class. See bold for the text tags.

Subtitles and taglines

A subtitle directly under a heading is usually not a heading itself: it does not start a new section. Use a paragraph, and group the pair with <hgroup> if you like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

The outline stays clean (one h1, then h2 sections), and the tagline still sits visually with the title.

Linking to a heading

Give a heading an id and any link with #id in its href jumps straight to it. This is how tables of contents and "copy link to section" buttons work:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Common mistakes

Choosing the level for its size. Pick by outline position, then style with CSS.
Skipping levels. Going from <h2> straight to <h4> breaks navigation for screen reader users.
Headings for emphasis. A bold line inside a paragraph is <strong>, not <h4>.
No <h1>, or a logo as the only <h1>. The <h1> should name the page content, like the article or product title.
Empty headings. A heading with only an icon or nothing inside is announced as blank. Put real text in it.

Frequently Asked Questions

How many heading tags are there in HTML?

Six: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. <h1> is the most important (the page title) and <h6> the least. There is no <h7>; a tag like that is treated as an unknown inline element.

What are the default sizes of HTML headings?

With the default 16px text, browsers render h1 at 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) and h6 10.72px (0.67em), all bold.

Can I have more than one h1 on a page?

HTML allows it, but one <h1> naming the page is the clearest structure for screen reader users and search engines. Use <h2> for the main sections under it.

Can I skip heading levels, like h2 to h4?

Avoid it. Screen reader users navigate by heading level, and a jump from h2 to h4 suggests a missing section. Choose the level by position in the outline and change the size with CSS.

How do I change the size of a heading?

Set font-size in CSS, for example h2 { font-size: 20px; } or a class on one heading. Never pick a heading level because of its default size.

Related concepts