<h1> to <h6>

Since:		HTML 4（1997）

The <h1> through <h6> tags represent headings in a document. Lower numbers indicate higher importance: <h1> is the most important heading on the page, while <h6> is the least important. By default, browsers render headings in progressively smaller font sizes as the number increases.

Syntax

<h1>Most important heading (page title)</h1>
<h2>Chapter heading</h2>
<h3>Section heading</h3>
<h4>Subsection heading</h4>
<h5>Minor heading</h5>
<h6>Least important heading</h6>

Tag list

Tag	Description
<h1>	The most important heading on the page. Typically used for the page title. One per page is recommended.
<h2>	A chapter-level heading. Used for the main sections within a page.
<h3>	A section-level heading. Used for subsections within an `<h2>` section.
<h4>	A subsection-level heading. Used for content nested beneath an `<h3>` section.
<h5>	A heading for finer-grained groupings. Rarely used in real-world websites.
<h6>	The least important heading. Almost never used in real-world websites.

Sample code

sample_h1_h6.html

<!-- Typical heading hierarchy for an article -->
<article>
  <!-- Use h1 once per page to represent the main topic -->
  <h1>JavaScript Basics</h1>

  <!-- h2 for chapter headings -->
  <h2>Variables and Types</h2>
  <p>In JavaScript, you declare variables using ‘let’ or ‘const’.</p>

  <h3>String type</h3>
  <p>Wrap values in single or double quotes.</p>

  <h3>Number type</h3>
  <p>Integers and decimals are treated as the same type.</p>

  <!-- Next h2 section -->
  <h2>Control Flow</h2>
  <p>Learn about conditional branching and loops.</p>

  <h3>if statement</h3>
  <p>Branches execution based on a condition.</p>
</article>

<!-- Default rendering of h1–h6 (for size reference) -->
<h1>h1 — Main page title</h1>
<h2>h2 — Chapter heading</h2>
<h3>h3 — Section heading</h3>
<h4>h4 — Subsection heading</h4>
<h5>h5 — Minor heading</h5>
<h6>h6 — Smallest heading</h6>

<!-- Using h1 for the site name and h2 for each section -->
<body>
  <header>
    <!-- h1 for the site name -->
    <h1>Programming Tutorial Site</h1>
  </header>
  <main>
    <!-- Each section starts with h2 -->
    <section>
      <h2>HTML Basics</h2>
      <p>Learn how to structure web pages with HTML.</p>
    </section>
    <section>
      <h2>CSS Basics</h2>
      <p>Learn how to style web pages with CSS.</p>
    </section>
  </main>
</body>

Result

Browsers interpret each heading tag as part of a hierarchy. <h1> is rendered in the largest, boldest font, and the font size decreases as the number increases. Spacing is automatically added above and below each heading.

View sample page

Notes

Heading tags are meant to define the hierarchical structure (outline) of a document. Using <h1> just to make text look large, or <h4> just to make it look small, is incorrect usage. Adjust visual size with CSS, and choose heading levels based on meaning and role.

It is recommended to use <h1> only once per page. Search engines (SEO) treat <h1> as the main topic of the page, so it is important to put text that clearly describes the page content in the <h1>.

Avoid skipping heading levels. For example, do not jump from <h1> directly to <h3>; use them in order: <h1> → <h2> → <h3>. Screen reader users navigate by heading tags, so a well-structured heading hierarchy has a significant impact on accessibility.

Browser Compatibility

Desktop

Chrome

1 and later ○

Firefox

1 and later ○

Safari

1 and later ○

Edge

12 and later ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 and later ○

14 and earlier ×

Mobile

iOS Safari

1 and later ○

Android Browser

4.4 and later ○

4 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

CSS Styling

Browsers apply default font sizes to each heading tag. The table below shows the default values in Chrome/Firefox.

Tag	Default Size (px)	em Equivalent	font-weight
<h1>	32px	2em	bold
<h2>	24px	1.5em	bold
<h3>	18.72px	1.17em	bold
<h4>	16px	1em	bold
<h5>	13.28px	0.83em	bold
<h6>	10.72px	0.67em	bold

In real-world projects, default styles are typically reset and redefined to match the design system.

/* Reset and customize heading styles */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  line-height: 1.3;
}

h1 {
  font-size: 2rem;    /* 32px when base font size is 16px */
  color: #1a1a1a;
}

h2 {
  font-size: 1.5rem;  /* 24px */
  color: #333;
  border-bottom: 2px solid #4488ff; /* divider line */
  padding-bottom: 0.25em;
}

h3 {
  font-size: 1.25rem; /* 20px */
  color: #444;
}

SEO and the Importance of h1

Search engines like Google treat the <h1> as the primary signal of a page's topic. Setting it correctly has a direct impact on SEO.

Item	Best Practice
Number of h1s	One per page is recommended. Multiple h1s can dilute SEO signals
h1 text	Include target keywords that concisely describe the page's main topic. Should match or be close to the title tag
Heading hierarchy	Follow h1→h2→h3 order. Skipping levels (h1→h3) breaks screen reader navigation
Keyword stuffing	Excessive keywords can be flagged as spam — keep it natural

<!-- Good: h1 clearly represents the page topic -->
<h1>How to Use JavaScript async/await [With Code Examples]</h1>

<!-- Bad: keyword stuffing in h1 -->
<h1>JavaScript async await Promise then how to use tutorial beginner guide</h1>

If you find any errors or copyright issues, please contact us.

Home

HTML Dictionary

<h1> to <h6>

Syntax

Tag list

Sample code

sample_h1_h6.html

Result

Notes

Browser Compatibility

CSS Styling

SEO and the Importance of h1