Headings (h1–h6) in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of HTML heading tags <h1> to <h6>?

HTML heading tags define the titles and subtitles on a webpage. <h1> is the main title, and <h6> is the smallest subtitle. They help organize content and improve readability.

beginner

Which heading tag should be used for the main title of a webpage?

The <h1> tag should be used for the main title. It is the most important heading and usually appears once per page.

beginner

How many levels of headings are available in HTML?

There are six levels of headings in HTML: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Each level represents a smaller or less important heading.

intermediate

Why is it important to use headings in order (<h1> before <h2>, etc.)?

Using headings in order helps screen readers and search engines understand the structure of the page. It also makes the content easier to follow for all users.

intermediate

Can you use multiple <h1> tags on one webpage?

While HTML allows multiple <h1> tags, it is best practice to use only one main <h1> per page for clarity and better SEO.

Which HTML tag represents the smallest heading?

A <h4>

B <h3>

C <h1>

D <h6>

The <h6> tag is the smallest and least important heading level.

What is the main purpose of using heading tags in HTML?

A To organize content and show structure

B To add images

C To create links

D To add colors

Headings organize content and help users and search engines understand the page structure.

Which heading tag should you use for a subtitle under an <h1> heading?

A <h4>

B <h2>

C <h1>

D <h6>

The <h2> tag is used for subtitles directly under the main <h1> heading.

Is it good practice to skip heading levels, for example, going from <h1> to <h4>?

A No, it can confuse screen readers and users

B Yes, it looks nicer

C Yes, it makes the page load faster

D No, but only for <code>&lt;h5&gt;</code> and <code>&lt;h6&gt;</code>

Skipping heading levels can confuse assistive technologies and make the page structure unclear.

Which heading tag is usually used only once per page?

A <h3>

B <h2>

C <h1>

D <h5>

The <h1> tag is typically used once as the main title of the page.

Explain why using heading tags in the correct order is important for web accessibility and SEO.

Think about how people and machines read your page.

Describe the difference between <h1> and <h6> tags and when to use each.

Consider importance and size of headings.

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