Why semantic HTML matters - Quick Recap

Recall & Review

beginner

What is semantic HTML?

Semantic HTML means using HTML tags that clearly describe their meaning and purpose, like <header>, <nav>, <main>, and <footer>. It helps browsers and people understand the page structure better.

beginner

Why does semantic HTML improve accessibility?

Semantic HTML helps screen readers and other assistive tools understand the page content and structure, making websites easier to navigate for people with disabilities.

intermediate

How does semantic HTML help search engines?

Search engines use semantic HTML to better understand what each part of a webpage means, which improves how the page is indexed and ranked in search results.

beginner

Name three semantic HTML elements and their purpose.

<header> defines the top section of a page or section, <nav> contains navigation links, and <main> holds the main content of the page.

intermediate

What can happen if you don’t use semantic HTML?

Without semantic HTML, websites can be harder to understand for assistive devices, search engines, and even developers, leading to poor accessibility and SEO.

Which HTML element is semantic and used to define the main content of a page?

A <section>

B <div>

C <span>

D <main>

is a semantic element that clearly marks the main content, while

and are generic containers without meaning.

Why is semantic HTML important for screen readers?

A It helps screen readers understand page structure and content.

B It changes the colors on the page.

C It makes the page load faster.

D It hides content from users.

Semantic HTML provides meaningful structure that screen readers use to navigate and read content properly.

Which of these is NOT a semantic HTML element?

A <article>

B <footer>

C <div>

D <nav>

is a generic container without semantic meaning, unlike the other options.

How does semantic HTML help search engines?

A By making the page structure clear for better indexing.

B By hiding keywords from users.

C By increasing page load time.

D By changing font styles.

Semantic tags help search engines understand the content and structure, improving SEO.

Which semantic element is best for grouping navigation links?

A <header>

B <nav>

C <section>

D <footer>

is specifically designed to contain navigation links.

Explain in your own words why semantic HTML is important for accessibility and SEO.

Think about how computers and assistive tools read your webpage.

List and describe three semantic HTML elements you would use to structure a simple webpage.

Focus on elements that describe parts of a page.