Como usar o elemento SECTION do HTML5

Usando 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!