Como usar corretamente o h1 em HTML5
Qual das alternativas a seguir é a maneira correta de estruturar uma página:
1)h1
somente emheader
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h2>Page title</h2>
</section>
Se eu usarh1
exclusivamente dentro deheader
como o título do site, todas as páginas terão o mesmo conteúdo para oh1
tag. Isso não parece muito informativo.
2)h1
dentroheader
esection
, para o site e o título da página
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
Eu também vi exemplos de como usarh1
mais de uma vez, nos doisheader
esection
Tag. No entanto, não é errado ter dois títulos para a mesma página? Este exemplo mostra vários cabeçalhos eh1
Taghttp: //orderedlist.com/resources/html-css/structural-tags-in-html5
3)h1
somente emsection
, enfatizando o título da página
<header>
<p>Site title</p>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
Por fim, o W3 parece recomendar o uso deh1
dentro do @ principsection
, isso significa que não devo usá-lo noheader
elemento
s seções @ podem conter títulos de qualquer classificação, mas os autores são fortemente encorajados a usar apenas os elementos h1 ou a elementos da classificação apropriada para o nível de aninhamento da seçã