HTML5

How to Define an HTML Heading in HTML5?

HTML defines six levels of headings, from <h1> (most important) down to <h6> (least important). Headings create the document outline that search engines and screen readers rely on. <h1> is the main title; lower levels denote subsections in a logical hierarchy.

The Six Heading Levels

Tag	Level	Typical Use
<h1>	1 (highest)	Page or main content title — use once per page
<h2>	2	Major section headings
<h3>	3	Subsections under an <h2>
<h4>	4	Sub-subsections
<h5>	5	Minor headings
<h6>	6 (lowest)	Least important headings

Runnable Example

All six heading levels in a logical hierarchy

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Headings Demo</title>
</head>
<body>
  <h1>HTML5 Tutorial</h1>
  <h2>Chapter 1: Basics</h2>
  <h3>1.1 Tags</h3>
  <h3>1.2 Attributes</h3>
  <h2>Chapter 2: Media</h2>
  <h3>2.1 Audio</h3>
  <h4>2.1.1 Controls</h4>
  <h5>A minor heading</h5>
  <h6>The smallest heading</h6>
</body>
</html>

💡

Use only ONE <h1> per page for the main title, and never skip levels for styling (do not jump from <h2> to <h4>). Control size with CSS, not by choosing a different heading level.

Why Hierarchy Matters

Search engines use headings to understand page structure and rank content.
Screen-reader users navigate by jumping between headings.
A clean outline improves readability and maintainability.

Key Takeaways

Headings range from <h1> (most important) to <h6> (least).
Use one <h1> per page and keep levels in order.
Headings define the document outline for SEO and accessibility.
Size headings with CSS, not by misusing levels.