Headings (h1–h6) in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Visual difference between heading levels

Look at the following HTML snippet. Which heading will appear largest on the page?

HTML

<h1>Heading One</h1>
<h3>Heading Three</h3>
<h6>Heading Six</h6>

A The <h6> heading

B The <h1> heading

C The <h3> heading

D All headings appear the same size

💡 Hint

Remember, heading tags from h1 to h6 decrease in size.

The <h1> tag is the largest heading by default, followed by <h2>, <h3>, down to <h6> which is the smallest.

🧠 Conceptual

intermediate

Proper use of heading levels for accessibility

Why is it important to use heading tags (<h1> to <h6>) in order without skipping levels?

A Because skipping levels changes the font color automatically

B Because browsers will not display headings if levels are skipped

C Because screen readers rely on heading order to navigate content

D Because headings must always be used in pairs

💡 Hint

Think about how people who use assistive technology read web pages.

Screen readers use heading levels to create a content outline, so skipping levels can confuse users who rely on them.

📝 Syntax

advanced

Identify the invalid heading tag

Which of these heading tags is NOT valid HTML5?

A <h0>Title</h0>

B <h1>Title</h1>

C <h4>Title</h4>

D <h6>Title</h6>

💡 Hint

Valid heading tags are numbered from 1 to 6.

HTML5 defines heading tags only from <h1> to <h6>. <h0> is not a valid tag.

❓ selector

advanced

CSS selector for all heading tags

Which CSS selector will select all heading tags from <h1> to <h6>?

A h*

B heading

C h1-h6

D h1, h2, h3, h4, h5, h6

💡 Hint

Think about how to list multiple selectors separated by commas.

To select multiple elements, list them separated by commas. There is no wildcard selector like h* for tags.

❓ accessibility

expert

Screen reader behavior with multiple <h1> tags

What happens when a webpage uses multiple <h1> tags for different sections?

A Screen readers treat each &lt;h1&gt; as a new main section, improving navigation

B Screen readers treat all &lt;h1&gt; tags as one heading

C Screen readers crash or stop reading the page

D Screen readers ignore all but the first &lt;h1&gt; tag

💡 Hint

Modern HTML5 allows multiple <h1> tags if used correctly.

Using multiple <h1> tags inside different sections or articles is valid and helps screen readers navigate distinct main sections.