Tags Semânticas

Parte da seção Fundamentals do Journey de HTML da Coddy — lição 27 de 60.

Tags semânticas no HTML ajudam a definir o significado do conteúdo, tornando o código mais claro tanto para desenvolvedores quanto para navegadores. Ao contrário de <div> e <span>, elas dão contexto ao conteúdo delimitado.

Tags Semânticas Comuns:

<header> – Conteúdo introdutório, geralmente no topo.
<nav> – Contém links de navegação.

<main> – Conteúdo principal da página.
<article> – Uma peça independente, como uma postagem de blog.

<section> – Agrupa conteúdo relacionado, geralmente com um título.
<footer> – Seção inferior com informações como direitos autorais ou detalhes de contato.

<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

Esta estrutura fornece um layout claro e significativo para o conteúdo.

Desafio

Fácil

Crie uma página de avaliação de filmes usando HTML semântico. Ela deve incluir:

1. <header> com:

<h1> "Movie Reviews"
<nav> com links: "Home", "Reviews", “Top Picks”

2. <main> com:

<article> para uma avaliação que contém:
- <h2> com o nome do filme
- <p> com uma breve avaliação

3. <footer> com:

<p> "Copyright 2023 Movie Reviews"

Folha de consulta

Tags Semânticas Comuns:

<header> – Conteúdo introdutório, geralmente no topo.
<nav> – Contém links de navegação.
<main> – Conteúdo principal da página.
<article> – Uma peça independente, como uma postagem de blog.
<section> – Agrupa conteúdo relacionado, geralmente com um título.
<footer> – Seção inferior com informações como direitos autorais ou detalhes de contato.

<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

Experimente você mesmo

<!DOCTYPE html>
<html>
    <body>
        <!-- Escreva o código aqui -->
    </body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Fundamentals

1Fundamentos do HTML

O que é HTML?Estrutura Básica do HTML Tags e Elementos Aninhamento e Fechamento de Tags Comentários em HTML

4Cartão de Receita

Visão Geral do Projeto Título e Descrição da Receita

Ingredientes

Passos

7Página de Perfil Pessoal

Visão Geral do Projeto Seção de Cabeçalho

Foto de Perfil

Seção Sobre Mim

Links Sociais

10Tabelas

Fundamentos de Tabelas Adicionando Legendas Mesclando Linhas e Colunas Recapitulação - Tabelas

2Texto e Formatação

Títulos Parágrafos Quebras de Linha Texto em Negrito e Itálico Negrito e Itálico Novamente Recapitulação - Formatação

5Adicionando Conteúdo

Atributos HTML Links Links para Novas Páginas Imagens Atributos de Imagem

8Formulários e Inputs Parte 1

Fundamentos de Formulários Inputs de Texto Atributos de Input Campo de Senha Labels para Inputs Recapitulação - Formulário Básico

11Página de Inscrição de Evento

Visão Geral do Projeto Seção de Cabeçalho

Seção de Detalhes do Evento

Formulário de Inscrição

Seção de Rodapé

3Trabalhando com Listas

Lista não ordenada Lista ordenada Listas aninhadas Recapitulação - Listas

6Layout da Página

Divisões Spans InlineTags SemânticasSeções e Artigos Recapitulação - Layout

9Formulários e Inputs Parte 2

Radio Buttons Checkboxes Dropdowns Botões Botões em Formulários Recapitulação - Formulários #1 Recapitulação - Formulários #2

12Desafios Finais

Cartão de Perfil Simples Cartão de Convite de Evento Página de Artigo Simples Lista de Livros Favoritos