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 o símbolo >.
Algumas tags HTML podem ser abertas. Isso significa que elas não precisam ser fechadas. 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 como 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 < (Por exemplo: <b> marca em negrito </b>).
- Elementos HTML são o conteúdo da página inserido nas tags. (Por exemplo: <b>texto em negrito</b>).
- Atributos HTML fornecem informações adicionais sobre os elementos e aparecem na tag. Por exemplo: <a href=”url”>link</a>.
Exemplos de tags HTML
Tag de parágrafo
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.
Tag de título
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 <i> e a tag de fechamento </i> como itálico.
Tag de sublinhado
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> | Parágrafo | Tag usada para formatar textos como parágrafos. |
| <h1> | Título 1 | Tag de título de nível mais alto. |
| <h2> | Título 2 | Tag de subtítulo. |
| <h3> | Título 3 | Tag de sub-subtítulo. |
| <h4> | Título 4 | Tag de título de nível 4. |
| <h5> | Título 5 | Tag de título de nível 5. |
| <h6> | Título 6 | Tag de título de nível 6. |
| <strong> | Importância | Tag usada para enfatizar um texto considerando-o importante. |
| <em> | Énfase | Tag usada para enfatizar um texto. |
| <abbr> | Abreviação | Tag para definir uma abreviação. |
| <address> | Informações de contato | Tag usada para informações de contato. |
| <br> | Quebra de linha | Tag usada para inserir uma quebra de linha. |
| <img> | Imagem | Tag usada para inserir imagens. |
| <a> | Link | Tag âncora para links. |
| <ul> | Lista não ordenada | Tag usada para criar listas não ordenadas. |
| <ol> | Lista ordenada | Tag usada para criar listas ordenadas. |
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 nas 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 verificam se as tags e atributos HTML estão corretos e se suas páginas usam HTML em excesso.
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 importantes sobre HTML
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.
Lembre-se de que o uso adequado das tags facilita a leitura e a indexação do seu site por motores de busca, além de melhorar a experiência do usuário. Não subestime a importância de um código HTML bem estruturado.
Para detalhamentos sobre atributos HTML ou para realizar uma auditoria completa do HTML do seu domínio, procure recursos disponíveis que ofereçam guias e ferramentas adequadas.