Curso de Html5 | Aula 02 - Como Criar Títulos no Html5
Inscreva-se no canal!
Se você tem interesse no conteúdo falado no vídeo e aqui neste artigo, clique no botão abaixo e se inscreva no canal.
Conteúdo complementar a Vídeo Aula!
Se você está começando no mundo do desenvolvimento web, provavelmente já se deparou com termos como HTML, tags, cabeçalhos, e por aí vai.
Um dos primeiros conceitos fundamentais para dominar na criação de páginas HTML5 é a estrutura de títulos e subtítulos usando as tags de cabeçalho: h1, h2, h3, h4, h5 e h6.
Essas tags não são apenas elementos estéticos. Elas são essenciais para a organização semântica do conteúdo, para a experiência do usuário e para o SEO (Search Engine Optimization).
Neste artigo, será falado sobre cada uma dessas tags, quando e como usá-las, boas práticas, erros comuns e exemplos práticos.
Acompanhe a leitura até o final para dominar o uso das headings no HTML5 e criar páginas mais acessíveis, organizadas e otimizadas.
O que são as tags h1 a h6?
As tags h1 até h6 representam os diferentes níveis de cabeçalhos (títulos e subtítulos) dentro de uma página HTML.
A sigla "h" vem de "heading", e o número que a acompanha indica seu nível hierárquico.
- h1 título principal da página, artigo (article), sessão (section), rodapé (footer)
- h2 subtítulo do h1
- h3 subtítulo do h2
- h4 subtítulo do h3
- h5 subtítulo do h4
- h6 subtítulo do h5
Exemplo simples:
<h1>Curso de HTML5</h1>
<h2>Módulo 1: Introdução</h2>
<h3>O que é HTML</h3>
<h4>História do HTML</h4>
<h5>Versões anteriores</h5>
<h6>Notas de rodapé</h6>
Neste exemplo, vemos uma estrutura hierárquica clara. Isso ajuda tanto os visitantes do site quanto os mecanismos de busca a entenderem a organização da informação.
Por que usar corretamente as tags de cabeçalho?
1. Organização Semântica
A semântica no HTML refere-se ao uso de tags que comunicam o propósito do conteúdo. Ao usar h1 para o título principal e h2 a h6 para subtítulos, o desenvolvedor indica ao navegador e aos motores de busca como a informação está estruturada.
2. SEO (Search Engine Optimization)
Motores de busca como o Google priorizam conteúdos bem organizados. O uso correto de headings melhora o ranqueamento nas buscas, pois facilita a indexação dos tópicos tratados.
3. Acessibilidade
Leitores de tela utilizados por pessoas com deficiência visual usam essas tags para navegar na página. Um site com boa estrutura de cabeçalhos torna a navegação mais acessível.
4. Experiência do Usuário
A leitura de uma página bem estruturada é mais fluida. Os olhos do leitor encontram com facilidade os tópicos, favorecendo a escaneabilidade do conteúdo.
Introduzindo HTML5 e a função dos títulos
Como explico na vídeo aula do curso de html5, que está neste artigo. O HTML5 é a versão mais atualizada da linguagem de marcação HTML.
Quando acessamos o código-fonte de uma página (pressionando CTRL + U), tudo que parecia visualmente atrativo - como cores, imagens e fontes - desaparece, revelando apenas o código puro (html, css e/ou javascript).
Esse código é composto de diversas tags, incluindo as que definem os títulos.
Mesmo que você esteja usando um editor simples como o bloco de notas, a tag <h1> já define semanticamente que aquele é o título principal, mesmo sem aplicar estilos visuais.
Quando usar cada tag de cabeçalho?
tag h1 - Título principal da página
- Deve haver apenas um tag h1 por página quando a tag está “solta” (desvinculada das tags article, section, footer e outras semelhantes); ou,
- Por sessão (tag section), artigo (tag article), rodapé (tag footer) entre outras tag que criam blocos com sentido completo.
- Geralmente representa o assunto principal da página ou artigo.
- Em um blog, pode ser o título do post.
tag h2 - Seções do conteúdo principal
- Subdivide o conteúdo do tag h1.
- Pode ser usado várias vezes na página.
- Representa seções principais do artigo.
tag h3 - Subseções dos tag h2
- Mais específicas, geralmente usadas para subtópicos.
tag h4, tag h5, tag h6
- Usadas quando há necessidade de mais profundidade na hierarquia.
- Em artigos longos de blogs, manuais ou tutoriais com muitos níveis, ajudam a manter a clareza.
Estrutura recomendada
<article>
<h1>Guia Completo de HTML5</h1>
<section>
<h2>O que é HTML</h2>
<p>HTML é a linguagem...</p>
</section>
<section>
<h2>Como criar seu primeiro arquivo HTML</h2>
<h3>Usando o Bloco de Notas</h3>
<h3>Usando o Brackets</h3>
</section>
</article>
Note que o uso de cabeçalhos aqui ajuda a descrever a estrutura lógica do conteúdo, como uma árvore com galhos e subgalhos.
Exemplo prático numa página HTML sem usar article ou section
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu Primeiro Site</title>
</head>
<body>
<h1>Bem-vindo ao Curso de HTML5</h1>
<p>Aprenda do zero até a criação de projetos reais.</p>
<h2>Instalação do Editor</h2>
<p>Recomendamos o uso do Brackets.</p>
<h3>Por que não usar o Bloco de Notas?</h3>
<p>Apesar de possível, ele não fornece recursos como destaque de sintaxe...</p>
<h2>Criando seu primeiro arquivo</h2>
<p>Salve com a extensão .html, evite acentos, espaços e caracteres especiais.</p>
</body>
</html>
Dicas práticas que recomendo
1. Evite nomes de arquivos com espaços ou acentos.
Em vez de meu primeiro site.html, prefira meu_primeiro_site.html.
2. Use editores adequados.
Brackets, visual studio code, netbeans são opções iniciais e gratuitas para te ajudar a criar suas páginas e projetos com html5.
Evite usar o bloco de notas do windows ou outros editores de texto semelhantes.
3. Evite depender de recursos automáticos.
Escreva código manualmente, para ganhar agilidade e independência.
4. Organize o conteúdo com clareza.
Nomeie arquivos e pastas com lógica e padronização usando sempre nome que façam sentidos, independente de quem está lendo.
Boas práticas no uso dos cabeçalhos HTML
- Use apenas uma tag h1 "solta" por página: Isso define claramente o propósito da página.
- Mantenha uma hierarquia coerente: Não pule níveis (ex: usar tag h1 e depois tag h4 direto). Isso confunde leitores e mecanismos de busca.
- Combine headings com tag section e tag article: Ajuda na semântica e acessibilidade do documento.
- Utilize CSS para estilizar os títulos: As tags h1 a h6 não controlam estilos visuais. Isso é responsabilidade do CSS.
Erros comuns ao usar cabeçalhos HTML
| Erro | Explicação |
|---|---|
| Usar várias tag h1 "soltas" ou dentro da mesma tag article, section ou footer | Quebra a estrutura hierárquica da página |
| Ignorar níveis (ex: tag h2 seguida da tag h5) | Dificulta a leitura lógica do conteúdo |
| Usar níveis diferentes de cabeçalhos apenas por causa do tamanho da fonte | Deve-se usar cabeçalhos do html pela semântica, não pelo visual |
| Misturar funções de tag h1 com tag p | Títulos são diferentes de parágrafos, evite confusão |
Aplicações práticas com SEO
Ferramentas como o Google Search Console, SEMrush e Yoast SEO recomendam o uso estratégico de cabeçalhos do html.
A tag h1 geralmente carrega a palavra-chave principal, e as tags h2 os subtópicos.
<h1>Como Criar um Site em HTML5</h1>
<h2>Passo 1: Instale o Editor</h2>
<h2>Passo 2: Crie um Arquivo HTML</h2>
<h3>Estrutura básica do HTML5</h3>
Essa organização ajuda o Google a entender o tema central da página e indexar corretamente.
Quando usar as tags h4, h5 e h6?
Esses níveis são menos usados, mas importantes em conteúdos complexos.
Imagine uma documentação técnica, com vários tópicos e subtópicos. A estrutura pode chegar até h6 de forma organizada.
<h2>Documentação API</h2>
<h3>Autenticação</h3>
<h4>Requisições</h4>
<h5>Headers</h5>
<h6>Exemplos JSON</h6>
Cabeçalhos do HTML vs Estilo Visual
Como ensinado na vídeo aula, o bloco de notas não diferencia o que é título, subtítulo ou parágrafo, porque não entende a estrutura das tags html.
Já o Brackets e outros editores de código robustos reconhecem as tags do html e com isso, além da diferenciação visual, há sugestões automáticas na hora de escrever.
Mas lembre-se: o visual final do título não vem da tag, e sim do CSS (cascading style sheet ou folha de estilo em cascata).
h1 {
font-size: 32px;
color: navy;
text-align: center;
}
Conclusão
Dominar as tags h1 até h6 é um dos primeiros e importantes passos na jornada do desenvolvimento web.
Pois, elas não são apenas títulos e subtítulos, são marcadores semânticos que organizam seu conteúdo, melhoram a usabilidade, a acessibilidade e o SEO das suas páginas.
Lembre-se das dicas práticas:
- Use apenas uma h1 solta por página.
- Siga a hierarquia correta dos títulos.
- Não use cabeçalhos apenas por estilo visual.
- Combine com CSS para personalizar visualmente.
Comece criando pequenas páginas e vá estruturando com cabeçalhos de maneira lógica.
Utilize um editor de código adequado, como o Brackets, Visual Studio Code, Netbeans etc, e siga os bons hábitos desde o início.
Assim, você construirá bases sólidas para se tornar um desenvolvedor web profissional.
Quer Ser um Desenvolvedor Front-End e Back-End?
Está querendo estudar desenvolvimento web para se tornar um programador/desenvolvedor back-end e front-end te convido a conhecer o meu curso sobre Desenvolvimento Web, aonde Ensino como Trabalhar com Html5, Css3, Javascript, Php e Sql (MySQL e MariaDB) para criar projetos para Web como Sites e Aplicativos Web. Atualmente o curso possui mais de 40 Horas de Aulas em Vídeo e mais de 118 Vídeos Aulas prontas. Clique Aqui e Venha conhecer o Curso!
