Passando o nosso blog para linguagem HTML5
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:
Só precisamos mudá-lo para este:
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:
<div> por <nav> que é a nova etiqueta para incluir links de navegação:
#main-wrapper :
<div> que nos ajudem com a apresentação do nosso blog, por exemplo:
<section> , já que precisamos que isto, ocupe toda a largura.
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.
A primeira coisa que devemos fazer é declarar o DOCTYPE, como já vimos anteriormente, portanto, se seu modelo tem uma declaração deste tipo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pt">
<head>
<!--.....-->
Só precisamos mudá-lo para este:
<!DOCTYPE html>e se, não houve essa linha, basta adicioná-lo em seu modelo acima da tag
<html lang="pt">
<head>
<!--.....-->
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:
<div id="menu">Devemos atualizar tag que contém/delimita a lista, neste caso,
<ul id="menu-list">
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</div>
<nav id="menu">E complementando com os roles ficaria assim:
<ul id="menu-list">
<!--.....-->
</ul>
</nav>
<nav id="menu" role="navigation">Desta maneira, já passamos o menu para HTML5, vejamos a header, normalmente teria algo como:
<ul id="menu-list">
<!--.....-->
</ul>
</nav>
<div id="header" role="banner">Em HTML5 o código seria:
<div id="header-inner">
<h1><a id="logo" href="/">Título da página</a></h1>
<h2>Descrição da página</h2>
</div>
</div>
<header id="header">Para o contentor dos artigos que normalmente é
<div id="header-inner">
<hgroup role="heading">
<h1><a id="logo" rel="home" href="/">Título da página</a></h1>
<h2>Descrição da página</h2>
</hgroup>
</div>
</header>
<div id="main-wrapper">Seria algo como:
<div itemscope="itemscope" ... class="post-body">
<!-- ... -->
</div>
<div itemscope="itemscope" ... class="post-body">
<!-- ... -->
</div>
<div itemscope="itemscope" ... class="post-body">
<!-- ... -->
</div>
</div>
<section id="main-wrapper" role="main">O mesmo para o footer:
<article role="article" itemscope="itemscope" ... class="post-body">
<!-- ... -->
</article>
<article role="article" itemscope="itemscope" ... class="post-body">
<!-- ... -->
</article>
<article role="article" itemscope="itemscope" ... class="post-body">
<!-- ... -->
</article>
</section>
<footer id="footer" role="contentinfo">Somente devemos alterar as tags relevantes ao blog, como as seções, artigos, cabeçalho, o footer, a sidebar, somente tem que deixar os
<aside role="complementary" class="social">
<!-- ... -->
</aside>
</footer>
<body>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
<style type="text/css">
#main{
border-top:1px solid #8F8F8F;
font-family:open sans;
}
/*** Estilos para centrar ***/
.inner-content{
margin:0 auto;
padding:10px;
width:80em;
}
</style>
<section id="main" role="content">
<div class="inner-content">
<!-- .... -->
</div>
</section>
</body>
COMENTÁRIOS