HTML Headings Explained: h1 to h6 with Examples for Beginners

Headings in HTML are used to define titles and subtitles on a webpage. They make content easy to read for both users and search engines.

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).

Think of headings like a book outline:

  • <h1> = Book Title

  • <h2> = Chapter Title

  • <h3> = Section Title

  • … down to <h6>.

The Six Levels of Headings

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

Output in Browser:

  • Heading 1 (largest)

  • Heading 2

  • Heading 3

  • Heading 4

  • Heading 5

  • Heading 6 (smallest)

Why Are Headings Important?

  1. Readability – Breaks content into clear sections.

  2. SEO (Search Engine Optimization) – Search engines use headings to understand page structure.

  3. Accessibility – Screen readers rely on headings to help visually impaired users navigate content.

  4. Content Hierarchy – Defines the importance of sections (H1 > H2 > H3 …).

Best Practices for HTML Headings

  • Use only one <h1> per page (main topic/title).
  • Use headings in logical order (don’t jump from <h1> to <h4> directly).
  •  Keep headings short and meaningful
  • Include keywords naturally for SEO.
    Don’t use headings only for styling (use CSS for size and color).

Example: Proper Use of Headings in HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Headings Example</title>
</head>
<body>
  <h1>My Travel Blog</h1>
  <p>Welcome to my travel blog where I share my experiences.</p>

  <h2>Europe Adventures</h2>
  <h3>France</h3>
  <p>I visited Paris and loved the Eiffel Tower.</p>

  <h3>Italy</h3>
  <p>Rome was full of history and delicious food.</p>

  <h2>Asia Journeys</h2>
  <h3>Japan</h3>
  <p>Tokyo is vibrant and Kyoto is peaceful.</p>
</body>
</html>

FAQs

Q1. Can I use multiple <h1> tags on one page?

  • Technically yes, but best practice is to have only one <h1> for clarity and SEO.

Q2. What is the difference between headings and paragraphs?

  • Headings (<h1>–<h6>) are for titles, while <p> is for normal text content.

Q3. Do headings affect SEO ranking?

  • Yes. Properly structured headings help search engines understand your content better.

Q4. Can I style headings with CSS?

  • Absolutely. You can change font, size, and color using CSS. Example:

 
h1 { color: blue; font-size: 36px; }

Q5. What happens if I skip heading levels?

  • Browsers won’t break, but skipping levels (e.g., from <h1> to <h4>) makes your page less structured and may confuse users and search engines.