Estrutura de um Site em HTML5 e suas Tags Semânticas
O HTML5 introduziu várias tags semânticas que ajudam a estruturar o conteúdo de uma página web de forma mais significativa. Aqui está uma visão geral da estrutura básica de um site HTML5 e suas principais tags semânticas:
Estrutura Básica
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título da Página</title>
</head>
<body>
<!-- Conteúdo da página -->
</body>
</html>
Tags Semânticas Principais
<header>: Define o cabeçalho da página ou de uma seção.<nav>: Contém os principais links de navegação do site.<main>: Engloba o conteúdo principal da página.<article>: Representa um conteúdo independente e autocontido.<section>: Define uma seção genérica de conteúdo.<aside>: Contém conteúdo relacionado, mas separado do conteúdo principal.<footer>: Define o rodapé da página ou de uma seção.<figure>: Define conteúdo relacionado a imagem ou vídeo.<picture>: Define várias fontes para um conteúdo de mídia.
Exemplo de Estrutura
<body>
<header>
<h1>Meu Site</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Título do Artigo</h2>
<p>Conteúdo do artigo...</p>
</article>
<section>
<h2>Seção de Conteúdo</h2>
<p>Conteúdo da seção...</p>
</section>
<aside>
<h3>Conteúdo Relacionado</h3>
<p>Informações adicionais...</p>
</aside>
</main>
<footer>
<p>© 2023 Meu Site. Todos os direitos reservados.</p>
</footer>
</body>
Usar essas tags semânticas ajuda a melhorar a acessibilidade, SEO e a manutenção do código, tornando a estrutura do site mais clara e significativa.