Headings (h1 to h6)

In Plain English

HTML provides 6 levels of headings: <h1> through <h6>. <h1> represents the main topic of the entire page, while <h6> is a tiny sub-heading. They are vital for both human readability and Google SEO search ranking.

The Mental Model

"Imagine a newspaper. <h1> is the giant front-page headline: "HUMANS LAND ON MARS". <h2> is a section title: "Rocket Details". <h3> is a subsection: "Fuel Tanks". You would never put five front-page headlines on one newspaper!"

Deep Dive: How It Works

Heading scale: <h1> is the largest and most important. <h6> is the smallest and least important.

SEO Golden Rule: Have exactly ONE <h1> per webpage representing the primary topic.

Never skip levels: Don't jump from <h1> straight to <h4> just because you want smaller text—use CSS for styling and HTML headings for semantic structure.

Syntax Blueprint

<h1>Main Title</h1>
<h2>Section Header</h2>
<h3>Subsection</h3>

Strict numerical order indicates depth in your document hierarchy.

Core Rules to Remember

One h1 Per Page: Tells search engines and screen readers what the page is about.

Semantic Hierarchy: Use headings to outline content logically like a book table of contents.

Block Elements: Headings automatically take up full available width and break onto new lines.

Common Beginner Traps & How to Fix Them

Mistake:Using h1-h6 just to make text bigger or smaller

Why it happens: Thinking headings are font-size presets rather than structural markers.

How to fix: Use headings for semantic structure and CSS font-size for purely visual styling.

Pro Tip: Screen readers used by visually impaired users often read just the headings first so users can quickly navigate to sections.

Live Interactive Example

Hit Run Code to see it live

Heading Hierarchy in Action

HTML5

Live Browser Preview

Click "Preview / Apply" to view the rendered output.

How it works: Each heading level establishes clear visual hierarchy and structure.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Create an h1 and h2 hierarchy

Create an <h1> heading with text "Portfolio"
Below it, create an <h2> heading with text "Recent Projects"

Browser Preview & Output

Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

Deep Dive: How It Works

Heading scale: <h1> is the largest and most important. <h6> is the smallest and least important.

SEO Golden Rule: Have exactly ONE <h1> per webpage representing the primary topic.

Never skip levels: Don't jump from <h1> straight to <h4> just because you want smaller text—use CSS for styling and HTML headings for semantic structure.