Novos elementos de estrutura e semântica – A ORGANIZAÇÃO

Novos elementos foram introduzidos no HTML 5, todos com a finalidade de facilitar a compreenção e manutenção do código, ou seja, estamos tão acostumados a ter liberdade para usar e abusar de DIVS em qualquer lugar desenfreadamente que muitas vezes acabamos por ficar presos a uma metodologia desorganizadas, onde cada site é produzido sem existir um padrão de organização genérico.

O HTML 5 vem propor uma Organização do código, que penso que seja muito importante.
Actualmente não existe nenhum padrão de construção dos elementos para indicar o que é o cabeçalho e o que é o rodapé, por exemplo.

No entanto com o HTML 5, irá existir uma forma de utilizar um padrão de tags que nos ajudará a marcar este tipo de estruturas. Uma estrutura já nossa conhecida seria assim:

Na estrutura em cima, foram utilizados nomes de classes que costumamos utilizar no dia a dia. No entanto, o HTML 5 irá acabar com esta estrutura. A ideia é substituir este amontoado de DIVS por elementos que se encarreguem dessas funções, um exemplo de uma estrutura em HTML 5 seria:

Existem assim diferentes elementos de estrutura quando estamos a produzir uma página em HTML 5. Os principais elementos de estrutura são:

html - representa a root de uma página em html
head - representa a colecção das metatags de uma página
header - elemento que define o cabeçalho da página ou de uma secção (não confundir com a tag head );
section - define a secção do layout num determinado element. Este pode conter um header e também um footer;
article - define uma parte da página que tem uma composição de formulários, textos, etc... ou seja, é um item do conteúdo dentro da página ou da secção;
footer - o rodapé da página ou de uma secção/elemento;
nav - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;

aside - consiste em envolver informações que têm algo a ver com o conteúdo principal do site. Pode ser um menu lateral, um sidebar padrão com menu, banner, search, etc..., ou seja, é um conteúdo relacionado ao artigo.

Neste imagem conseguem perceber um pouco melhor a estrutura:

Com o HTML 5 qualquer elemento pode ter o seu conteúdo separado por secções com o elemento section.

Outra coisa interessante é que agora todos os elementos podem ter também um header a um footer independentes do resto do layout. Como podemos verificar na imagem em cima, em que temos um header e footer para a secção e para a página em si.

Um duvida que surge com este tipo de estrutura é como é que se fará agora a distribuição das tags H1, H2, H3....H6 (títulos), pois se utilizo a tag H1 no logo da site, não poderei utilizá-la no título do artigo, porque se repetirmos muitas vezes as mesmas tags de títulos, a importancia que cada título tem sobre o outro irá perder-se, e o Google não irá indexar bem os títulos do site.

Com o HTML 5 este problema fica resolvido, porque para cada section que se inicia, é possivel começar novamente uma nova ordem de títulos. Por exemplo:

Como se pode verificar, assim é possivel definir exactamente qual a importancia de cada título, sendo também possivel que outras aplicações como a indexação do Google, façam uma separação mais eficaz dos elementos textuais.

Uma coisa muito importante, é que as DIVS não vão deixar de existir, serviram para casos muitos expecificos como para fazer caixas, que era para o que já as utilizavamos: