Estudando o Html5

Aulas de programação para Web

Trabalhando com Tags Html5

Postado em: "2015-01-13T16:20 -03:00" - 13 de Janeiro de 2015

Curso de Html5

O HTML5 trouxe uma série de elementos que ajudam a definir setores principais no documento HTML. Com isso fica mais fácil diferenciar diretamente pelo código áreas importantes do site como sidebar, rodapé e cabeçalho. Nas versões anteriores do html a estrutura de um site não era clara para as máquinas. Não existia nenhum padrão de construção que indicasse o que é o cabeçalho e o que é o rodapé. No HTML5 houve uma mudança, passando a existir um padrão de tags, para marcar estas estruturas. Anteriormente os sites usavam algo assim:

<body>
	<div id="header">...</div>
	   <div id="menu">...</div>
	       <div class="content">...</div>
	       <div id="sidebar">...</div>
	<div id= "rodape">...</div>
</body>

O exemplo abaixo mostra como fica a substituição das Divs por elementos que deixam mais claros cada uma dessas funções.

<body>
	<header> Esse elemento define o cabeçalho</header>
	   <nav>Aqui fica o menu ou a navegação do site </nav>
	      <section>
	           <article>
	              Formulários, textos. Pode ser um comentário, um post de forum, blog, etc.
	           </article>
	      </section>
	      <aside></aside>
	<footer>Rodapé do elemento ou do layout</footer>
</body>

O elemento header

<header id=”header”>, pode marcar o cabeçalho do template. Isto é, a parte que se mantém fixa mesmo com a mudança de páginas. Geralmente, a área que contém o logotipo e a navegação principal do site. Pode conter ainda alguns outros elementos <header> que marquem o cabeçalho do conteúdo. Exemplo: A listagem de posts de um blog. Cada post possui uma data, um título, autor, categoria em que foi publicado. Estas são informações de cabeçalho daquele post. Nesse caso pode-se ter várias tags header no documento.
Obs: Não é permitido uma tag header dentro de outra.

Tag Section
(Definição e Uso)

A tag section é utilizada para marcar as seções de conteúdo de uma página. Esse elemento serve para organizar de forma lógica o conteúdo, separando a informação em áreas diferentes tirando essa responsabilidade das divs. Tendo como principal diferencial a navegação semântica com HTML 5. Ou seja, qualquer elemento pode ter seu conteúdo separado por seções com o elemento section. Os elementos podem ter também um header e um footer independentes do resto do layout.

Tag Article
(Definição e Uso)

O <article> é uma tag especifica de conteúdo independente e auto-suficiente. O article indica que em um determinado bloco existe um conteúdo importante. Um artigo deve fazer sentido por si só e deve ser distribuido, como já foi dito, de forma independente. Isto significa que podemos ter vários elementos article num mesmo documento. Ou seja, utilize-o sempre que a informação e conteúdo fizerem sentido se visto fora do site; como em leitores de RSS ou outros meios. Mesmo sem os atributos IDs, dá para perceber que header#content-header pertence ao article #content, pois é filho deste elemento. Com a melhoria na semântica, os meios de acesso (robôs de busca), tem o seu trabalho facilitado.

Fontes potenciais para o elemento <article>


Tag Aside
(Definição e Uso)

Bloco de conteúdo que referencia o conteúdo em volta dele e pode ser representado por conteúdos em sidebars, textos impressos, busca, publicidade ou para criar um grupo de elementos nav e outras informações separados do conteúdo principal do site.

Tag Footer

A tag footer define o rodapé de um documento ou seção. O elemento footer tipicamente contém:

Estrutura Semantica do HTML5 (Vídeo - 25min)
Footer (w3schools)
Html5
Estrutura Semantica