Uma das grandes novidades introduzidas pelas especificações da HTML5 são os elementos SECTION e ARTICLE. Esses dois novos elementos que representam alguns problemas semânticos relativos à sua utilização. A maioria dos desenvolvedores web se confundem com os elementos de SECTION e ARTICLE. Tentarei nesse artigo descrever a semântica desses elementos.
Elemento section
A seção (elemento SECTION ) é uma parte mais genérica de um documento. É geralmente usado para conter outras partes de sua página. Como o próprio nome diz, ele pode conter qualquer tipo de conteúdo. Em um sentido mais amplo do termo, este elemento é uma versão mais semântica de uma div (que significa “divisão”). Outro uso comum deste elemento está relacionado a estrutura do conteúdo. O objetivo desse elemento é marcar uma seção da página. Seção pode ser um grupo de conteúdo de um assunto específico.
Artigo sobre Como usar o elemento SECTION do HTML5.
Exemplo:
<section id="ch1"> <header> <hgroup> <h1>Titulo</h1> <h2>Descrição</h2> </hgroup> </header> <!--conteúdo--> <footer> <!--rodapé --> </footer></section> |
Elemento article
Ao contrário de seção, artigo é um componente mais específico. Sua finalidade é envolver os principais conteúdos do seu documento em seções lógicas. Entradas de blog, artigos, o conteúdo da página podem ser incluídos dentro deste elemento. Combinado com o elemento SECTION, que completa a estrutura geral de um documento HTML5.
Exemplo usando os dois elementos.
<section id="ch1"> <header> <hgroup> <h1>Título</h1> <h2>Descrição</h2> </hgroup> </header> <article> <!--conteúdo--> </article> <footer> <!--rodapé--> </footer></section> |
Podemos usar esses elementos da seguinte forma também:
Observe o uso do elemento hgroup que serve para agrupar os elementos de H1 a H6
<article> <hgroup> <h1>Título do artigo</h1> <h2>subtítulo do artigo</h2> </hgroup> <p>parágrafo...</p> <section> <h3>Título da primeira seção</h3> <p>Conteúdo da primeira seção</p> </section> <section> <h3>Título da segunda seção</h3> <p>Conteúdo da segunda seção</p> </section></article> |
Comentários
2 respostas para “HTML5: Diferença de section e article”
Bom artigo, estou dando uma estudada em HTML5 e me ajudou bastante. adicionado aos favoritos ^^
Gostei do artigo. O section e o article foi muito bem explicado, de forma simples e direta.