HTML provides six heading levels, from <h1> to <h6>. Use them to describe the structure of a page: <h1> for the main page heading, then <h2>, <h3> and lower levels for nested sections.

<h1>Main page topic</h1>
<h2>Main section</h2>
<h3>Subsection</h3>

The Six Heading Levels Top ↑

HTML defines these six heading elements:

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

The levels describe hierarchy. <h1> is the highest level and <h6> is the lowest.

H1: Main Page Heading Top ↑

The <h1> element normally identifies the main topic of the page.

<h1>HTML Forms Tutorial</h1>

In a tutorial page, the H1 should make the page topic immediately clear.

H2: Main Sections Top ↑

Use <h2> for major sections that belong directly under the main H1 topic.

<h1>HTML Forms</h1>

<h2>Text Inputs</h2>
<h2>Checkboxes</h2>
<h2>Radio Buttons</h2>

H3: Subsections Top ↑

Use <h3> when a section belongs under an H2.

<h2>Text Inputs</h2>
<h3>maxlength Attribute</h3>
<h3>placeholder Attribute</h3>

This makes the relationship between the main section and its subsections explicit.

H4 to H6 Top ↑

Use lower heading levels when your content needs deeper structure.

<h2>Forms</h2>
<h3>Input Validation</h3>
<h4>Length Validation</h4>
<h5>Maximum Length</h5>
<h6>Special Case</h6>

Do not use deeper levels merely because you prefer their default font size.

Build a Logical Heading Hierarchy Top ↑

A simple page might follow this structure:

<h1>MySQL Tutorial</h1>

<h2>Reading Data</h2>
<h3>SELECT Query</h3>
<h3>WHERE Condition</h3>

<h2>Changing Data</h2>
<h3>INSERT Query</h3>
<h3>UPDATE Query</h3>

The hierarchy should reflect the relationships between sections. In ordinary document structure, avoid jumping from H2 directly to H4 merely to obtain a particular appearance.

Should a Page Have Only One H1? Top ↑

HTML does not make a page invalid merely because it contains more than one <h1>. However, for a normal tutorial or article page, using one clear H1 for the main page topic usually produces the simplest and most understandable document structure.

Then use H2 and lower levels for sections beneath it.

Heading Size and Appearance Top ↑

Browsers apply default styles to heading elements, but the exact size and spacing should not be treated as the meaning of the heading level.

Use CSS to change the visual appearance:

<style>
h2 {
  font-size: 1.75rem;
  margin-top: 2rem;
}
</style>

See styling heading tags with CSS and CSS font styling.

Headings and Accessibility Top ↑

Heading structure helps users scan a page and helps assistive technologies navigate between sections.

• Write headings that describe the section that follows.
• Keep the hierarchy meaningful.
• Do not use empty headings.
• Do not choose heading levels only for visual styling.
• Use CSS for appearance rather than changing semantic levels.

A well-structured heading outline makes long tutorials easier to navigate for all users.

Headings and SEO Top ↑

Headings help communicate page structure and topic relationships to both users and search systems. Their main purpose is still to organize content clearly.

Use natural, descriptive headings that match the section content. Avoid repeating the same keyword unnecessarily or turning every sentence into a heading.

Common Heading Mistakes Top ↑

Choosing a heading because of its default size Top ↑

Choose the semantic level first and use CSS for visual size.

Using headings as ordinary bold text Top ↑

Use heading elements only when the text introduces a real section or subsection.

Skipping levels without a structural reason Top ↑

A logical H1 → H2 → H3 structure is easier to understand than jumping levels simply for styling.

Using the obsolete font tag inside headings Top ↑

Use CSS instead of <font>.

Stuffing keywords into headings Top ↑

Write headings for clarity and accurately describe the section.

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: