A semântica no HTML refere-se ao uso de elementos que possuem significados claros e específicos, ajudando a estruturar o conteúdo de forma mais compreensível tanto para humanos quanto para máquinas (como navegadores e motores de busca). Esses elementos descrevem o propósito do conteúdo que envolvem, melhorando a acessibilidade e o SEO (Search Engine Optimization).
Exemplos de Elementos Semânticos no HTML:
Estrutura de Página:
<header>: Representa o cabeçalho de uma página ou seção.
<nav>: Define uma área de navegação, como menus.
<main>: Indica o conteúdo principal da página.
<section>: Agrupa conteúdos relacionados dentro de uma página.
<article>: Representa um conteúdo independente, como um post de blog ou notícia.
<aside>: Usado para conteúdos relacionados, como barras laterais ou informações complementares.
<footer>: Define o rodapé da página ou de uma seção.
Texto e Conteúdo:
<h1> a <h6>: Títulos e subtítulos, organizados por hierarquia.
<p>: Parágrafos de texto.
<blockquote>: Citações em bloco.
<address>: Informações de contato.
<time>: Representa datas ou horários.
Tabelas e Listas:
<table>, <thead>, <tbody>, <tfoot>: Estruturação de tabelas.
<ul> e <ol>: Listas não ordenadas e ordenadas.
<li>: Itens de lista.
Outros Elementos Semânticos:
<figure> e <figcaption>: Para imagens ou gráficos com legendas.
<mark>: Destaca texto relevante.
<strong> e <em>: Para dar ênfase ou importância ao texto.
Benefícios do Uso de HTML Semântico:
Acessibilidade: Facilita a navegação para leitores de tela e dispositivos assistivos.
SEO: Motores de busca entendem melhor o conteúdo, melhorando o ranqueamento.
Manutenção: Código mais organizado e fácil de entender para desenvolvedores.
Adotar boas práticas de semântica é essencial para criar páginas web modernas, acessíveis e bem estruturadas!