SEMÁNTICA

Semântica em HTML

A semântica em HTML refere-se ao uso correto das tags de acordo com o significado do conteúdo.

Se o conteúdo for um título de nível 2, deve-se usar <h2>.
Se for um item de uma lista, deve-se usar <li> dentro de <ul> ou <ol>.

Isso faz parte das boas práticas de desenvolvimento web, conhecido como HTML semântico. Ou seja: usar cada elemento para o propósito para o qual foi projetado.

Exemplos:

<p> → parágrafos
<h1> → título principal
<img> → imagens
<table> → tabelas

Problema comum: usar <p> para títulos ou <table> para construir layout de páginas. Isso quebra a semântica e prejudica acessibilidade e manutenção.

O HTML5 trouxe novas tags semânticas que ajudam a organizar melhor a estrutura da página, como <header>, <footer>, <section>, <article>, entre outras.

Regras importantes

Espaços em branco: o navegador ignora múltiplos espaços no HTML.
<p>Texto</p> e <p> Texto </p> geram o mesmo resultado.
Esse comportamento pode ser alterado com CSS.
Aninhamento de tags:
Tags devem ser abertas e fechadas na ordem correta.

<p><strong>Texto em destaque</strong></p>

<p><strong>Texto em destaque</p></strong>

Também é importante manter a indentação (recuo) para facilitar leitura.

Elementos sem valor semântico

Alguns elementos não carregam significado próprio, servem apenas como containers:

<div>

Tipo: bloco
Usado para agrupar outros elementos.
Não altera a renderização sozinho.
Com CSS, pode virar uma caixa (com fundo, borda, espaçamento, etc.).

<span>

Tipo: inline
Usado para agrupar trechos pequenos de texto ou outros elementos inline.
Também não altera a renderização sem CSS.
Serve para aplicar estilos específicos (como cor ou tamanho da fonte).

Elementos com valor semântico

<b> e <strong>

Ambos deixam o texto em negrito.
Diferença:
- <b> → apenas efeito visual.
- <strong> → além de negrito, dá ênfase semântica. Leitores de tela, por exemplo, anunciam o conteúdo com mais destaque.

<i> e <em>

Ambos deixam o texto em itálico.
Diferença:
<i> → apenas efeito visual.
<em> → dá ênfase semântica. Leitores de tela anunciam com entonação diferente.

<small>

Reduz o tamanho da fonte.
Usado para notas de rodapé, direitos autorais ou observações.

<code>

Usado para marcar trechos de código (HTML, CSS, nomes de arquivos etc.).
O texto aparece em fonte monoespaçada.

<p>Use a tag <code><img></code> para inserir imagens.</p>

Resumindo

Semântica = significado → usar a tag correta para cada conteúdo.
div e span → não têm semântica, só agrupam e recebem estilos via CSS.
b/strong e i/em → mesma aparência, mas só as versões semânticas (strong, em) transmitem significado para leitores de tela.
HTML5 trouxe novas tags semânticas para estruturar melhor as páginas.