Tags <h> em HTML permitem que você crie uma estrutura básica para o seu conteúdo ou documento HTML. Di­fe­ren­tes tipos de tags dis­po­ní­veis, como <h1> e <h2>, es­ta­be­le­cem uma hi­e­rar­quia dentro das páginas web, para que os me­ca­nis­mos de busca e os vi­si­tan­tes dos sites consigam navegar por elas com mais fa­ci­li­dade.

Hos­pe­da­gem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o de­sem­pe­nho com um clique à medida que o tráfego cresce
  • Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana

O que são tags para heading em HTML e por que elas são im­por­tan­tes?

Uma tag HTML para heading é o elemento usado para criar títulos em um documento HTML. Esse tipo de tag HTML é im­por­tante para a estrutura e a semântica de um site, atendendo às seguintes fi­na­li­da­des:

  • Hi­e­rar­quia e estrutura: Tags heading para HTML ajudam os vi­si­tan­tes e os me­ca­nis­mos de busca a com­pre­en­de­rem o conteúdo e a estrutura da sua página.
  • Oti­mi­za­ção para me­ca­nis­mos de busca: o uso correto de uma tag como <h1> em HTML pode in­flu­en­ciar po­si­ti­va­mente a sua clas­si­fi­ca­ção nos me­ca­nis­mos de busca. Ao inserir palavras-chave im­por­tan­tes nos títulos, você obtém vantagens sig­ni­fi­ca­ti­vas.
  • Layout e design: Tags heading para HTML também são elementos es­sen­ci­ais para o design das páginas. Usando folhas de estilos CSS, você consegue definir a aparência dos di­fe­ren­tes tipos de títulos de forma cen­tra­li­zada. Assim, as al­te­ra­ções de design feitas pos­te­ri­or­mente serão aplicadas au­to­ma­ti­ca­mente a todos os títulos marcados com uma <h> HTML tag.
  • Aces­si­bi­li­dade: leitores de tela dependem dos títulos em HTML para ler seu conteúdo cor­re­ta­mente.

Quais tipos de tags heading para HTML existem?

A linguagem HTML pos­si­bi­lita que o usuário defina di­fe­ren­tes títulos usando tags de <h1> a <h6>. A tag <h1> HTML re­pre­senta o título mais im­por­tante da página, que ge­ral­mente é ca­rac­te­ri­zado por ter a maior fonte de todo o layout. Por outro lado, a tag <h6> re­pre­senta o título menos im­por­tante e ocupa o nível mais baixo na hi­e­rar­quia de um site:

  • <h1> HTML: a tag <h1> HTML re­pre­senta o título principal de uma página web, nor­mal­mente usado apenas uma vez para definir o tema principal. Por isso, ela sempre deve refletir o assunto ou título mais relevante para o conteúdo abordado. É es­pe­ci­al­mente im­por­tante inserir palavras-chave nessa tag.
  • <h2> HTML: a tag <h2> define os sub­tí­tu­los mais im­por­tan­tes da página. Ela introduz seções re­la­ci­o­na­das ao tema principal men­ci­o­nado pela tag <h1>.
  • <h3> até <h6> HTML: as tags de <h3> até <h6> são usadas como sub­tí­tu­los menores para in­tro­du­zir subseções ou conteúdos aninhados dentro de uma seção <h2>.

Com exceção da <h1> HTML, você pode usar os di­fe­ren­tes tipos de tags heading em HTML mais de uma vez na mesma página. No entanto, é im­por­tante não pular nenhum nível da hi­e­rar­quia. Por exemplo, se você inseriu um título <h2> e deseja criar uma subseção a partir dele, deve usar a tag <h3>, e não a <h4>.

Construa sua marca com um ótimo domínio
Registre um nome de domínio
  • SSL Wildcard grátis para mais segurança
  • Registro privado grátis para mais pri­va­ci­dade
  • Domain Connect grátis para con­fi­gu­rar DNS fácil

Sintaxe da tag HTML <h> com exemplos de código

Tags para heading em HTML são in­te­gra­das a um documento uti­li­zando o padrão comum das tags HTML. Uma tag de abertura define o início do título, enquanto uma tag de fe­cha­mento sinaliza o final dele. Os números presentes nas duas tags devem coincidir. Veja um exemplo de sintaxe usando a tag <h1> HTML:

<h1>*TEXTO*</h1>
html

Abaixo, mos­tra­re­mos como usar múltiplas <h> HTML tags em um documento. Vamos criar uma página para um site de receitas e estruturá-la usando os sub­tí­tu­los <h2> e <h3>. Essa divisão fa­ci­li­tará a navegação dos usuários entre as di­fe­ren­tes ca­te­go­rias de receitas:

<!DOCTYPE html>
<html>
<body>
<h1>Dicas e receitas de entradas, pratos principais e sobremesas</h1>
<p>Encontre receitas deliciosas e dicas culinárias incríveis.</p>
	<h2>Entradas e aperitivos</h2>
	<p>Aperitivos e porções para servir antes das refeições</p>
		<h3>Saladas</h3>
		<p>Ideias de saladas frescas e crocantes</p>
		<h3>Molhos e pastas</h3>
		<p>Receitas de molhos e pastas deliciosos</p>
	<h2>Pratos principais</h2>
	<p>Pratos deliciosos e fartos para todas as ocasiões</p>
		<h3>Pratos vegetarianos</h3>
		<p>Receitas vegetarianas deliciosas e saudáveis</p>
		<h3>Pratos com carne</h3>
		<p>Receitas de carnes suculentas e cheias de sabor</p>
	<h2>Sobremesas</h2>
	<p>Sobremesas e doces para encerrar com chave de ouro</p>
		<h3>Bolos e tortas</h3>
		<p>Receitas de bolos e tortas deliciosos</p>
		<h3>Sorvetes</h3>
		<p>Receitas geladas e deliciosas</p>
</body>
</html>
html
Ir para o menu principal