Títulos e parágrafos

Bem-vindo ao "HTML Foundations"! Estou muito animado para guiar você na sua jornada de desenvolvimento web. Hoje, vamos aprender a organizar texto em uma página web. Se você já escreveu uma redação ou leu um livro, já conhece os conceitos básicos de como estruturar conteúdo.

Vamos lá!

O propósito das tags de texto

Você pode estar se perguntando: Por que precisamos de tags especiais? Por que não posso simplesmente digitar minhas palavras direto na tela?

Se você simplesmente digitar palavras em um documento HTML e apertar "Enter" para criar novas linhas, o navegador vai ignorar esses espaços e amontoar todas as suas palavras em um único bloco de texto gigante e ilegível. Usamos tags HTML especiais para resolver esse problema.

As tags dão estrutura e significado ao nosso texto, dizendo ao navegador exatamente qual é o propósito do texto. Essa estrutura não é só para a aparência; ela é incrivelmente importante por dois motivos principais:

Mecanismos de busca: As tags ajudam os mecanismos de busca (como o Google) a descobrir do que a sua página trata, para que possam classificá-la corretamente.
Leitores de tela: Usuários com deficiência visual frequentemente dependem de "leitores de tela", que são softwares especiais que leem as páginas web em voz alta. Essas ferramentas usam as tags de texto como placas de sinalização para ajudar os usuários a navegar rapidamente pelo site.

Parágrafos (`<p>`)

Para o texto comum do corpo, usamos a tag de parágrafo, que é escrita como <p>.

Sempre que você quiser escrever uma frase normal ou um grupo de frases relacionadas, basta envolvê-las em tags de parágrafo. Quando o navegador vê uma tag <p>, ele sabe que deve agrupar aquele texto e automaticamente adiciona um pequeno espaço vazio acima e abaixo dele. Esse espaçamento natural cria um layout limpo e torna o seu texto muito mais fácil de ler.

A hierarquia dos títulos (`<h1>` até `<h6>`)

Os títulos são os cabeçalhos e subtítulos da sua página web. O HTML oferece seis níveis diferentes de tags de título, indo do <h1> (o nível mais alto e mais importante) até o <h6> (o nível mais baixo e menos importante).

Pense nesses títulos como o esboço de um jornal ou de um livro didático:

O título do livro: O título principal na capa é o seu <h1>.
Os capítulos: Os principais títulos de capítulo dentro do livro são as suas tags <h2>.
Os subtópicos: Se um capítulo é dividido em subseções menores, essas seriam as suas tags <h3>, e assim por diante.

As regras de ouro da semântica

Quando falamos de "semântica" no desenvolvimento web, queremos dizer apenas usar a tag certa para o trabalho certo, para que o seu código tenha um significado claro. Ao usar títulos, você deve sempre seguir estas regras de ouro:

Apenas um <h1> por página: Pense no <h1> como o título principal do seu documento. Como uma página deve ter apenas um tópico principal, ela geralmente deve ter apenas uma tag <h1>.
Não pule níveis: Seus títulos precisam seguir uma ordem estrita e sequencial. Por exemplo, você nunca deve pular diretamente de um <h2> para um <h4>. Pular níveis cria um esboço confuso tanto para os mecanismos de busca quanto para os leitores de tela.
Nunca use títulos para estilizar: Você NUNCA deve usar uma tag de título só porque quer que o seu texto pareça grande ou em negrito. Os títulos servem estritamente para organizar a estrutura da página. Se você quer mudar o tamanho ou a espessura de um texto comum, esse é um trabalho para o CSS (Cascading Style Sheets, uma linguagem separada que usamos especificamente para estilizar sites).

Um exemplo claro

Aqui está um exemplo curto e fácil de ler mostrando como você pode combinar títulos e parágrafos para criar uma página web bem estruturada:

Editável

<h1>O Guia Definitivo sobre Cachorros</h1>
<p>Cachorros são animais de estimação populares no mundo todo. Eles são conhecidos pela lealdade e pela personalidade brincalhona.</p>

<h2>Escolhendo a raça de cachorro certa</h2>
<p>Antes de trazer um cachorro para casa, é importante escolher uma raça que combine com o seu estilo de vida.</p>

<h2>Treinamento básico de cachorros</h2>
<p>Treinar o seu novo filhote exige paciência e consistência. Sempre use reforço positivo!</p>

Resumo

Você conseguiu! Aqui estão os principais aprendizados desta lição:

Usamos tags de texto HTML para que navegadores, mecanismos de busca e leitores de tela consigam entender e exibir nosso conteúdo corretamente.
Use a tag <p> para todo o seu texto comum e frases.
Use as tags <h1> até <h6> para criar um esboço lógico da sua página, muito parecido com os capítulos de um livro didático.
Sempre use exatamente um <h1> por página, nunca pule níveis de título e nunca use títulos só para deixar o texto grande ou em negrito.

Ótimo trabalho hoje! Você está construindo uma excelente base no desenvolvimento web.