Guia rápido para cabeçalhos HTML

Neste artigo, abordaremos os diferentes tipos de cabeçalhos HTML e como usá-los de maneira eficaz no design da web.

Os cabeçalhos são um dos elementos mais importantes do HTML, pois fornecem estrutura e organização ao conteúdo da web.

Títulos Exemplo:

Este é o título H1 Exemplo

Este é o título H2 Exemplo

Este é o título H3 Exemplo

Este é o título H4 Exemplo

Este é o título H5 Exemplo
E este é o cabeçalho H6 Exemplo
Índice-

Cabeçalhos HTML

O HTML fornece seis níveis diferentes de cabeçalhos, de h1 a h6.

O título h1 é o mais importante e deve ser usado para o título principal da página, enquanto o título h2 deve ser usado para subtítulos e assim por diante.

Aqui está um exemplo:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<h1>Here we have used h1 heading tag</h1>
<h2>Here we have used h2 heading tag</h2>
<h3>Here we have used h3 heading tag</h3>
<h4>Here we have used h4 heading tag</h4>
<h5>Here we have used h5 heading tag</h5>
<h6>Here we have used h6 heading tag</h6>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

Este código acima representa um documento HTML que contém seis tags de cabeçalho diferentes (h1, h2, h3, h4, h5 e h6) que são usadas para definir os cabeçalhos em diferentes níveis em uma página da web.

  • O texto “ Aqui usamos a tag de cabeçalho h1 ” está escrito dentro da primeira tag de cabeçalho, que é h1. A tag h1 é usada para o título principal da página da web e é a maior e mais importante tag de título.
  • O texto “ Aqui usamos a tag de cabeçalho h2 ” está escrito dentro da segunda tag de cabeçalho, que é h2. A tag h2 é usada para subtítulos e títulos de seções na página da web e é um pouco menor que a tag h1.
  • O texto “ Aqui usamos a tag de cabeçalho h3 ” está escrito dentro da terceira tag de cabeçalho, que é h3. A tag h3 é usada para subtítulos de subseções na página da web e é menor que a tag h2.
  • O texto “ Aqui usamos a tag de cabeçalho h4 ” está escrito dentro da quarta tag de cabeçalho, que é h4. A tag h4 é usada para os títulos das subsubseções na página da web e é menor que a tag h3.
  • O texto “ Aqui usamos a tag de cabeçalho h5 ” está escrito dentro da quinta tag de cabeçalho, que é h5. A tag h5 é usada para os cabeçalhos das sub-subsubseções na página da web e é menor que a tag h4.
  • O texto “ Aqui usamos a tag de cabeçalho h6 ” está escrito dentro da sexta tag de cabeçalho, que é h6. A tag h6 é usada para os cabeçalhos das subseções menores e menos importantes da página da Web e é a menor tag de cabeçalho.
Lembrete: lembre-se de que os navegadores incluem algum espaço em branco (uma margem) antes e depois de um cabeçalho.

Usando cabeçalhos de forma eficaz

Ao usar cabeçalhos HTML , é importante seguir algumas práticas recomendadas para garantir que seu conteúdo seja acessível e fácil de entender.

Aqui estão algumas dicas:

  • Os títulos são usados ​​pelos mecanismos de pesquisa para indexar a estrutura e o conteúdo de suas páginas da web. Os cabeçalhos devem ser usados ​​para estruturar seu conteúdo de forma lógica e organizada, tornando mais fácil para usuários e rastreadores escanear e encontrar o que procuram.
  • Os usuários geralmente assistem a uma página com base em seus títulos. Certifique-se de que seus títulos sejam descritivos e reflitam com precisão o conteúdo da seção que estão apresentando. Isso tornará mais fácil para os usuários entenderem do que se trata cada seção.
  • Use apenas um <h1> por página. (O uso de vários cabeçalhos h1 pode confundir os usuários e dificultar a compreensão da estrutura do seu conteúdo pelos mecanismos de pesquisa.)
  • Ao usar vários títulos em uma página, verifique se eles seguem uma estrutura hierárquica, com títulos h2 sendo usados ​​para subtítulos e assim por diante.

Cor dos Títulos Html

Há uma cor padrão para cada cabeçalho HTML . Se você quiser especificar a cor de um título, pode fazê-lo através do atributo style , usando a propriedade CSS Color. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">Mr Example H1 Title</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Título em negrito

Existe um peso padrão para cada título HTML . Se você quiser alterar o peso de um título, pode fazê-lo através do atributo style, através da propriedade CSS font-weight. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<h4 style="font-weight: 900;">Mr Example H1 Title</h4>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cabeçalho Decoração

Os cabeçalhos HTML geralmente têm estilo simples e negrito, mas se você quiser estilizá-los de maneira diferente, pode fazê-lo usando o atributo style, aplicando a propriedade CSS text-decoration. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<h1 style="text-decoration: underline;">Mr Example H1 Title</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cabeçalhos Maiores

Existe um tamanho padrão para cada título HTML . Se você quiser especificar o tamanho de um título, pode fazê-lo através do atributo style, usando a propriedade CSS font-size. Veja exemplo abaixo:

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:55px;">Mr Example H1 Title</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Referência de marca HTML

Quando falamos de cabeçalhos HTML , uma descrição dessas tags e os atributos que elas contêm podem ser encontrados na referência de tags do Sr. Exemplos abaixo.

Tag Visão geral
<html> A base de um documento HTML.
<corpo> Descreve o corpo do documento.
<h1> a <h6> Os cabeçalhos HTML são definidos aqui.
Visite nossa referência de tags HTML para obter uma lista abrangente de todas as tags HTML possíveis.

Conclusão

Os cabeçalhos HTML desempenham um papel importante na estruturação e organização do conteúdo da web. Além de hierarquizar, eles tornam o conteúdo mais fácil de entender para humanos e mecanismos de busca.

Você deve usar títulos sequencialmente, evitar pular níveis e usar texto descritivo e conciso ao usar títulos. Com a ajuda de cabeçalhos HTML, você pode melhorar a acessibilidade do seu site e a experiência do usuário, bem como aumentar a otimização do mecanismo de pesquisa (SEO).

Assine nosso boletim informativo para obter as informações técnicas mais recentes de nosso site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.