Skip to content

Por que usar HTML semântico?

20 de abril de 2021

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?

      • Ilustração mostrando um exemplo de blockquote em HTML

        O que é um Blockquote?

      • Word Art "HTML" feito para se parecer com um projeto

        O que é uma tag HTML versus um elemento HTML?

      • Ponto de interrogação HTML

        Definição de Tag HTML

      • Homem de óculos no telefone usando um laptop

        Como inserir linhas em HTML com a tag HR

      • Imagem de arte vetorial de um navegador renderizando uma página da web em dois estilos diferentes, separados por uma barra no meio da página

        Como alterar a cor do texto em HTML

      • Codificação da Web com HTML

        O que é HTML?

      • Trabalhadores usando software para calibrar molas no escritório

        Adicionar imagens a páginas da web usando HTML

      • Ilustração de programação

        Como usar CSS para centralizar imagens e outros objetos HTML

      • Ponto de interrogação HTML

        Como usar HTML e CSS para criar guias e espaçamento

      • desenvolvedora da web trabalhando no computador

        Como flutuar uma imagem à esquerda do texto em uma página da web

      • Uma pessoa usando várias fontes em um e-mail

        Como alterar as configurações de fonte do Gmail

      • Texto configurado com recuo deslocado

        Como criar um recuo suspenso no Word

      • Foto de uma mulher fazendo uma apresentação de negócios

        Como fazer um recuo suspenso no Apresentações Google

      • Homem de terno sentado em um skate e escrevendo em seu laptop

        Como fazer um recuo pendurado no Google Docs

      • Tipo de letra de metal alinhado em frases

        A maneira correta de usar fontes de tipo negrito com eficácia no design

      Lifewire

      Siga-nos

      • Facebook

      • Sobre nós
      • Anunciar
      • Política de Privacidade
      • Política de Cookies
      • Carreiras
      • Diretrizes editoriais
      • Contato
      • Termos de uso
      • Privacidade da UE
      • Aviso de privacidade da Califórnia



      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)