HTML · Module 03 · Lesson 10 of 54

Heading Hierarchies (h1-h6)

What are Headings?

Think of a newspaper. It has a giant front-page headline (H1), medium headlines for different sections (H2), and smaller headlines for individual articles (H3). You wouldn't read a newspaper where all the text is the exact same size.

In HTML, we have six levels of headings, from <h1> to <h6>.

<h1> represents the most important heading on the page (usually the title of the article or website).

<h2> represents main sub-sections.

<h3> represents subsections inside those sub-sections, and so on.

Why does it matter?

Headings aren't just for making text big and bold. They are critical for: 1. Accessibility: Screen readers for visually impaired users use headings to build an outline of the page, allowing them to jump from section to section. 2. SEO (Search Engine Optimization): Google uses your headings to understand what your website is about. An <h1> tells Google the main topic of your page.

How to write it

Headings are written with opening and closing tags, matching the level of the heading:

<h1>Main Title</h1>
<h2>Sub-section</h2>
<h3>Detailed Sub-section</h3>

h1: Main Title

h2: Sub-section

h3: Panel Title

Common Mistakes

Skipping heading levels: Don't jump from an <h1> directly to an <h3>. Keep the hierarchy logical (<h1> -> <h2> -> <h3>).

Using headings just to size text: If you want to make text big and bold but it's not a heading, use CSS. Don't use <h2> just because you like the size.

Having multiple H1 tags: Every webpage should have exactly one <h1> to represent the main title.

Quick Reference

<h1> — The main title (highest importance).

<h2> to <h6> — Sub-headings of decreasing importance.

Your Task

Create an `<h1>` containing 'Main Title' and an `<h2>` containing 'Sub Section'.

index.html

Type code above to start the lesson.

Live Preview