Movendo o blog para HTML5

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.

logo HTML5

Tutorial

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>
<html lang="pt">
<head>
<!--.....-->
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:
<div id="menu">
<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>
Devemos atualizar tag que contém/delimita a lista, neste caso, <div> por <nav> que é a nova etiqueta para incluir links de navegação:
<nav id="menu">
<ul id="menu-list">
<!--.....-->
</ul>
</nav>
E complementando com os roles ficaria assim:
<nav id="menu" role="navigation">
<ul id="menu-list">
<!--.....-->
</ul>
</nav>
Desta maneira, já passamos o menu para HTML5, vejamos a header, normalmente teria algo como:
<div id="header" role="banner">
<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>
Em HTML5 o código seria:
<header id="header">
<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>
Para o contentor dos artigos que normalmente é #main-wrapper:
<div id="main-wrapper">
<div itemscope="itemscope" ... class="post-body">
<!-- ... -->
</div>
<div itemscope="itemscope" ... class="post-body">
<!-- ... -->
</div>
<div itemscope="itemscope" ... class="post-body">
<!-- ... -->
</div>
</div>
Seria algo como:
<section id="main-wrapper" role="main">
<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>
O mesmo para o footer:
<footer id="footer" role="contentinfo">
<aside role="complementary" class="social">
<!-- ... -->
</aside>
</footer>
Somente devemos alterar as tags relevantes ao blog, como as seções, artigos, cabeçalho, o footer, a sidebar, somente tem que deixar os <div> que nos ajudem com a apresentação do nosso blog, por exemplo:
<body>
<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>
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 <section>, já que precisamos que isto, ocupe toda a largura.

COMENTÁRIOS

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Movendo o blog para HTML5
Movendo o blog para HTML5
Passando o nosso blog para linguagem HTML5
http://4.bp.blogspot.com/-YBLH1XVeikg/UQ8c66e8ehI/AAAAAAAAAvc/uhbPL9qTjIk/s1600/HTML5_Logo_256.png
http://4.bp.blogspot.com/-YBLH1XVeikg/UQ8c66e8ehI/AAAAAAAAAvc/uhbPL9qTjIk/s72-c/HTML5_Logo_256.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2013/02/movendo-o-blog-para-html5.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2013/02/movendo-o-blog-para-html5.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar