HTML headings define the structure and hierarchy of a web page. Search engines and screen readers use headings to understand page layout and content topics.
HTML provides six heading tags, ranging from <h1> down to <h6>. <h1> represents the highest importance heading, while <h6> represents the lowest.
<h1>Heading 1 (Main Topic)</h1>
<h2>Heading 2 (Major Section)</h2>
<h3>Heading 3 (Sub-section)</h3>
<h4>Heading 4 (Minor Sub-topic)</h4>
<h5>Heading 5 (Small Sub-heading)</h5>
<h6>Heading 6 (Lowest Level Heading)</h6>
Headings create a visual tree for readers scanning your page. Browsers display <h1> with the largest text size by default, while <h6> is the smallest.
flowchart TD
A["h1: Main Article Title"] --> B1["h2: Section 1"]
A --> B2["h2: Section 2"]
B1 --> C1["h3: Sub-topic 1.1"]
B1 --> C2["h3: Sub-topic 1.2"]
B2 --> C3["h3: Sub-topic 2.1"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Headings Structure Example</title>
</head>
<body>
<!-- Main Page Title -->
<h1>Web Development Basics</h1>
<!-- Major Section 1 -->
<h2>1. Frontend Technologies</h2>
<!-- Sub-section under Frontend -->
<h3>HTML5 Overview</h3>
<p>HTML creates the markup structure of web pages.</p>
<h3>CSS3 Styling</h3>
<p>CSS controls colors, layout, and visual presentation.</p>
<!-- Major Section 2 -->
<h2>2. Backend Technologies</h2>
<p>Backend systems process business logic and data storage.</p>
</body>
</html>
<h1> or <h2> tags simply to make text bigger or bolder. Use CSS font utilities for text styling instead.<h2> to <h3> rather than jumping directly from <h2> to <h4>.<h2>, <h3>) clearly relate to their parent headings to preserve clean accessibility trees for screen readers.Build a structured outline for a recipe web page using <h1> for the recipe title, <h2> for Ingredients and Instructions sections, and <h3> for step groups!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.