Cabeçalhos/Títulos
Os cabeçalhos, ou elementos de título, variam do nível 1 ao nível 6, eles podem ser utilizados como títulos de seção ou para introduzir um determinado conteúdo. Eles são elementos de fluxo, mas que possuem o seu próprio modelo de conteúdo (heading content).
Cada um dos níveis de cabeçalhos organiza o conteúdo em tópicos ou áreas distintas, ordenadas de acordo com seu nível de importância, sendo que o nível 1 possui mais importância, ou peso, e o nível 6 o menor peso. Os níveis de menor importância, ou neste caso de maior valor, representam as subseções do elemento de maior nível de importância.
Por padrão os navegadores exibem os cabeçalhos utilizando uma fonte com estilo em negrito, com diferentes tamanho para cada nível, sendo que os elementos h1 serão maiores e os elementos h6 serão os menores.
Vários elementos de cabeçalho podem ser agrupados em um único elemento hgroup, estes elementos passam a funcionar com o título da seção e o cabeçalho de mais nível se torna o nível do grupo. Geralmente utilizamos esta estrutura para construção de Títulos e Subtítulos. Em um elemento hgroup apenas podemos adicionar os elementos de h1 à h6.
Podemos utilizar o código abaixo como um exemplo:
<hgroup>
<h1>Este é um cabeçalho nivel 1</h1>
<h2>Este é um cabeçalho nivel 2</h2>
<h3>Este é um cabeçalho nivel 3</h3>
<h4>Este é um cabeçalho nivel 4</h4>
<h5>Este é um cabeçalho nivel 5</h5>
<h6>Este é um cabeçalho nivel 6</h6>
</hgroup>
O código, acima, quando interpretado pelo navegador deve gerar uma saída semelhante à:
Devido a forma como os cabeçalhos são estilizados, observamos que vários sites abusam do seu uso, devemos lembrar que um elemento h2 representa “o segundo mais importante cabeçalho” e não “a segunda maior fonte”.
Quando trabalhamos com cabeçalhos devemos mantê-los em uma ordem que faça sentido. Geralmente dentro do elemento body temos apenas um elemento h1, mas dentro de cada seção, ou elemento de seccionamento, podemos ter o seu próprio elemento h1; pois cada seção inicia sua própria hierarquia de cabeçalhos. Desta forma, podemos ter vários elementos h1 em um determinado documentos, mas apenas um subordinado ao elemento body e um em cada seção.
Podemos utilizar o código abaixo como um exemplo de uso de vários elementos h1 na mesma página:
<body>
<h1>Aplicativos</h1>
<p> Lista de Aplicativos para aula de Programação Web</p>
<section>
<h1>Editores de Texto</h1>
<p>Editores de texto que podemos utilizar para construir os exercícios</p>
<section>
<h1>Atom.io</h2>
<p>
O Atom é um editor de texto moderno e acessível. Ele é
uma ferramenta que você pode personalizar para fazer qualquer coisa,
mas também usar de forma produtiva sem tocar em um arquivo de configuração.
</p>
<h2>Downloads</h2>
<ul>
<li><a href="https://atom.io/download/mac" title="Download da versão para Mac OS"> Mac OS</a></li>
<li>
<a href="https://github.com/atom/atom/releases/download/v1.24.0/AtomSetup.exe"
title="Download da versão para Windows">
Windows
</a>
</li>
<li>
<a href="https://github.com/atom/atom/releases/download/v1.24.0/atom-amd64.deb"
title="Download da versão para Ubuntu">
Ubuntu
</a>
</li>
</ul>
</section>
</section>
</body>
O código, acima, quando interpretado pelo navegador deve gerar uma saída semelhante à:
