O que é semântica no contexto do desenvolvimento web?

A semântica no desenvolvimento web é o uso de etiquetas HTML de acordo com a sua finalidade semântica, e não apenas para estilização. Ela ajuda a descrever a estrutura e o significado do conteúdo, tornando a página web mais compreensível para navegadores, motores de busca, leitores de tela e outros analisadores.

As principais vantagens do marcado semântico:

• Acessibilidade: Melhora a interação com o site para pessoas com deficiências que usam leitores de tela.
• SEO: Ajuda os motores de busca a entender melhor a estrutura e o conteúdo da página, o que influencia positivamente o posicionamento.
• Manutenção: Torna o código mais legível e compreensível para outros desenvolvedores.
• Compatibilidade: Garante a exibição correta do conteúdo em diferentes dispositivos e navegadores.

Exemplos de tags semânticas em HTML5:

• <header>: Representa a introdução ou navegação para todo o documento ou uma seção específica.
• <nav>: Representa um grupo de links de navegação.
• <main>: Representa o conteúdo principal do documento.
• <article>: Representa um fragmento de conteúdo completo e autônomo, que pode ser distribuído independentemente (por exemplo, uma entrada de blog, uma notícia).
• <section>: Representa uma seção independente do conteúdo no documento.
• <aside>: Representa conteúdo que está indiretamente relacionado com o conteúdo principal da página (por exemplo, uma barra lateral).
• <footer>: Representa o rodapé para todo o documento ou uma seção específica.
• <figure> e <figcaption>: Representam um elemento multimédia (imagem, diagrama, etc.) e sua descrição.
• <time>: Representa uma data e hora.

Comparação entre abordagem semântica e não semântica:

Abordagem não semântica	Abordagem semântica
Uso de <div> e <span> para tudo	Uso de tags específicas (<header>, <nav>, <article>)
Descrição da estrutura através de classes (class="header")	Uso de tags que descrevem inerentemente a estrutura
Dependência do CSS para entender a estrutura	A estrutura é compreensível pelo código HTML

Exemplo de marcação não semântica:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Início</a></li>
      <li><a href="#">Sobre</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Título</h2>
    <p>Conteúdo...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Exemplo de marcação semântica:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Início</a></li>
      <li><a href="#">Sobre</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Título</h2>
    <p>Conteúdo...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

A marcação semântica não substitui o CSS para estilização, mas torna o documento HTML mais informativo e útil para diferentes consumidores de conteúdo.