Vielmond

Estou eu trabalhando em um layout, e me ocorreu uma leve dúvida agora... Sou relativamente nova ao conceito de semântica e suas aplicações em SOE, e gostaria de ouvir algumas opiniões de como as tags header deveriam ser utilizadas.

Hmmm, como assim?

Li diversos artigos que basicamente explicam que o ideal é se possuir uma <h1> como header do conteúdo mais relevante (por exemplo, um header de um artigo), e então ir descendo na hierarquia. <h2> para header de alguma outra seção, <h3> para sub-headers, etc.

Exemplo:

<h1>Usando h1-h6 para identificar headings</h1>

<h2>Introdução</h2>

Isto é uma introdução, lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vehicula erat rutrum neque auctor tempor. Fusce in fermentum tellus.

<h2>Aplicações</h2>

<h3>Acessibilidade</h3>
Este é um texto cobrindo suas aplicações, screen readers, etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vehicula erat rutrum neque auctor tempor. Fusce in fermentum tellus.

<h3>Search Engine Optimization</h3>
Este é um texto discutindo a relação entre headers e SEs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vehicula erat rutrum neque auctor tempor. Fusce in fermentum tellus.

<h2>Vantagens</h2>

Aqui entra uma <dl> com suas vantagens.

<h2>E assim por diante, outros headers e seus conteúdos...</h2>

Fácil, bonito, simples, não?
Organizando somente os headers, vejo uma clara e perfeita hierarquia aqui:

[h1]__Usando h1-h6 para identificar headings
___[h2]__Introdução
___[h2]__Aplicações
_____[h3]__Acessibilidade
_____[h3]__Search Engine Optimization
___[h2]__Vantagens
___[h2]__E assim por diante, outros headers e seus conteúdos...

Não só está tudo organizado por relevância, como estão perfeitamente acomodados, "dentro" do nível h1, entra o 2, e assim por diante.

Eis que você, lendo este tópico, vira para mim e fala "Peraí garota, como assim dentro? Tá doida? Não é container, não tem nada haver!".

Só que estes headers não são layers ou ainda levels? Estas duas palavras me sugerem uma relação direta entre eles, e o fato de que se você quer usar um <h4> você tem que usar um <h3> antes, me reforça um pouco mais esta impressão.

Gerar um outline da sua página só sai claro como água quando você trata headers como se fossem nested - mesmo que não sejam na realidade. Quando não se faz isso, o outline sai estranho, não fala por si só. [links para outline no final deste post]


Agora, vamos pegar como exemplo, o layout no qual estou trabalhando.


O outline será mais ou menos isso...

[h1]__Hospedagem
___[h2]__Assine Já!
_____[h3]__Conheça quem já trabalhou conosco
________[h4]__Servidores
________[h4]__TI Network
________[h4]__Suporte Técnico
________[h4]__Hospedagem TI Soluções

Se eu enxergar este outline exatamente como ele aparece, tem algo fora de lugar aí.

O que pensam disso? Há alguém que possa me afirmar que headers são tradados somente como níveis de relevância dentro da página inteira, mas não de uma mesma coisa? Eu não quero arriscar gerar um conflito com como SEs lêem headers - artigos que li divergem entre si. Quero otimizar, e não arriscar acabar criando uma confusão que possa atrapalhar a indexação.

Ferramentas para gerar outlines:
http://validator.w3....ri with_options
http://www.w3.org/20...-extractor.html