🔖 O que são tags HTML e como funcionam
Todas as páginas web que abre num navegador parecem, nos bastidores, um fluxo contínuo de texto. Mas o navegador transforma-o, de alguma forma, em títulos, parágrafos, imagens, botões e formulários. O segredo por detrás desta transformação são as tags HTML.
Os principiantes tratam frequentemente as tags como feitiços: copiar, colar, funciona. Mas sem compreender a sua lógica, qualquer edição torna-se um tiro no escuro. Uma tag de fecho em falta e o layout quebra, enquanto o formulário deixa de enviar dados.
Vamos ver como as tags HTML funcionam internamente, que grupos de tags existem e porque são essenciais para a otimização para motores de busca. Sem palha, com exemplos e foco na prática.
💡 Visão geral rápida:
- Uma tag consiste num nome entre parênteses angulares e atributos opcionais: o navegador lê-os e decide como exibir o conteúdo
- As tags emparelhadas envolvem conteúdo (abertura + fecho), as tags singulares inserem um elemento na página (imagem, quebra de linha, metadados)
- As tags semânticas do HTML5, header, nav, main, article, section e footer, descrevem o significado dos blocos, não apenas a sua aparência, o que é a base da acessibilidade e do SEO
- Os motores de busca analisam as tags de cabeçalho (h1-h6), as tags de link (
a), as tags de imagem (imgcom alt) e as meta tags para compreender a estrutura da página e classificá-la por palavras-chave - O aninhamento correto de tags é crítico: os navegadores perdoam erros, mas o HTML válido garante a exibição correta em todos os dispositivos
O que são as tags HTML e para que servem
Uma tag HTML é um elemento de marcação delimitado por parênteses angulares < e >. O navegador não mostra os próprios parênteses ao utilizador: lê o nome da tag e decide o que fazer com o conteúdo.
Vejamos um exemplo simples: <p>Это абзац.</p>. O navegador vê a abertura <p>, entende «começou um parágrafo», exibe o texto e, ao chegar ao fecho </p>, o parágrafo termina. Tudo o que está entre eles é o conteúdo do parágrafo.
As tags resolvem três tarefas em simultâneo. Primeiro, descrevem a estrutura do documento: onde está o título, onde está a navegação, onde está o texto principal. Segundo, controlam a exibição: negrito, itálico, quebra de linha. Terceiro, incorporam recursos externos: imagens, vídeos, scripts e folhas de estilo.
Anatomia de uma tag HTML
Cada tag consiste em três partes: um nome, atributos e, para tags emparelhadas, conteúdo entre os elementos de abertura e fecho.
O nome da tag é escrito em caracteres latinos e define a sua função: p para parágrafo, h1 para título, a para link. Maiúsculas ou minúsculas são indiferentes (<P> e <p> são o mesmo), mas o padrão recomenda minúsculas.
Os atributos refinam o comportamento da tag. Veja <a href="https://example.com">: o atributo href indica ao navegador para onde o link leva. E em <img src="photo.jpg" alt="Описание фото"> o atributo src especifica o caminho do ficheiro, enquanto alt fornece uma alternativa textual. Os valores dos atributos são delimitados por aspas e os próprios atributos são separados por espaços.
A regra mais importante: as tags emparelhadas são sempre fechadas. Abriu <div>, feche com </div>. Tags singulares: img, br, input, meta, link, hr, não requerem um par de fecho. E a ordem de aninhamento: <p><strong>текст</strong></p> está correto, <p><strong>текст</p></strong> está errado (cruzado).
Principais grupos de tags HTML
A especificação HTML5 contém uma multiplicidade de tags diferentes, mas para o trabalho prático basta conhecer os grupos principais. Eles cobrem 95% das tarefas de um programador frontend.
Tags de estrutura do documento
Cada página HTML começa com um esqueleto:
<html>, o elemento raiz, envolve todo o documento<head>, a secção de serviço: título do separador, meta tags, ligação de estilos e scripts<body>, o conteúdo visível da página<title>, o texto no separador do navegador (indexado pelos motores de busca)<meta>, codificação, descrição da página, viewport para dispositivos móveis
O utilizador não vê estas tags diretamente, mas sem elas a página não funciona: o navegador não entenderá a codificação, o motor de busca não lerá a descrição e o layout móvel quebrará.
Tags semânticas do HTML5
Antes do HTML5, os programadores compunham tudo com <div>s e classes. Um motor de busca via a página como um fluxo contínuo de <div>s; onde estava o menu, onde estava o artigo, onde estava o rodapé, não era claro. O HTML5 resolveu isto com tags semânticas:
<header>, o cabeçalho do site ou de uma secção (logótipo, menu, pesquisa)<nav>, um bloco de navegação (menu principal, breadcrumbs)<main>, o conteúdo único da página (apenas um por documento)<article>, uma unidade de conteúdo autónoma (post, ficha de produto, comentário)<section>, um grupo temático de conteúdo com o seu próprio título<aside>, uma barra lateral ou conteúdo suplementar<footer>, o rodapé: contactos, direitos de autor, mapa do site
O layout semântico não é uma homenagem à moda. Os leitores de ecrã (programas para utilizadores cegos) baseiam-se especificamente em <nav> e <main>, saltando repetições. E os motores de busca extraem sinais de classificação chave dos blocos semânticos.
Tags de conteúdo de texto
O conjunto básico para trabalhar com texto:
- De
<h1>a<h6>: seis níveis de título, do principal aos subordinados. Numa página, exatamente um<h1>, os restantes formam uma hierarquia como o índice de um livro <p>, um parágrafo, o contentor principal para texto<strong>e<em>, ênfase semântica: importante e destacado (não apenas negrito e itálico)<blockquote>, uma citação com a fonte especificada através do atributocite<pre>e<code>, texto pré-formatado e um fragmento de código
À parte está o <span>, um contentor em linha sem significado inerente. É usado para aplicação de estilo direcionada a um fragmento de texto dentro de um parágrafo.
Tags de link e multimédia
<a href="URL">анкор</a>, a tag mais poderosa da internet. São os links que ligam as páginas numa única web. O atributo target="_blank" abre o link num novo separador, rel="nofollow" diz ao motor de busca para não passar autoridade para a página de destino.
Para imagens, <img src="путь" alt="описание">. O atributo alt é crítico: os leitores de ecrã e os motores de busca leem-no. Sem alt, uma imagem simplesmente não existe para eles. Tecnicamente, src pode apontar para qualquer URL público, mas é melhor armazenar as imagens localmente, o que é mais rápido e fiável.
<video> e <audio> incorporam multimédia com controlos nativos. E <figure> com <figcaption> agrupam uma imagem com uma legenda, para que o motor de busca entenda que são um par relacionado.
Tags de listas e tabelas
As listas são de três tipos: <ul> (não ordenada), <ol> (ordenada) e <dl> (lista de definições com pares <dt>-termo e <dd>-descrição).
As tabelas são construídas em cascata: <table> → <tr> (linha) → <th> (cabeçalho de coluna) ou <td> (célula de dados). <caption> dá um título a toda a tabela, <thead>/<tbody>/<tfoot> agrupam logicamente as linhas. E sim, as tabelas ainda são usadas para dados, não as componha com divs.
Tags de formulário
<form> recolhe campos de entrada e envia-os para o servidor usando o método GET ou POST. Dentro de um formulário, funcionam:
<input>, um campo universal (texto, palavra-passe, email, número, data, ficheiro, o tipo é definido pelo atributotype)<textarea>, texto multilinha<select>com<option>, uma lista suspensa<button>, um botão de envio ou reinicialização<label>, uma etiqueta de texto ligada a um campo através do atributofor
O emparelhamento de <label for="email"> com <input id="email"> é obrigatório para acessibilidade: clicar na etiqueta move o foco para o campo.
Como as tags HTML afetam o SEO
Os robôs de busca não veem uma página com os olhos. Eles leem o código-fonte e as tags tornam-se o seu único sistema de coordenadas.
As tags de cabeçalho (h1-h6) formam o esqueleto semântico. O motor de busca entende a hierarquia: <h1> define o tópico principal da página, <h2> destaca os subtópicos chave, <h3> revela detalhes. Quanto mais precisamente os cabeçalhos refletirem o conteúdo e contiverem palavras-chave, maiores são as hipóteses de classificação.
A tag <title> (em <head>) é o que o utilizador vê nos resultados de pesquisa. Isto não é o h1, embora frequentemente coincidam em significado. Um <title> bem elaborado contém a palavra-chave mais perto do início e é escrito em linguagem natural; um título clicável traz mais cliques nas mesmas posições.
A tag <meta name="description"> forma o snippet sob o título nos resultados de pesquisa. Não afeta diretamente a classificação, mas uma descrição bem escrita aumenta o CTR, e os fatores comportamentais trabalham depois para a posição.
A tag <a> com o atributo href é a base da interligação. Os links internos distribuem a autoridade pelas páginas do site, os externos passam autoridade. A âncora do link (o texto entre <a> e </a>) sugere ao motor de busca sobre o que é a página de destino.
O atributo alt nas imagens é outra fonte de palavras-chave. Imagens sem alt não participam na pesquisa de imagens e não dão ao motor de busca contexto adicional sobre a página.
As tags semânticas do HTML5 ajudam o robô a separar o conteúdo da navegação e da publicidade. <main> e <article> têm prioridade durante a indexação, enquanto <nav> e <aside> não. Isto poupa o orçamento de rastreio.
Vídeo: tags HTML do zero
Para reforçar a teoria com a prática, veja esta aula em inglês; ela demonstra visualmente como um navegador processa as tags HTML em tempo real:
⁉️🤔 Perguntas frequentes
Como é que uma tag emparelhada difere de uma tag singular?
Uma tag emparelhada envolve conteúdo e requer fecho:
<p>текст</p>. Uma tag singular insere um elemento sem conteúdo: img, br, input. Em HTML5, a barra de fecho (<br />) é opcional, mas permitida. A regra é simples: se há conteúdo entre as tags, a tag é emparelhada; se não, é singular.
Quantos <h1> pode haver numa página?
Exatamente um. A especificação HTML5 permite tecnicamente múltiplos
<h1>se estiverem separados em<article>e<section>, mas os motores de busca ainda funcionam melhor com um único título principal. Coloque um<h1>por página, não há como errar.
O que acontece se não fechar uma tag?
O navegador tentará «adivinhar» onde pretendia fechá-la e construirá a árvore DOM por conta própria. Mas navegadores diferentes adivinham de forma diferente: no Chrome a página pode parecer normal, enquanto no Safari ou num leitor de ecrã se desfaz. Portanto, HTML válido com fecho correto de tags não é pedantismo, é um seguro contra surpresas.
Como é que <b> difere de <strong>, e <i> de <em>?
<b>e<i>são puramente visuais: negrito e itálico.<strong>e<em>são semânticos: «isto é importante» e «ênfase nisto». O motor de busca e o leitor de ecrã têm em conta as tags semânticas ao analisar a página, enquanto as visuais são ignoradas. Se está a enfatizar significado, use<strong>e<em>; se for puramente para design, use<b>e<i>.
É obrigatório escrever alt para todas as imagens?
Para imagens com significado, é obrigatório: é tanto acessibilidade como SEO. Para as decorativas (padrão de fundo, separador), use um
alt=""vazio para que o leitor de ecrã as salte. Uma imagem sem qualquer atributoalté um erro grosseiro: o validador de HTML irá assinalá-lo.
Que tags são as mais importantes para SEO?
Cinco críticas:
<title>(o título nos resultados de pesquisa),<meta name="description">(o snippet),<h1>-<h6>(estrutura e palavras-chave),<a>(interligação interna e externa),<img alt="...">(pesquisa de imagens e contexto adicional). Se estas cinco estiverem bem feitas, a base do SEO técnico já está lançada.
O que reter sobre as tags HTML
As tags HTML não são magia nem sintaxe para uns poucos eleitos. É um sistema de regras, compreensível tanto para pessoas como para máquinas. O navegador transforma as tags numa página visual, o motor de busca em sinais de classificação, o leitor de ecrã numa voz para um utilizador cego. A mesma marcação serve três interfaces completamente diferentes.
O principal a reter: feche as tags emparelhadas, mantenha o aninhamento correto, use tags semânticas do HTML5 em vez de <div>s anónimos e forneça sempre alt para imagens com significado. Estes quatro hábitos no início poupam horas de depuração mais tarde.
Se o material foi útil, guarde-o nos favoritos; irá voltar quando precisar de refrescar a sintaxe antes de um trabalho de layout.
Uma equipa profissional de escritores e editores especializados na criação de conteúdo de qualidade.