Headings (h1–h6) in HTML

Introduction

Headings help organize content on a webpage. They show what each section is about in a clear way.

To give a title to the whole page or main topic.

To label different sections or parts of content.

To create a clear structure that helps readers scan the page.

To improve accessibility by letting screen readers understand the page layout.

To help search engines know what your page is about.

Syntax

HTML

<h1>Heading text</h1>
<h2>Subheading text</h2>
<h3>Smaller subheading</h3>
...
<h6>Smallest heading</h6>

Use <h1> for the main title, then <h2> for subsections, and so on.

Headings go from h1 (biggest) to h6 (smallest).

Examples

This is the main heading of the page.

HTML

<h1>Welcome to My Website</h1>

A subheading for a section about the website or company.

HTML

<h2>About Us</h2>

A smaller heading inside the About Us section.

HTML

<h3>Our Team</h3>

A heading for contact details, smaller than previous headings.

HTML

<h4>Contact Info</h4>

Sample Program

This page uses headings from h1 to h4 to organize content clearly. The main title is h1. Sections like Breakfast and Dinner use h2. Recipes inside use h3. The footer has a smaller heading h4.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Heading Example</title>
</head>
<body>
  <header>
    <h1>My Favorite Recipes</h1>
  </header>
  <main>
    <section>
      <h2>Breakfast</h2>
      <article>
        <h3>Pancakes</h3>
        <p>Fluffy and easy to make.</p>
      </article>
      <article>
        <h3>Omelette</h3>
        <p>Quick and healthy.</p>
      </article>
    </section>
    <section>
      <h2>Dinner</h2>
      <article>
        <h3>Spaghetti</h3>
        <p>Classic Italian pasta.</p>
      </article>
    </section>
  </main>
  <footer>
    <h4>Contact Us</h4>
    <p>Email: [e-mail]</p>
  </footer>
</body>
</html>

Important Notes

Always use headings in order. Don't jump from h1 to h4 without h2 or h3 in between.

Headings improve page readability and help people who use screen readers.

Use CSS to style headings if you want different colors or fonts, but keep the heading tags for structure.

Summary

Headings organize your page content from big (h1) to small (h6).

Use headings to make your page easy to read and understand.

Proper heading order helps accessibility and SEO.

Practice

1. Which HTML tag represents the largest heading on a webpage?

easy

A. <h5>

B. <h1>

C. <h3>

D. <h6>

Solution

1. Step 1: Understand heading sizes

   HTML headings range from <h1> (largest) to <h6> (smallest).

2. Step 2: Identify the largest heading tag

   The <h1> tag is the biggest and most important heading on a page.

3. Final Answer:

   <h1> -> Option B

4. Quick Check:

   Largest heading = <h1> [OK]

Hint: Remember: h1 is biggest, h6 is smallest [OK]

Common Mistakes:

• Confusing h3 or h5 as largest heading
• Thinking h6 is the biggest heading
• Mixing heading tags with paragraph tags

2. Which of the following is the correct syntax for a level 3 heading in HTML?

easy

A. <h2>Heading Text</h2>

B. <h33>Heading Text</h33>

C. <heading3>Heading Text</heading3>

D. <h3>Heading Text</h3>

Solution

1. Step 1: Recall heading tag syntax

   HTML heading tags use the format <hN>...</hN> where N is a number 1 to 6.

2. Step 2: Identify correct level 3 heading

   The correct tag for level 3 heading is <h3> with matching closing tag </h3>.

3. Final Answer:

   <h3>Heading Text</h3> -> Option D

4. Quick Check:

   Correct syntax for h3 = <h3>...</h3> [OK]

Hint: Use h1 to h6 tags with matching closing tags [OK]

Common Mistakes:

• Using invalid tags like <heading3>
• Mismatched opening and closing tags
• Using numbers incorrectly like <h33>

3. What will be the visual result of this HTML code?

<h1>Title</h1>
<h4>Subtitle</h4>
<h2>Section</h2>

medium

A. All headings appear the same size

B. Title is smallest, Subtitle is largest, Section is medium

C. Title is largest, Section is medium, Subtitle is smallest

D. Subtitle is largest, Title is medium, Section is smallest

Solution

1. Step 1: Understand heading size order

   Heading sizes go from <h1> largest to <h6> smallest.

2. Step 2: Compare given headings

   <h1> Title is largest, <h2> Section is medium, <h4> Subtitle is smaller than h2.

3. Final Answer:

   Title is largest, Section is medium, Subtitle is smallest -> Option C

4. Quick Check:

   h1 > h2 > h4 sizes [OK]

Hint: Lower number means bigger heading size [OK]

Common Mistakes:

• Assuming h4 is bigger than h2
• Thinking all headings have same size
• Mixing order of heading sizes

4. Identify the error in this HTML snippet:

<h2>Welcome<h2>

medium

A. Missing closing tag should be </h2>

B. Tag <h2> is not valid in HTML

C. Heading tags cannot contain text

D. Opening tag should be <h3> instead

Solution

1. Step 1: Check tag correctness

   The opening tag is <h2>, but the closing tag is incorrectly written as <h2> instead of </h2>.

2. Step 2: Identify proper closing tag

   HTML requires closing tags to have a slash, so it should be </h2> to close the heading properly.

3. Final Answer:

   Missing closing tag should be </h2> -> Option A

4. Quick Check:

   Closing tags need slash / [OK]

Hint: Closing tags must have a slash before tag name [OK]

Common Mistakes:

• Forgetting the slash in closing tags
• Thinking heading tags can't have text
• Confusing tag names like h2 and h3

5. You want to create a page with a main title, two sections each with subtitles, and sub-subtitles under each subtitle. Which heading order is best practice for accessibility and SEO?

hard

A. <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4>

B. <h3>Main Title</h3>, <h1>Section</h1>, <h2>Subtitle</h2>, <h4>Sub-subtitle</h4>

C. <h4>Main Title</h4>, <h3>Section</h3>, <h2>Subtitle</h2>, <h1>Sub-subtitle</h1>

D. <h2>Main Title</h2>, <h3>Section</h3>, <h4>Subtitle</h4>, <h5>Sub-subtitle</h5>

Solution

1. Step 1: Understand heading hierarchy

   Headings should start with <h1> for main title, then <h2> for sections, <h3> for subtitles, and <h4> for sub-subtitles.

2. Step 2: Check options for correct order

   <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4> follows the correct descending order from h1 to h4, which helps screen readers and SEO understand content structure.

3. Final Answer:

   <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4> -> Option A

4. Quick Check:

   Proper heading order = h1, h2, h3, h4 [OK]

Hint: Use headings in descending order from h1 to h6 [OK]

Common Mistakes:

• Starting main title with h3 or lower
• Skipping heading levels randomly
• Using bigger numbers for main titles