Rafael Casachi

HTML5: Elementos de Seccionamento de Conteúdo

HTML5: Elementos de Seccionamento de Conteúdo
01 de novembro de 2016 13:21 | 0 Comentários

O HTML5 trouxe mais semântica para a web, deixando o conteúdo ainda mais significativo. Devido a essa necessidade surgiram no HTML5 as tags de seccionamento de conteúdo, ou Sectioning Content Tags. Basicamente, são elementos que juntam agrupam outros elementos no documento. Estes elementos não possuem nenhuma representação visual, apenas demarcam áreas significativas dentro do documento.

Existem 4 elementos de seccionamento e listei elas abaixo:

 

ARTICLE

O elemento article demarca uma parte da página com conteúdo autossuficiente: post, artigo, bloco de comentário de usuários. Este conteúdo poderá ser reutilizável em FEEDs.

<article></article>

 

ASIDE

Define uma área com conteúdo adicional ou complementar (arquivos, posts, links, etc) que está ligeiramente associado ao conteúdo principal. Normalmente, usado em conteúdos de sidebars ou publicidades.

<aside></aside>

 

NAV

O elemento nav define uma área de navegação, ou seja, uma sessão da página que contém links para outras partes do website, normalmente o menu da página. Nem todos os links de uma página devem estar dentro do nav, apenas os grupos que são relevantes.

<nav></nav>

 

SECTION

O elemento section define uma nova sessão genérica no documento. Possui a semântica de que a área contém conteúdo, mas este não está especificado ou é genérico, diferentemente da tag div que apenas define um bloco qualquer na página.

<section></section>

 

MAIN

A tag main foi criada depois do lançamento do HTML5, devido a várias discussões se teria realmente necessidade desta tag. A função da tag main é definir o conteúdo principal da página, da aplicação ou do documento. O conteúdo dentro da tag main deve ser único no documento, não deve conter qualquer conteúdo que se repete nas demais páginas do website, como por exemplo sidebars, navegação, logos e cabeçalhos, informação de copyrights, rodapés ou formulários de busca.

Não deverá haver mais de uma tag main no documento e esta tag não pode ser filha dos elementos: article, aside, footer, header ou nav.

<main></main>

 

Os elementos de seccionamento de conteúdo possuem o comportamento de bloco e suportam todos os atributos globais e de evento do HTML5.

 

Gostou do post? Dúvidas, críticas ou sugestões? Deixei nos comentários. Quer continuar a acompanhar os posts? Inscreva seu e-mail para receber mais atualizações e outros conteúdos.

Não seja chato, deixe seu comentário:

Veja outros comentários:

Ninguém comentou ainda. Corra e seja o primeiro.