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

Marketing

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

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!

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: Marca em negrito )
Elementos HTML são o conteúdo da página inserido nas tags. ( Marca em negrito )
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

Tag de parágrafo

Essa tag formata qualquer texto entre a tag de abertura e a tag de fechamento 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.

Tag de negrito

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

Tag de itálico

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

Tag de sublinhado

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

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.

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:

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.

Fonte