O que são tags semânticas?
Tags semânticas são tags que atribuem significado ao conteúdo em HTML. Elas ajudam a organizar e dar sentido às informações para navegadores e mecanismos de busca.
Lista de tags semânticas
<article>: Usada para representar um conteúdo independente e completo dentro de um documento.<aside>: Indica um conteúdo relacionado, mas não essencial, que pode ser considerado um complemento ao conteúdo principal.<details>: Permite criar um elemento que pode ser expandido ou recolhido, revelando informações adicionais.<figcaption>: Utilizada em conjunto com a tag<figure>para fornecer uma legenda ou descrição para o conteúdo encapsulado.<figure>: Utilizada para encapsular conteúdo multimídia, como imagens, ilustrações, gráficos, etc.<footer>: Representa o rodapé da página ou de uma seção específica.<header>: Define o cabeçalho da página ou de uma seção específica.<main>: Indica o conteúdo principal da página.<mark>: Destaca ou marca um trecho de texto com uma cor de fundo diferente.<nav>: Representa uma seção de navegação, geralmente contendo links para outras partes do site.<section>: Define uma seção ou uma parte temática de um documento.<summary>: Utilizada em conjunto com a tag<details>para fornecer um título ou resumo do conteúdo oculto.<time>: Utilizada para representar informações de data e hora.
🔴 Exemplo:
👉 Todos os códigos podem ser testados aqui: https://www.w3schools.com/tryit/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Exemplo de Página com Elementos Semânticos</title> </head> <body> <header> <h1>Logo da Empresa</h1> <nav> <ul> <li><a href="#">Início</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Serviços</a></li> <li><a href="#">Contato</a></li> </ul> </nav> </header> <main> <section> <h2>Sobre</h2> <p>Bem-vindo à nossa empresa! Somos especializados em fornecer soluções digitais de alta qualidade.</p> </section> <section> <h2>Serviços</h2> <ul> <li>Web Design</li> <li>Desenvolvimento Web</li> <li>Otimização de Sites</li> </ul> </section> </main> <footer> <p>© 2023 Empresa XYZ. Todos os direitos reservados.</p> </footer> </body> </html> |
Neste exemplo, temos os seguintes elementos semânticos:
<header>: Representa o cabeçalho da página, contendo o logotipo da empresa e a navegação.<nav>: Indica uma seção de navegação.<main>: Contém o conteúdo principal da página.<section>: Define seções temáticas da página, como “Sobre” e “Serviços”.<footer>: Representa o rodapé da página.
Tags não semânticas
As tags não semânticas em HTML, como <div>, <span>, <b>, <i>, <font>, são amplamente usadas para fins de formatação visual e organização do layout da página. No entanto, elas não fornecem um significado semântico específico para o conteúdo.
🔴 Por exemplo:
|
1 2 3 4 |
<div>Conteúdo não semântico</div> <span>Outro exemplo de conteúdo não semântico</span> <b>Texto em negrito</b> <i>Texto em itálico</i> |
Essas tags são úteis para estilizar o conteúdo, agrupar elementos ou aplicar efeitos visuais, mas não possuem uma estrutura semântica definida.
⛔ É importante combinar o uso de tags semânticas com as não semânticas para obter uma estrutura clara e significativa para o conteúdo da página.
*Atualizado em 8 de julho de 2023
