Um princípio importante em web design é a ideia de usar elementos HTML para indicar o que eles realmente são, ao invés de como eles podem aparecer no navegador por padrão. Isso é conhecido como uso de HTML semântico.

O que é HTML semântico?

HTML semântico ou marcação semântica é o HTML que introduz um significado para a página da web, em vez de apenas uma apresentação. Por exemplo, um

 tag indica que o texto encerrado é um parágrafo. Isso é semântico e de apresentação porque as pessoas sabem o que são parágrafos e os navegadores sabem como exibi-los.

No outro lado desta equação, tags como  e  não são semânticos. Eles definem apenas a aparência do texto (negrito ou itálico) e não fornecem nenhum significado adicional à marcação.

Exemplos de tags HTML semânticas incluem:

• Tags de cabeçalho

   Através dos

Existem muito mais tags HTML semânticas para usar ao construir um site compatível com os padrões.

Por que você deve se preocupar com a semântica

O benefício de escrever HTML semântico origina-se do que deveria ser o objetivo principal de qualquer página da web: o desejo de se comunicar. Ao adicionar tags semânticas ao seu documento, você fornece informações adicionais sobre esse documento, o que ajuda na comunicação. Especificamente, as tags semânticas deixam claro para o navegador qual é o significado de uma página e seu conteúdo. Essa clareza também é comunicada aos mecanismos de pesquisa, garantindo que as páginas certas sejam entregues para as consultas certas.

As tags HTML semânticas fornecem informações sobre o conteúdo dessas tags que vão além de sua aparência em uma página. Texto que está entre  tag é imediatamente reconhecida pelo navegador como algum tipo de linguagem de codificação. Em vez de tentar renderizar esse código, o navegador entende que você está usando esse texto como um exemplo do código para fins de um artigo ou tutorial online.

O uso de tags semânticas também oferece muito mais ganchos para definir o estilo de seu conteúdo. Talvez hoje você prefira que seus exemplos de código sejam exibidos no estilo de navegador padrão, mas amanhã, você pode querer destacá-los com uma cor de fundo cinza; mais tarde ainda, você pode querer definir a família precisa de fontes mono-espaçadas ou pilha de fontes para usar em suas amostras. Você pode fazer todas essas coisas facilmente usando marcação semântica e CSS aplicado de forma inteligente.

Usando tags semânticas corretamente

Ao usar tags semânticas para transmitir significado em vez de para fins de apresentação, tome cuidado para não usá-las incorretamente simplesmente por suas propriedades de exibição comuns. Algumas das tags semânticas mais comumente usadas incorretamente incluem:

• bloco de citação - Algumas pessoas usam o tag para recuar texto que não seja uma citação. Isso ocorre porque as blockquotes são recuadas por padrão. Se você simplesmente deseja indentar um texto que não seja um blockquote, use as margens CSS.
• p - Alguns editores da web usam (um espaço ininterrupto contido em um parágrafo) para adicionar espaço extra entre os elementos da página, em vez de definir parágrafos reais para o texto dessa página. Como no exemplo anterior, você deve usar a propriedade de estilo de margem ou preenchimento para adicionar espaço.
• ul - Como com

  , colocando o texto dentro de um

   a tag recua esse texto na maioria dos navegadores. Isso é semanticamente incorreto e HTML inválido, porque apenas
  •  tags são válidas dentro de um
    marcação. Novamente, use a margem ou o estilo de preenchimento para recuar o texto.
  • h1, h2, h3, h4, h5 e h6 - Você pode usar tags de título para aumentar e negrito as fontes, mas se o texto não for um título, use as propriedades CSS de espessura e tamanho da fonte.

  Ao usar tags HTML com significado, você cria páginas que transmitem mais informações do que aquelas que simplesmente cercam tudo com

   Tag.

  Quais tags HTML são semânticas?

  Embora quase todas as tags HTML4 e todos os HTML5 tags têm significados semânticos, algumas tags são principalmente semântica.

  Por exemplo, HTML5 redefiniu o significado do  e  tags sejam semânticas. O  tag não transmite importância extra; em vez disso, o texto marcado normalmente é renderizado em negrito. Da mesma forma, o  tag não transmite importância ou ênfase extra; em vez disso, define o texto que normalmente é renderizado em itálico.

  Tags HTML semânticas

  Abreviação
  Acrônimo
  Cotação longa
  Definição
  Endereço do (s) autor (es) do documento
  Citação
  Referência de código
  Texto de teletipo
  Divisão lógica
  Contêiner de estilo inline genérico
  Texto excluído
  Texto inserido
  Ênfase
  Ênfase forte
  Título de primeiro nível
  Título de segundo nível
  Título de terceiro nível
  Título de quarto nível
  Título de quinto nível
  Título de sexto nível
  	Pausa temática
  Texto a ser inserido pelo usuário
  Texto pré-formatado
  Citação curta inline
  Saída de amostra
  Subscrito
  Sobrescrito
  Variável ou texto definido pelo usuário