What is Semantic HTML?

Semantic HTML refers to using HTML elements that communicate the meaning and structure of your content, rather than just its appearance. The purpose of semantic HTML is to make your web pages more understandable for both browsers and humans, including assistive technologies like screen readers. Semantic elements, such as header, nav, main, article, section, and footer, describe their intended role in the document. This helps search engines and accessibility tools interpret your content accurately.

In contrast, non-semantic elements like div and span do not provide any information about the type of content they contain—they are generic containers used primarily for styling or grouping content.

Using semantic elements improves code readability, maintainability, and accessibility. For example:

A nav element clearly indicates that its content is a navigation menu;
A div does not provide this context.

This distinction is especially important for users who rely on screen readers or other assistive devices, as semantic markup enables those tools to present the page structure and meaning more effectively.

non-semantic.html

semantic.html

1. Which of the following elements are considered semantic HTML elements? Select all that apply.

2. When should you use a `div` instead of a semantic element?

Which of the following elements are considered semantic HTML elements? Select all that apply.

Select the correct answer

footer

div

header

span

article

nav

When should you use a div instead of a semantic element?

Select the correct answer

When you are marking up navigation menus.

When there is no existing semantic element that matches the content's purpose.

When you want search engines to better understand your content.

When you want to improve accessibility.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 1

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you give examples of when to use semantic vs non-semantic elements?

Why is semantic HTML important for SEO?

How does semantic HTML improve accessibility?

Awesome!

Completion rate improved to 8.33

What is Semantic HTML?

Swipe um das Menü anzuzeigen

Using semantic elements improves code readability, maintainability, and accessibility. For example:

A nav element clearly indicates that its content is a navigation menu;
A div does not provide this context.

non-semantic.html

semantic.html

1. Which of the following elements are considered semantic HTML elements? Select all that apply.

2. When should you use a `div` instead of a semantic element?

Which of the following elements are considered semantic HTML elements? Select all that apply.

Select the correct answer

footer

div

header

span

article

nav

When should you use a div instead of a semantic element?

Select the correct answer

When you are marking up navigation menus.

When there is no existing semantic element that matches the content's purpose.

When you want search engines to better understand your content.

When you want to improve accessibility.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 1

What is Semantic HTML?

1. Which of the following elements are considered semantic HTML elements? Select all that apply.

2. When should you use a div instead of a semantic element?

Awesome!

What is Semantic HTML?

1. Which of the following elements are considered semantic HTML elements? Select all that apply.

2. When should you use a div instead of a semantic element?

2. When should you use a `div` instead of a semantic element?

2. When should you use a `div` instead of a semantic element?