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, uma 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ânticas. 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
a
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. O texto que está entre a tag é imediatamente reconhecido 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; ainda mais tarde, você pode querer definir a família de fontes com espaçamento simples ou pilha de fontes precisa 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 de forma incorreta incluem:
- bloco de citação - Algumas pessoas usam a tag
para recuar o texto que não é uma citação. Isso ocorre porque blockquotes são recuados 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
& nbsp;
(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
, colocar o texto dentro de uma tag
recua esse texto na maioria dos navegadores. Isso é semanticamente incorreto e HTML inválido, porque apenas as tags
- são válidas em uma tag
. 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 circundam tudo com tags
.
Quais tags HTML são semânticas?
Embora quase todas as tags HTML4 e todas as tags HTML5 tenham significados semânticos, algumas tags são principalmente semântica. Por exemplo, o HTML5 redefiniu o significado das tags e para serem semânticos. A tag não transmite importância extra; em vez disso, o texto marcado normalmente é renderizado em negrito. Da mesma forma, a 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
<abbr>
Abreviação
<acronym>
Acrônimo
<blockquote>
Cotação longa
<dfn>
Definição
<address>
Endereço do (s) autor (es) do documento
<cite>
Citação
<code>
Referência de código
<tt>
Texto de teletipo
<div>
Divisão lógica
<span>
Contêiner de estilo inline genérico
<del>
Texto excluído
<ins>
Texto inserido
<em>
Ênfase
<strong>
Ênfase forte
<h1>
Título de primeiro nível
<h2>
Título de segundo nível
<h3>
Título de terceiro nível
<h4>
Título de quarto nível
<h5>
Título de quinto nível
<h6>
Título de sexto nível
<hr>
Pausa temática
<kbd>
Texto a ser inserido pelo usuário
<pre>
Texto pré-formatado
<q>
Citação curta inline
<samp>
Saída de amostra
<sub>
Subscrito
<sup>
Sobrescrito
<var>
Variável ou texto definido pelo usuário
Mais da Lifewire
-
O que são linguagens de marcação?
-
O que é um Blockquote?
-
O que é uma tag HTML versus um elemento HTML?
-
Definição de Tag HTML
-
Como inserir linhas em HTML com a tag HR
-
Como alterar a cor do texto em HTML
-
O que é HTML?
-
Adicionar imagens a páginas da web usando HTML
-
Como usar CSS para centralizar imagens e outros objetos HTML
-
Como usar HTML e CSS para criar guias e espaçamento
-
Como flutuar uma imagem à esquerda do texto em uma página da web
-
Como alterar as configurações de fonte do Gmail
-
Como criar um recuo suspenso no Word
-
Como fazer um recuo suspenso no Apresentações Google
-
Como fazer um recuo pendurado no Google Docs
-
A maneira correta de usar fontes de tipo negrito com eficácia no design
Seus direitos de privacidade
A Lifewire e nossos parceiros terceirizados usam cookies e processam dados pessoais como identificadores exclusivos com base em seu consentimento para armazenar e / ou acessar informações em um dispositivo, exibir anúncios personalizados e para medição de conteúdo, percepção do público e desenvolvimento de produtos. Para alterar ou retirar suas opções de consentimento para Lifewire.com, incluindo seu direito de contestar quando um interesse legítimo é usado, clique abaixo. A qualquer momento, você pode atualizar suas configurações por meio do link "Privacidade da UE" na parte inferior de qualquer página. Essas escolhas serão sinalizadas globalmente para nossos parceiros e não afetarão os dados de navegação. Lista de parceiros (fornecedores)
Nós e nossos parceiros processamos dados para:
Digitalize ativamente as características do dispositivo para identificação. Use dados precisos de geolocalização. Armazene e / ou acesse informações em um dispositivo. Selecione o conteúdo personalizado. Crie um perfil de conteúdo personalizado. Avalie o desempenho do anúncio. Selecione anúncios básicos. Crie um perfil de anúncios personalizados. Selecione anúncios personalizados. Aplique pesquisas de mercado para gerar insights do público. Avalie o desempenho do conteúdo. Desenvolva e aprimore produtos. Lista de parceiros (fornecedores)