SEO-friendly HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use semantic HTML tags for SEO?

Which of the following best explains why semantic HTML tags improve SEO?

A They help search engines understand the structure and meaning of the content better.

B They make the page load faster by reducing file size.

C They automatically add keywords to the page metadata.

D They hide content from users but show it to search engines.

💡 Hint

Think about how search engines read and rank pages.

Semantic tags like <article> and <header> give meaning to content sections. This helps search engines understand what the page is about, improving SEO.

📝 Syntax

intermediate

Correct use of heading tags for SEO

Which option shows the correct order of heading tags for SEO best practice?

HTML

<header>
  <h1>Main Title</h1>
  <h3>Subsection</h3>
  <h2>Another Section</h2>
</header>

A

<header>
  <h2>Main Title</h2>
  <h1>Subsection</h1>
  <h3>Another Section</h3>
</header>

B

<header>
  <h1>Main Title</h1>
  <h2>Subsection</h2>
  <h3>Another Section</h3>
</header>

C

<header>
  <h3>Main Title</h3>
  <h2>Subsection</h2>
  <h1>Another Section</h1>
</header>

D

<header>
  <h1>Main Title</h1>
  <h3>Subsection</h3>
  <h2>Another Section</h2>
</header>

💡 Hint

Headings should follow a logical order from 1 to 6.

Headings should be nested in order: <h1> first, then <h2>, then <h3>, etc. This helps search engines understand content hierarchy.

❓ rendering

advanced

Effect of missing alt attributes on images

What will a screen reader announce for this image without an alt attribute?

<img src='logo.png'>

A It will cause an error and stop reading the page.

B It will announce the image file name 'logo.png'.

C It will skip the image and announce nothing.

D It will announce 'image' or 'graphic' without description.

💡 Hint

Think about accessibility and how screen readers handle images without alt text.

Without an alt attribute, screen readers usually announce a generic label like 'image' or 'graphic' but provide no useful description, which hurts accessibility and SEO.

❓ selector

advanced

CSS selector to highlight main content for SEO clarity

Which CSS selector best targets the main content area for styling to improve visual clarity and SEO?

HTML

<main>
  <article>...</article>
  <section>...</section>
</main>

A main > article, main > section

B div > article, div > section

C article + section

D section ~ article

💡 Hint

Focus on selecting direct children inside the main tag.

The selector main > article, main > section targets only the direct children inside <main>, which is the main content area, helping style it clearly.

❓ accessibility

expert

ARIA roles to improve SEO and accessibility

Which ARIA role should be added to a <nav> element to best improve SEO and accessibility?

A role="main"

B role="banner"

C role="navigation"

D role="contentinfo"

💡 Hint

Think about the purpose of the <nav> element.

The role="navigation" explicitly tells assistive technologies and search engines that this section is for site navigation, improving SEO and accessibility.