Nessa aula iremos aprender sobre as tags <h1>, <h2>, <h3>, <h4>, <h5>, e <h6>. Parece ser muita coisa para aprender de uma vez só, mas na verdade não é. Todas essas 6 tags possuem o mesmo propósito: marcar um cabeçalho da página (heading, pronunciado "réédim").
<body>
<h1>Como Escrever HTML</h1>
Nessa página irei explicar como escrever HTML.
<h2>Passo 1: Instalando os VS Code</h2>
A primeira coisa que você deve fazer é...
</body>Um cabeçalho é um texto que descreve uma seção da página que começa depois do cabeçalho. Em páginas complexas, é comum haver seções e subseções, e sub-subseções, e sub-sub-subseções, e assim por diante. O HTML permite você criar no máximo 6 níveis de seções através das tags H1 a H6.
É recomendado usar apenas uma tag <h1> por página, que seria o título da página inteira.
Todas as seções da página seriam tituladas com tags <h2>. Subseções com tags <h3>. Sub-subseções com tags <h4>. E assim por diante.
O número depois do h de 1 a 6 é chamado do nível do cabeçalho (heading rank).
Por padrão, navegadores estilizam os cabeçalhos como um texto de tamanho maior. O nível mais alto (h1) é um texto bem grande, enquanto os níveis mais baixos são gradualmente menores. Porém, não se deve usar essas tags só para deixar o texto mais grande que o normal! Para isso usamos CSS, que iremos aprender sobre nas próximas aulas. Por enquanto, iremos aprender o por que não podemos usar o estilo padrão da tag para esse motivo.
Primeiro, há a questão de acessibilidade. Existem nesse mundo pessoas que não conseguem enxergas, mas ainda sim elas são capazes de usufruir de tecnologias como a web. Quando elas usam um navegador de internet, elas não tem como ver o que está escrito da página, já que são cegas, nem tão pouco possuem como distinguir visualmente um texto grande de um texto pequeno. Em vez disso, para elas entenderem o que está escrito na tela, elas usam um programa que dita o texto da tela chamado de leitor de tela (screen reader).
O leitor de tela usa as tags <h1> a <h6> para entender a estrutura da tela, e ele apresenta essa estrutura para o usuário cego. Com isso, o usuário pode saber sobre o que a página fala sem precisar ler a página inteira, e pode pular para a seção que lhe interessa rapidamente, de forma similar como nós podemos usar a rodinha do mouse para rolar rapidamente pela página e ver o texto grande do cabeçalho que contém alguma palavra que nos interessa.
O segundo motivo são os motores de busca (e.g. o Google). Motores de busca podem usar o texto dos cabeçalhos para entender melhor a estrutura da página, quais tópicos a página fala sobre, e, com isso, exibir a página em posições mais altas para pesquisas nas quais seus tópicos são mais relevantes. Note que os motores de busca estão acostumados com donos de websites mal-intencionados tentando de tudo para fazer seu site subir nas pesquisas. Então não adianta botar o texto inteiro da página em um cabeçalho, ou botar um monte de cabeçalhos pela página. Simplesmente coloque cabeçalhos onde faz sentido e isso será o bastante.
Em ambos os casos, existe um algoritmo que determina qual cabeçalho se aplica a qual parte da página. O termo técnico para esse relacionamento é Document Outline (outline normalmente significa "contorno" (out é "fora" e line é "linha") mas nesse caso é mais para uma "ideia geral," no sentido de sua "silhueta").
A ideia desse algoritmo é bem simples: o nível de cada seção corresponde ao nível de seu cabeçalho, e você não pode ter uma seção de nível mais alto (e.g. h2) dentro de uma seção de nível mais baixo (e.g. h3). Com isso, toda vez que você usa um cabeçalho de nível mais alto que o anterior, as seções são "fechadas." Por exemplo, se escrevermos uma página com um código como esse:
<h1>Sobre Cabeçalhos em HTML.</h1>
...
<h2>O que são cabeçalhos?</h2>
...
<h3>Por que cabeçalhos não ficam na tag cabeça (head)?</h3>
...
<h2>Qual a diferença entre h1, h2, h3, h4, h5, h6?</h2>
...
<h3>Considerações de Acessibilidade</h3>
...
<h4>Como Leitores de Tela Funcionam</h4>
...
<h3>Uso por Motores de Busca</h3>
...
<h2>O que é Document Outline?</h2>
...Teríamos a estrutura (Document Outline) a seguir:
1. Sobre Cabeçalhos em HTML
1.1. O que são cabeçalhos?
1.1.2. Por que cabeçalhos não ficam na tag cabeça (head)?
1.2. Qual a diferença entre h1, h2, h3, h4, h5, h6?
1.2.1 Considerações de Acessibilidade
1.2.1.1. Como Leitores de Tela Funcionam
1.2.2. Uso por Motores de Busca
1.3. O que é Document Outline?Isto é, se escrevermos <h3>Por que cabeçalhos..., esse cabeçalho é válido para o texto que vai desse <h3>, até o próximo <h3>, ou até o próximo cabeçalho de ranking maior (<h2>Qual a diferença...).
Deixe um comentário