Movendo o blog para HTML5
Autor: Jodiel Fabricio | Publicado: 2013-02-25T10:21:00-03:00

Já que vimos alguns artigos sobre HTML5, desde o mais básico até como usá-lo corretamente, é hora de colocar em prática esse bela linguagem.

Vamos ver como passar uma página HTML comum, a uma página HTML5.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.


Tutorial
A primeira coisa que devemos fazer é declarar o DOCTYPE, como já vimos anteriormente, portanto, se seu modelo tem uma declaração deste tipo:
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html lang="pt"&gt;
&lt;head&gt;
&lt;!--.....--&gt;
Só precisamos mudá-lo para este:
&lt;!DOCTYPE html&gt;
&lt;html lang="pt"&gt;
&lt;head&gt;
&lt;!--.....--&gt;e se, não houve essa linha, basta adicioná-lo em seu modelo acima da tag html.

Pronto! Já temos o nosso blog em HTML5. Fácil? Sim, com a declaração do DOCTYPE já dissemos ao navegador que se trata de um blog que usa a linguagem HTML5.
Agora, devemos mudar algumas tags, vejamos, se temos um menu como este:
&lt;div id="menu"&gt;
&lt;ul id="menu-list"&gt;
&lt;li&gt;&lt;a href="#"&gt;#&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;#&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;#&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;#&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;Devemos atualizar tag que contém/delimita a lista, neste caso, &lt;div&gt; por &lt;nav&gt; que é a nova etiqueta para incluir links de navegação:
&lt;nav id="menu"&gt;
&lt;ul id="menu-list"&gt;
&lt;!--.....--&gt;
&lt;/ul&gt;
&lt;/nav&gt;E complementando com os roles ficaria assim:
&lt;nav id="menu" role="navigation"&gt;
&lt;ul id="menu-list"&gt;
&lt;!--.....--&gt;
&lt;/ul&gt;
&lt;/nav&gt;Desta maneira, já passamos o menu para HTML5, vejamos a header, normalmente teria algo como:
&lt;div id="header" role="banner"&gt;
&lt;div id="header-inner"&gt;
&lt;h1&gt;&lt;a id="logo" href="/"&gt;Título da página&lt;/a&gt;&lt;/h1&gt;
&lt;h2&gt;Descrição da página&lt;/h2&gt;
&lt;/div&gt;
&lt;/div&gt;Em HTML5 o código seria:
&lt;header id="header"&gt;
&lt;div id="header-inner"&gt;
&lt;hgroup role="heading"&gt;
&lt;h1&gt;&lt;a id="logo" rel="home" href="/"&gt;Título da página&lt;/a&gt;&lt;/h1&gt;
&lt;h2&gt;Descrição da página&lt;/h2&gt;
&lt;/hgroup&gt;
&lt;/div&gt;
&lt;/header&gt;Para o contentor dos artigos que normalmente é #main-wrapper:
&lt;div id="main-wrapper"&gt;
&lt;div itemscope="itemscope" ... class="post-body"&gt;
&lt;!-- ... --&gt;
&lt;/div&gt;
&lt;div itemscope="itemscope" ... class="post-body"&gt;
&lt;!-- ... --&gt;
&lt;/div&gt;
&lt;div itemscope="itemscope" ... class="post-body"&gt;
&lt;!-- ... --&gt;
&lt;/div&gt;
&lt;/div&gt;Seria algo como:
&lt;section id="main-wrapper" role="main"&gt;
&lt;article role="article" itemscope="itemscope" ... class="post-body"&gt;
&lt;!-- ... --&gt;
&lt;/article&gt;
&lt;article role="article" itemscope="itemscope" ... class="post-body"&gt;
&lt;!-- ... --&gt;
&lt;/article&gt;
&lt;article role="article" itemscope="itemscope" ... class="post-body"&gt;
&lt;!-- ... --&gt;
&lt;/article&gt;
&lt;/section&gt;O mesmo para o footer:
&lt;footer id="footer" role="contentinfo"&gt;
&lt;aside role="complementary" class="social"&gt;
&lt;!-- ... --&gt;
&lt;/aside&gt;
&lt;/footer&gt;Somente devemos alterar as tags relevantes ao blog, como as seções, artigos, cabeçalho, o footer, a sidebar, somente tem que deixar os &lt;div&gt; que nos ajudem com a apresentação do nosso blog, por exemplo:
&lt;body&gt;
&lt;style type="text/css"&gt;
#main{
border-top:1px solid #8F8F8F;
font-family:open sans;
}
/*** Estilos para centrar ***/
.inner-content{
margin:0 auto;
padding:10px;
width:80em;
}
&lt;/style&gt;
&lt;section id="main" role="content"&gt;
&lt;div class="inner-content"&gt;
&lt;!-- .... --&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/body&gt;O que faz o div? Simples, se você olhar para o estilo vai perceber, focamos o contéudo que adicionamos dentro dele, coisa que não poderíamos fazer com o &lt;section&gt;, já que precisamos que isto, ocupe toda a largura. 

code1{
font: 13px Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
background: #DFDFDF ;
padding: 3px ;
text-shadow: 1px 1px 0 white;
}
code1 {
-webkit-border-radius:3px ;
   -moz-border-radius:3px ;
        border-radius:3px ;
}
.post h8{
font: 1.8em Impact,Helvetica Neue,'Arial Black',Arial,sans-serif;
display: inline-block;
text-transform: uppercase;
color: #666;
}
.post h7 {
font: 1.4em Impact,Helvetica Neue,'Arial Black',Arial,sans-serif;
display: inline-block;
text-transform: uppercase;
color: #666;
}