ESTRUTURA DE LAYOUT HTML5
Autor: Adriano Fialho | Publicado: 2012-09-28T07:44:00-07:00


&nbsp;

Estrutura de layout HTML5

O HTML5 teve mudanças consideráveis em sua estrutura, novas tags foram inseridas melhorando muito a semântica das páginas, facilitando a compreensão, acessibilidade e a manutenção 
      do código.&nbsp;

Esse tutorial vai tratar das mudanças estruturais da página, principalmente da evolução do elemento &lt;div&gt; para &lt;nav&gt;, &lt;section&gt;, &lt;article&gt;, &lt;aside&gt;, &lt;header&gt; e &lt;footer&gt;.



Exemplo das mudanças:&nbsp;



XHTML

&lt;body&gt;
  &nbsp;
&nbsp;&nbsp;&nbsp; &lt;div id="header"&gt;...&lt;/div&gt;
   &nbsp;
&nbsp;&nbsp;&nbsp; &lt;div id="menu"&gt;...&lt;/div&gt;
   &nbsp;
&nbsp;&nbsp;&nbsp; &lt;div class="post"&gt;...&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="content"&gt;...&lt;/div&gt; 
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
   &nbsp;
&nbsp;&nbsp;&nbsp; &lt;div id="sidebar"&gt;...&lt;/div&gt;
   &nbsp;
&nbsp;&nbsp;&nbsp; &lt;div id="rodape"&gt;...&lt;/div&gt;
  &nbsp;
&lt;/body&gt;



HTML5

&lt;body&gt;&nbsp;
&nbsp;&nbsp;&nbsp; &lt;header&gt;...&lt;/header&gt;
  &nbsp;
&nbsp;&nbsp;&nbsp; &lt;nav&gt;...&lt;/nav&gt;
  &nbsp;
&nbsp;&nbsp;&nbsp; &lt;article&gt;
    &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;section&gt;
      ...
    &lt;/section&gt;&nbsp;
&nbsp;&nbsp;&nbsp; &lt;/article&gt;&nbsp;
&nbsp; &nbsp; &lt;aside&gt;...&lt;/aside&gt;&nbsp;
&nbsp; &nbsp; &lt;footer&gt;...&lt;/footer&gt;
&nbsp;
&lt;/body&gt;





Elementos de estrutura:

&lt;header&gt; - cabeçalho da página ou de uma 
      seção (não confundir com a tag &lt;head&gt;);

&lt;section&gt; - cada seção do conteúdo;

&lt;article&gt; - um item do conteúdo dentro da página 
      ou da seção;

&lt;footer&gt; - o rodapé da página ou de uma 
      seção;

&lt;nav&gt; - o conjunto de links que formam a navegação, 
      seja o menu principal do site ou links relacionados ao conteúdo da 
      página;

&lt;aside&gt; - conteúdo relacionado ao artigo (como 
      arquivos e posts relacionados em um blog, por exemplo).






&nbsp;




Note que qualquer elemento pode ter seu conteúdo separado por seções com o elemento&nbsp;

section. Os elementos podem ter também um header e um footer independentes do&nbsp;

resto do layout. Como na imagem. 







Exemplo de páginas HTML5:




&nbsp;index.html


&lt;!DOCTYPE HTML&gt;
&lt;html lang="pt-br"&gt;
&nbsp;&nbsp;&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;title&gt;HTML 5&lt;/title&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;link rel="stylesheet" href="style.css" /&gt;
&nbsp;&nbsp;&nbsp; &lt;/head&gt;
&nbsp;&nbsp;&nbsp; &lt;header&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h1&gt;Exemplo HTML 5&lt;/h1&gt;
&nbsp;&nbsp;&nbsp; &lt;/header&gt;
&nbsp;&nbsp;&nbsp; &lt;nav&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp; &lt;/nav&gt;
&nbsp;&nbsp;&nbsp; &lt;div id="corpo"&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div id="box"&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;header&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;h2&gt;Título&lt;/h2&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/header&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;article class="bpage"&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;p&gt;Lorem ipsum .......&lt;/p&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;p&gt;Lorem ipsum .......&lt;/p&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/article&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/section&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;aside&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/section&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 6&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 7&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 8&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/section&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 9&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 10&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 11&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Link 12&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/section&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/aside&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;footer&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;section&gt;Empresa &lt;/section&gt;
&nbsp;&nbsp;&nbsp; &lt;/footer&gt;
&lt;/html&gt;&nbsp;




style.css

* {


&nbsp;&nbsp; margin:0;


&nbsp;&nbsp; padding:0;


}


body{


&nbsp;&nbsp; margin:0 auto;


&nbsp;&nbsp; width:960px;


&nbsp;&nbsp; font-family:Arial, Helvetica, sans-serif;


}




a {color:#000000; text-shadow:1px 1px 1px #cccccc;}


p {text-align:justify;}


header, footer, aside, section {display:block;}


h1 {


&nbsp;&nbsp;&nbsp; font-size:26px;


&nbsp;&nbsp;&nbsp; line-height:40px;


&nbsp;&nbsp;&nbsp; padding:18px 0;


}


nav {


&nbsp;&nbsp;&nbsp; width:70%;


&nbsp;&nbsp;&nbsp; height:40px;


&nbsp;&nbsp;&nbsp; -moz-border-radius:10px;


&nbsp;&nbsp;&nbsp; -webkit-border-radius:10px;


&nbsp;&nbsp;&nbsp; background:#f3f3f3;


&nbsp;&nbsp;&nbsp; border:1px solid #cccccc;


&nbsp;&nbsp;&nbsp; position:absolute;


}


nav ul {


&nbsp;&nbsp;&nbsp; list-style-image:none;


&nbsp;&nbsp;&nbsp; list-style-type:none;


&nbsp;&nbsp;&nbsp; margin:0 auto;


&nbsp;&nbsp;&nbsp; width:940px;


}


nav ul li {


&nbsp;&nbsp;&nbsp; float:left;


}


nav ul li a{


&nbsp;&nbsp;&nbsp; margin-right:20px;


&nbsp;&nbsp;&nbsp; display:block;


&nbsp;&nbsp;&nbsp; line-height:40px;


}


#corpo {


&nbsp;&nbsp;&nbsp; display:table;


&nbsp;&nbsp;&nbsp; margin-top:40px;


}


#box {


&nbsp;&nbsp;&nbsp; display:table-cell;


&nbsp;&nbsp;&nbsp; padding:22px;


&nbsp;&nbsp;&nbsp; width:620px;


}


aside {


&nbsp;&nbsp;&nbsp; display:table-cell;


&nbsp;&nbsp;&nbsp; width:280px;


&nbsp;&nbsp;&nbsp; background:#f3f3f3;


}


.bpage div {


&nbsp;&nbsp;&nbsp; -webkit-column-count:2;


&nbsp;&nbsp;&nbsp; -moz-column-count:2;


&nbsp;&nbsp;&nbsp; -moz-column-gap:22px;


&nbsp;&nbsp;&nbsp; -webkit-coulmn-gap:22px;


}


aside section {


&nbsp;&nbsp;&nbsp; -moz-border-radius:11px;


&nbsp;&nbsp;&nbsp; -webkit-border-radius:11px;


&nbsp;&nbsp;&nbsp; background:#e0e0e0;


&nbsp;&nbsp;&nbsp; margin:22px 0 0 22px;


&nbsp;&nbsp;&nbsp; padding:11px 22px;


&nbsp;&nbsp;&nbsp; width:70%;


}


footer{


&nbsp;&nbsp;&nbsp; background:#CCC;


&nbsp;&nbsp;&nbsp; padding:10px;


&nbsp;&nbsp;&nbsp; -moz-border-radius:10px;


&nbsp;&nbsp;&nbsp; -webkit-border-radius:10px;


&nbsp;&nbsp;&nbsp; text-align:center;


&nbsp;&nbsp;&nbsp; color:#ffffff;


}