Escrever HTML semântico é usar os elementos HTML corretos para transmitir ou reforçar informações sobre o tipo de informação contida neles. Ou seja, as tags HTML desempenham um papel importante na estruturação do conteúdo e não são apenas uma maneira de agrupar informações em blocos para estilizar (como costumava ser feito por meio de div para todos os tipos de conteúdo).
Também significa NÃO usar uma tag pelo motivo incorreto. Ex: não use uma tag STRONG apenas para estilizar (peso da fonte) – use-a para enfatizar o texto.
O HTML semântico tem como objetivo descrever o significado do conteúdo presente nas tags HTML, tornando-o mais claro tanto para programadores quanto para máquinas que processam essas informações.
Por que você deveria se preocupar com HTML semântico?
- Acessibilidade: HTML semântico fornece contexto para leitores de tela, leitores de braille, TTS, etc. para fornecer leitura, navegação pelo teclado e outros recursos de acessibilidade. O conteúdo principal pode ser facilmente separado e priorizado em relação ao subsidiário, as seções podem ser facilmente navegadas.
- SEO: É mais fácil para os mecanismos de pesquisa indexar conteúdo e priorizar conteúdo relevante. Ex: listas de snippets do Google usando para exibir elementos li
- Boa prática de desenvolvimento: o código semântico é mais limpo e fácil de entender. É também uma maneira eficaz de separar conteúdo e estilo. Além disso, muitas tags semânticas vêm com funcionalidades e aprimoramentos úteis. Ex: um botão , o formulário pode ser navegado com Tab, Tab+Shift, etc.
Como tornar seu documento semântico?
1. Layout da página/Estrutura do documento
Para estruturação de alto nível do documento usamos as tags corretas de header, footer, nav, main, aside, section (form) e article.
- header : representa o conteúdo introdutório, normalmente um grupo de auxílios introdutórios ou de navegação. Pode conter alguns elementos de título, mas também um logotipo, um formulário de pesquisa, etc.
- nav : usado para links de navegação no site (em oposição a tags <a> normais).
- main : representa o conteúdo dominante da página.
- aside : é uma parte cujo conteúdo está relacionado apenas indiretamente ao conteúdo principal do documento (não é necessário entender o conteúdo atual).
- article : uma parte independente que se destina a ser distribuída ou reutilizável independentemente (ex: uma postagem de blog, artigo de notícias).
- section : é uma parte de um conteúdo autônomo (ex: uma parte de uma postagem de blog que pode ou não ter/precisar de um título).
- address : indica que o HTML incluído fornece informações de contato para uma pessoa ou pessoas, ou para uma organização.
- footer : representa um rodapé para o conteúdo de seção mais próximo ou o site.
2. Semântica de texto embutido
Chegar ao conteúdo, usar cabeçalhos adequados e estruturados (h1, h2,… h6) e tags p ajuda na estruturação dos dados. Alguns leitores de tela fazem pausa após quebra de parágrafo. Os usuários podem pular por seções (identificadas por cabeçalhos).
ul, ol, dl junto com li devem ser usados para listas.
Aqui estão algumas tags que você pode usar para fornecer mais informações sobre partes do texto (em vez de usar span).
- strong : indica que seu conteúdo tem forte importância (isso é semântico em comparação com b).
- em :enfatiza a ênfase do texto (use isso em oposição ao i não semântico).
- cite : descreve uma referência a um trabalho citado e inclui o título desse trabalho.
- q : indica que o texto incluído é uma citação curta embutida.
- blockquote : indica que o texto incluído é uma citação estendida (geralmente renderizada visualmente por recuo).
- dfn : usado para indicar o termo que está sendo definido no contexto de uma frase ou sentença de definição.
- abbr : representa uma abreviatura ou acrônimo (o atributo opcional ‘title’ pode fornecer uma expansão ou descrição para a abreviatura).
- sub : elemento subscrito.
- sup : elemento sobrescrito.
- time : usado para representar o tempo ou duração do tempo.
- kbd : representa um intervalo de texto embutido denotando entrada textual do usuário de um teclado, entrada de voz ou qualquer outro dispositivo de entrada de texto.
- code : indica que o texto é um pequeno fragmento de código de computador.
- samp : representa a saída de amostra (ou cotada) de um programa de computador.
- var : representa o nome de uma variável em uma expressão matemática ou um contexto de programação.
- del : representa um intervalo de texto que foi excluído de um documento.
- ins : representa um intervalo de texto que foi adicionado a um documento.
Muitas informações podem ser embaladas com tags correlacionais – como dd e dt, figure e figcaption, label e inputEsta é apenas uma introdução básica.
Você pode encontrar todas as tags HTML neste link MDN page