Tags HTML: quais são as mais comuns e como identificá-las

Erich Casagrande

Jan 31, 20236 min read
tags html

Entender o que é e como funciona cada tag HTML é uma etapa essencial para implementá-las corretamente no código HTML do seu próprio site. Acompanhe e veja tudo o que você precisa saber sobre o assunto!

O que são tags HTML?

Tags HTML são instruções que informam ao navegador como formatar o texto. Você pode usar tags para definir itálico, quebras de linha, objetos, bullet points e muito mais.

Essas tags estão presentes no HTML (Hypertext Markup Language) de todas as páginas da internet.

Como as páginas leem as tags HTML?

Os servidores leem o código HTML para entender e renderizar o conteúdo corretamente. Essa leitura é feita de cima para baixo, da mesma forma que você está lendo este artigo agora.

Você pode usar quantas tags quiser para formatar o conteúdo. No entanto, existem algumas regras essenciais sobre tags HTML que você precisará seguir.

Uma tag HTML deve conter três partes:

  1. Uma tag de abertura — começando com um símbolo < >;
  2. Conteúdo — instruções curtas para exibir o elemento na página;
  3. Uma tag de fechamento — terminando com um símbolo </ >.

Algumas tags HTML podem ser abertas. Isso significa que elas não precisam ser fechadas com </ >. Essas tags são normalmente usadas para metadados ou quebras de linha.

Qual é a diferença entre elementos, atributos e tags HTML?

Embora este artigo seja sobre tags HTML, é importante diferenciá-las dos elementos e atributos HTML.

Um elemento HTML é um item da página; faz parte do conteúdo dela. Uma tag HTML altera a maneira esse elemento aparece. Já um atributo HTML descreve as características desse elemento.

Veja como elementos, tags e atributos funcionam juntos:

  • Tags HTML contêm instruções para exibir um elemento na página. Elas começam com um < e terminam com um >. (Por exemplo: <b> Marca em negrito </b>)
  • Elementos HTML são o conteúdo da página inserido nas tags. (<b> Marca em negrito </b>)
  • Atributos HTML fornecem informações adicionais sobre os elementos e aparecem na tag. Por exemplo: <html lang="pt-BR">.

Tipo

Tag HTML

Elemento HTML

Atributo HTML

Significado

Instruções para exibir um elemento na páginaO conteúdo da página a ser exibido

Informações adicionais sobre os elementos na página

Aparência

Começa com < e termina com >Fica em uma tag HTMLAparecer na tag inicial antes de qualquer elemento

Exemplos de tags HTML

<p> Tag de parágrafo </p>

Essa tag formata qualquer texto entre a tag de abertura <p> e a tag de fechamento </p> como um parágrafo padrão ou corpo de texto principal.

<h2> Tag de título </h2>

O uso dessa tag formatará qualquer texto entre as tags de abertura e de fechamento como um Título 2 (H2), que é um tipo de subtítulo. Geralmente, um texto utiliza diversos H2, além de H3 e, mais raramente, H4 em diante.

<b> Tag de negrito </b>

Esta tag irá formatar qualquer texto entre as tags como negrito ('b' vem da palavra 'bold').

<i> Tag de itálico </i>

Esta tag irá formatar qualquer texto entre a tag <i> de abertura e a tag </i> de fechamento como itálico.

<u> Tag de sublinhado</u>

Esta tag formata todo texto como sublinhado (‘u’ vem de ‘underline’).

As tags HTML mais comuns

Existem quase 100 tipos diferentes de tags HTML que você pode usar nas páginas do seu site. Veja as principais:

Tag

Tipo

O que é

<p>

Tags de Texto HTMLParágrafo

<h1>

Tags de Texto HTML

Título 1

<h2>

Tags de Texto HTML

Título 2

<h3>

Tags de Texto HTML

Título 3

<h4>

Tags de Texto HTML

Título 4

<h5>

Tags de Texto HTML

Título 5

<h6>

Tags de Texto HTML

Título 6

<strong>

Tags de Texto HTML

Importância

<em>

Tags de Texto HTML

Ênfase

<abbr>

Tags de Texto HTML

Abreviação

<address>

Tags de Texto HTML

Informações de contato

<bdo>

Tags de Texto HTMLSubstituir a direção do texto atual

<blockquote>

Tags de Texto HTMLConteúdo de outra fonte

<cite>

Tags de Texto HTML

Título da obra, livro, site

<q>

Tags de Texto HTML

Citação

<code>

Tags de Texto HTML

Exibir uma parte do código de programação

<ins>

Tags de Texto HTMLTexto inserido

<del>

Tags de Texto HTMLTexto excluído do documento

<dfn>

Tags de Texto HTMLTermo definido em uma frase

<kbd>

Tags de Texto HTMLEntrada de teclado

<pre>

Tags de Texto HTMLTexto pré-formatado

<samp>

Tags de Texto HTMLAmostra de saída de um programa de computador

<var>

Tags de Texto HTMLNome de variável usado em contexto matemático ou de programação

<br>

Tags de Texto HTMLQuebra de linha única

<div>

Tags de Texto HTMLDivisão

<a>

Tags de link HTMLTag âncora para um link

<base>

Tags de link HTMLURL base para todas as URLs relativas no documento

<img>

Tags de imagem e objeto HTML

Imagem

<area>

Tags de imagem e objeto HTMLÁrea de um mapa de imagem

<map>

Tags de imagem e objeto HTML

Mapa de imagem

<param>

Tags de imagem e objeto HTMLParâmetro para um elemento <Object>

<object>

Tags de imagem e objeto HTMLIncorporar um objeto

<ul>

Tags de lista HTMLLista não ordenada

<ol>

Tags de lista HTMLLista ordenada

<li>

Tags de lista HTML

Lista

<dl>

Tags de lista HTMLLista de descrição

<dt>

Tags de lista HTMLTermo na lista de descrição

<dd>

Tags de lista HTMLDefinição/descrição de um termo na lista de descrição

Para ver a lista completa de todos os mais de 100 elementos HTML, acesse este guia do site javaTpoint.

Como verificar as tags HTML do seu site

Se você já possui tags HTML das suas páginas e quer verificar se elas são usadas corretamente, pode simplesmente conferir o código HTML da sua página diretamente no navegador.

Para visualizar o HTML da sua página no Chrome:

  1. Clique com o botão direito do mouse na sua página;
  2. Clique em 'Inspecionar';
  3. Você verá o código HTML em uma caixa ao lado ou na parte inferior da página;
  4. Use Ctrl + F para encontrar tags ou elementos específicos.

Para verificar se seu site usa tags HTML corretamente, você pode fazer uma auditoria de SEO. Ferramentas como a Auditoria do site, da Semrush, verificam se as tags e atributos HTML estão corretos e se suas páginas usam HTML em excesso.

Para realizar uma auditoria de SEO com nossa ferramenta, você precisa configurar um projeto para seu domínio. Se você já tem um projeto, selecione a opção “Auditoria do site” no painel do seu projeto:

A ferramenta solicitará que você insira seu domínio e realize configurações adicionais:

configurando auditoria do site

Use as configurações da ferramenta para definir o escopo do rastreamento, impedir URLs de aparecer ou fornecer acesso adicional ao site. Selecione “Iniciar auditoria do site”. A ferramenta irá notificá-lo quando ela for concluída.

Após a conclusão, você será direcionado para o relatório de visão geral da Auditoria do site, onde poderá ver qualquer problema do site:

tela inicial da ferramenta auditoria de site

Selecione a aba "Problemas" para obter uma visão mais detalhada de quaisquer problemas de HTML. A ferramenta também fornece sugestões para corrigi-los.

Considerações finais

Entender como funciona o HTML não é complicado. Com as dicas que demos neste guia, você já conseguirá identificar e implementar tags HTML nas páginas do seu site.

Para mais detalhes sobre atributos HTML e como corrigi-los, confira nosso guia sobre o assunto (em inglês).

E para obter mais informações sobre auditoria de site e verificar o HTML do seu domínio, confira este outro guia sobre como fazer uma auditoria completa de SEO em 18 passos.

Share
Author Photo
Trabalho como Marketing Manager Lead da Semrush no Brasil e sou responsável pelas ações de marketing que envolvem a marca em diferentes canais. Sou apaixonado por comunicação e por aprender cada vez mais sobre o universo do Marketing Digital.
More on this