Qua 20 Jul 2011, 12:04 pm
[TUTORIAL] Como usar o elemento SECTION do HTML5
[CENTER]
Introdução:
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
Código PHP:
<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:
Código PHP:
<section class="cursos">
<h4>Cursos</h4>
<section>
<h5>Photoshop</h5>
<div>
Conteúdo...
</div>
</section>
<section>
<h5>CorelDraw</h5>
Conteúdo...
</section>
</section>
Créditos
Viva o Linux
[CENTER]
Introdução:
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
Código PHP:
<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:
Código PHP:
<section class="cursos">
<h4>Cursos</h4>
<section>
<h5>Photoshop</h5>
<div>
Conteúdo...
</div>
</section>
<section>
<h5>CorelDraw</h5>
Conteúdo...
</section>
</section>
Créditos
Viva o Linux