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.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 1

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 8.33

What is Semantic HTML?

Deslize para mostrar o menu

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.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 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?