Aula Cinco de HTML

Como adicionar um cabeçalho em uma página HTML?

Como Adicionar um Cabeçalho (h1 a h6) em uma Página HTML?

O que são cabeçalhos (tags <h1> a <h6>)?

Os cabeçalhos em HTML são usados para definir títulos e subtítulos em uma página. Eles são importantes tanto para a organização do conteúdo quanto para o SEO (Search Engine Optimization), pois os motores de busca (como o Google) utilizam os cabeçalhos para entender a estrutura do conteúdo da página.

Existem 6 níveis de cabeçalhos em HTML, representados pelas tags <h1> até <h6>. Cada um desses cabeçalhos tem um peso diferente:

<h1>: Cabeçalho de nível 1 (o mais importante e geralmente usado para o título principal da página).
<h2>: Cabeçalho de nível 2 (usado para subtítulos de maior importância).
<h3>: Cabeçalho de nível 3 (para subtítulos mais específicos).
<h4>: Cabeçalho de nível 4 (para detalhes mais específicos).
<h5>: Cabeçalho de nível 5.
<h6>: Cabeçalho de nível 6 (o menos importante).

Como Adicionar Cabeçalhos na Sua Página HTML?

Abaixo está um exemplo de como adicionar cabeçalhos em uma página HTML:

        
            <!DOCTYPE html>
            <html lang="pt-br">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Exemplo de Cabeçalhos</title>
            </head>
            <body>
                <h1>Bem-vindo ao Meu Blog</h1>
                <h2>Últimos Artigos</h2>
                <h3>Como Aprender HTML</h3>
                <p>HTML é a base da criação de páginas web...</p>
                <h3>Entendendo CSS</h3>
                <p>CSS é usado para estilizar páginas HTML...</p>
                <h2>Guias de Referência</h2>
                <h3>Referência Completa de HTML</h3>
                <p>Consulte os elementos HTML mais comuns...</p>
                <h4>Elementos de Estrutura</h4>
                <p>A estrutura básica de um documento HTML...</p>
            </body>
            </html>

Explicação do Código

Veja como os cabeçalhos são usados para estruturar o conteúdo:

<h1>: O cabeçalho principal da página, usado para o título principal (ex: "Bem-vindo ao Meu Blog").
<h2>: Cabeçalhos de nível 2, usados para dividir grandes seções (ex: "Últimos Artigos").
<h3>: Cabeçalhos de nível 3, usados para subtítulos dentro de uma seção (ex: "Como Aprender HTML").
<h4>: Cabeçalhos de nível 4, usados para subtópicos ainda mais específicos dentro de um artigo.

Como os Cabeçalhos São Visualmente Exibidos

O navegador aplica automaticamente estilos diferentes para cada nível de cabeçalho:

<h1>: Geralmente é o maior, com um tamanho de fonte grande.
<h2>: Menor que o <h1>, mas ainda assim destacando o texto como uma seção importante.
<h3>, <h4>, <h5>, <h6>: Cada um progressivamente menor.

Personalizando os Cabeçalhos com CSS

Se você quiser personalizar os cabeçalhos (mudando, por exemplo, a cor ou o tamanho), pode usar CSS. Veja um exemplo abaixo:

        
            <style>
                h1 {
                    color: #2c3e50;
                    font-size: 2.5em;
                }
                h2 {
                    color: #e74c3c;
                    font-size: 2em;
                }
                h3 {
                    color: #8e44ad;
                    font-size: 1.75em;
                }
                h4 {
                    color: #f39c12;
                    font-size: 1.5em;
                }
                h5 {
                    color: #16a085;
                    font-size: 1.25em;
                }
                h6 {
                    color: #2980b9;
                    font-size: 1em;
                }
            </style>

Resumo

<h1>: Usado para o título principal da página.
<h2> a <h6>: Usados para subseções e subtópicos, mantendo a hierarquia adequada.
Você pode personalizar os cabeçalhos com CSS para ajustar sua aparência.

Voltar à página inicial

Voltar à Tecnologia

Aula 4 de HTML

Aula 6 de HTML

Aula 5 de HTML