<h1> to <h6>

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

<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>

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.

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.