A maneira mais simples e eficiente de aprender HTML 5 – Aula 4 - Cabeçalhos

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.


<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</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.


<h1>Esse é o cabeçalho 1</h1>
<p>Texto relacionado ao cabeçalho 1</p>
<hr>
<h2>Cabeçalho 2</h2>
<p>Um texto relacionado ao cabeçalho 2.</p>
<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.

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.