A Semântica dos títulos HTML 5

“A validação do W3C é fundamental para que seu documento
possua uma a semântica ideal”. Afirmar tal frase é um erro quando se trata de
semântica do documento HTML.  Enquanto escrevia este artigo para falar da importância do posicionamento das Tags no
documento e seu uso adequado, vi no Twitter que a Google anunciou que o
carregamento da página agora também faz parte da relevância nos buscadores. Essa mudança nos mostra um pouco o quanto é importante o focar no
conteúdo, além de criar um novo conceito web, com novos formatos para a maneira como nos comunicamos atualmente. Mas isso são algumas tendências que não fazem parte do escopo deste artigo. Então, vamos lá.

Há um elemento muito utilizado nos documentos web e, com o tempo, observei que estes elementos não são utilizados da maneira
correto, interferindo na semântica do documento por consequência interferindo
no sucesso do site nos buscadores, mas que elemento seria esse?

O elemento título escrito das seguintes formas: H1, H2, H3, H4, H5 e H6.

Sugestão para uma página é que se utilize até a Tag H4.

Os títulos são elementos, que descrevem o conteúdo que se
segue e também definir a estrutura de um documento. Semelhante aos títulos e
subtítulos livros. Essa lógica toda eu não aprendi sozinho, graças as grandes
oficinas de aprendizado que obtive ao lado do Thiago Oliveira, mais conhecido
como Schizo. Discutíamos tardes e mais tardes a fim de atingir um objetivo
incomum, que era a padronização da semântica. E chegamos a seguinte analogia:

Um site é como um livro impresso, possui apenas um título (h1)
em seu documento e seus submenu (H2, h3 e H4). Seu menu de navegação é como um
sumário executivo, no qual identificamos todos os temas abordados no
livro.  Seu rodapé do site contem as informações
 que no livro costuma estar na primeira
página, do tipo: Editora, data de publicação e endereço de contato. 

Após chegarmos a esta conclusão que foi em meados de 2007 eu
sempre penso desta forma ao montar um site, me inspiro sempre em livros. E sempre
busco nos impressos que na sua maioria priorizam a informação, que acredito que
é a grande tendência daqui para frente.

As tags na prática

O exemplo que vou dar esta um pouco fora da realidade de
todo desenvolvedor, estou com um livro de economia para executivos em mãos e
vou migrar o livro para as Tags HTML 5

  Exemplo do livro:

Nome do livro: Contabilidade para Executivos

Sumário:

·        
Fundamentos da contabilidade

o  
A Informação contábil

o  
Conceitos básicos

o  
Princípios fundamentais da contabilidade

·        
Demonstrações contábeis

o  
Importância das demonstrações contábeis

o  
Formação e estrutura das demonstrações

o  
Relatório da administração

·        
Análise econômico-financeira

o  
Capital de giro

o  
Análise vertical

o  
Análise horizontal

o  
Índices de rentabilidade e lucratividade 

 

Agora
vamos transformar este exemplo em um documento .HTML 5

 

<h1> Contabilidade
para Executivos </h1>

<menu>

<li><a href=”/fundamentos-contabilidade”
title=” Fundamentos da contabilidade”> Fundamentos da contabilidade</a></li>
<li><a href=”/Demonstracoes-contabeis ” title=”Demonstrações contábeis”>
Demonstrações contábeis </a></li>
<li><a href=”/econômico-financeiro” title=” Análise
econômico-financeiro”> Análise econômico-financeiro </a></li>

</menu>

<h2> Fundamentos da contabilidade</h2>
<h3>A informação contábil</h3>
<h3>Conceitos básicos</h3>
<h3>princípios básicos da contabilidade</h3>

<h2> Demonstrações contábeis </h2>
<h3>Importância das demonstrações contábeis</h3>
<h3>Formação e estrutura das demonstrações</h3>
<h3>Relatório da administração</h3>

<h2> Análise econômico-financeiro </h2>
<h3>capital de giro</h3>
<h3>Análise vertical</h3>
<h3> Análise  horizontal</h3>
<h3> Índices de rentabilidade e lucratividade</h3>

Conclusão

Ao desenvolver um documento .html lembrar sempre qual o
objetivo do documento, existem documentos que são apenas de conteúdo multimídia
e não contém a mesma estrutura, mas em sua grande maioria os documentos seguem
a mesma estrutura.