Como usar o elemento SECTION do HTML5

No artigo anterior falei sobre como usar o elemento NAV do HTML5. Hoje vou falar um pouco sobre o elemento SECTION.

A tag section é utilizada para marcar as seções de conteúdo de uma página. Com Esse elemento agrupamos de forma lógica nosso conteúdo, separando a informação em áreas diferentes. O principal objetivo é retirar essa responsabilidade das divs. Tendo como principal diferencial a navegação semântica com HTML 5.

Digamos que na sua página inicial você tenha três chamadas principais:
Clientes, Serviços e Notícias. Aí um ótimo lugar para você usar a tag section. Cada uma dessas chamadas podem ser um elemento de seção. A tag pode ser usada em conjunto com o H1, H2, H3, H4, H5 e H6, elementos para indicar a estrutura do documento. Ele pode conter um header e um footer se necessário.

Exemplo

<section id="rock">
  <h2>Rock </h2>
  <!-- vários elementos article podem vir aqui -->
</section>

<section id="jazz">
  <h2>Jazz </h2>
  <!-- vários elementos article podem vir aqui -->
</section>

<section id="hip-hop">
  <h2>Hip hop </h2>
  <!-- vários elementos article podem vir aqui -->
</section>

Outro ponto a salientar, é que podemos usar livremente divs para organizar nosso conteúdo dentro de um bloco marcado com o elemento section. E também podemos ter uma seção dentro da outra, veja o exemplo abaixo:

<section class="cursos">
	<h4>Cursos</h4>
		<section>
			<h5>Photoshop</h5>
			  <div>
				Conteúdo...
			  </div>
		</section>   
	<section>
    	<h5>CorelDraw</h5>
			Conteúdo...
	</section>
</section>

Se quiser me seguir no Twitter: @kadunew
Abraço e até o próximo artigo!