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:
- Uma tag de abertura — começando com um símbolo < >;
- Conteúdo — instruções curtas para exibir o elemento na página;
- 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ágina | O 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 HTML | Aparecer 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 HTML | Pará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 HTML | Substituir a direção do texto atual |
| <blockquote> | Tags de Texto HTML | Conteú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 HTML | Texto inserido |
| <del> | Tags de Texto HTML | Texto excluído do documento |
| <dfn> | Tags de Texto HTML | Termo definido em uma frase |
| <kbd> | Tags de Texto HTML | Entrada de teclado |
| <pre> | Tags de Texto HTML | Texto pré-formatado |
| <samp> | Tags de Texto HTML | Amostra de saída de um programa de computador |
| <var> | Tags de Texto HTML | Nome de variável usado em contexto matemático ou de programação |
| <br> | Tags de Texto HTML | Quebra de linha única |
| <div> | Tags de Texto HTML | Divisão |
| <a> | Tags de link HTML | Tag âncora para um link |
| <base> | Tags de link HTML | URL 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 HTML | Parâmetro para um elemento <Object> |
| <object> | Tags de imagem e objeto HTML | Incorporar um objeto |
| <ul> | Tags de lista HTML | Lista não ordenada |
| <ol> | Tags de lista HTML | Lista ordenada |
| <li> | Tags de lista HTML | Lista |
| <dl> | Tags de lista HTML | Lista de descrição |
| <dt> | Tags de lista HTML | Termo na lista de descrição |
| <dd> | Tags de lista HTML | Definiçã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:
- Clique com o botão direito do mouse na sua página;
- Clique em 'Inspecionar';
- Você verá o código HTML em uma caixa ao lado ou na parte inferior da página;
- 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:
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:
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.