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.
<title>Meu código HTML</title>
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.
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.
Sempre use as tags <h1> a <h6> para títulos e somente para títulos, não confunda os mecanismos de busca.
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.
<h1>Esse é o cabeçalho 1</h1>
<p>Texto relacionado ao cabeçalho 1</p>
<h2>Cabeçalho 2</h2>
<p>Um texto relacionado ao cabeçalho 2.</p>
Esse é o cabeçalho 1
Texto relacionado ao cabeçalho 1
Um texto relacionado ao cabeçalho 2.
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.