Os cabeçalhos de uma página tem função fundamental para a acessibilidade. Pessoas que utilizam softwares leitores de tela navegam pela estrutura de cabeçalhos e utilizam o tipo de cabeçalho para navegar entre eles.

O primeiro cabeçalho que temos em HTML já é um conhecido nosso e é de uso praticamente obrigatório, é o <head>. O <head> é um contêiner para armazenar metadados sobre o documento HTML, é aqui que definimos o título do documento, autor, estilos, scripts e muito mais. Os metadados não são exibidos na página, mas é de suma importância que sejam definidos.

O <head> é colocado entre as tag <html> e <body>, veja o exemplo abaixo.

<!DOCTYPE html>
<html>

<head>
  <title>Meu código HTML</title>
  <meta charset="UTF-8">
</head>

<body>

Outro tipo de cabeçalho que temos em HTML são os títulos e esses são visíveis na página pois são aninhados coma tag <body>.

Títulos são o que o próprio nome diz, um título, serve para introduzir um conteúdo que vem abaixo dele, como em um livro, onde temos o título do capítulo e logo em seguida o conteúdo. Os títulos HTML podem ter diferentes tamanhos, isso classifica o grau de importância de cada um deles, isso é muito importante para o SEO. Em HTML eles são definidos pela tag <h> e vão de 1 a 6, sendo <h1> o título mais importante, e <h6> o menos importante. Vale lembrar também que eles têm tamanhos diferentes, <h1> é o maior e <h6> o menor. Vamos a um exemplo prático.

&lt;h1>Título 1&lt;/h1>
&lt;h2>Título 2&lt;/h2>
&lt;h3>Título 3&lt;/h3>
&lt;h4>Título 4&lt;/h4>
&lt;h5>Título 5&lt;/h5>
&lt;h6>Título 6&lt;/h6>

Título 1

Título 2

Título 3

Título 4

Título 5

Título 6

Porque os cabeçalhos são importantes?

Além de definir a estrutura do documento e dividir o conteúdo em partes ou capítulos, ele é muito importante para que mecanismos de pesquisas indexem a estrutura e conteúdo de suas páginas (SEO).

Como foi dito, use <h1> para o título principal, o mais importante, como se fosse o nome do livro, <h2>, <h3> … <h6> para título menos importantes, pense como se fosse capítulos e/ou subtítulos.

Atenção! Sempre use as tags <h1> a <h6> para títulos e somente para títulos, não confunda os mecanismos de busca.

Linhas horizontais

O <hr> é a tag que define uma quebra temática nas páginas web e é exibida (com mais frequência) como uma linha horizontal ou um traço.

O <hr> é o elemento usado para separar um conteúdo em uma página HTML, ou definir algum tipo de alteração nela. Para entender melhor o uso do <hr> acompanhe o código abaixo.

&lt;h1>Esse é o cabeçalho 1&lt;/h1>
&lt;p>Texto relacionado ao cabeçalho 1&lt;/p>
&lt;hr>
&lt;h2>Cabeçalho 2&lt;/h2>
&lt;p>Um texto relacionado ao cabeçalho 2.&lt;/p>
&lt;hr>

Esse é o cabeçalho 1

Texto relacionado ao cabeçalho 1

Cabeçalho 2

Um texto relacionado ao cabeçalho 2.

Como eles fazem isso?

Na verdade, toda página HTML é baixada diretamente no seu navegador e você pode visualizar o código completo de uma página e responder a essa pergunta. Para isso clique com o botão direito do mouse em uma página web e escolha a opção “Exibir código fonte da página”, algo assim, depende do navegador. Você também pode escolher a opção “Inspecionar” (pelo menos no Chrome) daí abrirá um painel que mostra, não somente o HTML, mas também todo CSS relacionado ao elemento que você está inspecionando. Nesse painel você pode fazer mudanças em tempo real, lógico que essas mudanças não ficam salvas, mas é bom para testar e visualizar as respostas do navegador diante de uma programação HTML ou até mesmo CSS.

Explore, tente, invente, reinvente, continue o curso e estude bastante porque só assim você se tornará um excelente programador frontend e dominará o vasto mundo HTML.