foram tiros no rosto e antes, gritos.era um jovem recluso, disseram.[escutava vozes ao seu redor?]mas agora e preciso sair de casaporque temos medoporque temos culpaporque somos indiferentes ao sofrimento dos outros. sussurras desejos sem culpae euja nao sei maisquem sou ha um silenciopreso aquinele, busco refugioantes que amanhecae a certeza crua do outonoreviva a esperanca que jaz em mim o poeta desaguaonde aridaresiste a solidao Quando nao havia este atributo, para manter certas informacoes usavamos e usamos atributos comuns como title ou rel, ate mesmo criavam atributos nao reconhecidos, mas que poderiamos manipular com JavaScript.Um exemplo claro em que seria apropriado usar esse atributo sao os tooltips, que em muitos casos, utilizamos o title para armazenar o texto a ser exibido.Entao, o que e o atributo Data?, em poucas palavras ... o atributo Data permite atribuir dados personalizados a um item/elemento.Vejamos:<!-- Usando o atributo title --><a href="#" title="Texto a ser mostrado">#</a><!-- Usando atributo data do HTML5 --><a href="#" data-tooltip="Texto a ser mostrado">#</a>Como pode ver, com a chegada deste atributo podemos armazenar qualquer tipo de informacao, caso quisessemos guardar manter, por exemplo, os dados de uma faixa.<audio controls="controls"><source src="track1.mp3" type="audio/mpeg" data-tempo="95bpm" data-duracion="1:25" /></audio>Com Javascript poderiamos ordenar as faixas por sua duracao ou velocidade de tempo. Este atributo foi feito para isso, nada mais que salvar os dados, e sua sintaxe e bastante simples: os data-nome-a-utilizar, deve sempre comecaar com a palavra data e apos o traco o nome que sera usado.Uso do atributo data com CSSJa que sabemos para que e como se utiliza, podemos acessa-lo por meio de CSS, com algo tao simples como:.teste {display:inline-block;}.teste:after {content: attr(data-conteudo);}com o HTML<div class='teste' data-conteudo=' - conteudo'>Teste</div>Obteremos isto:.teste{display:inline-block;background:#449ADF;padding:.8em;}.teste:after{content:attr(data-conteudo);}Testecode1{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;} Ja que vimos alguns artigos sobre HTML5, desde o mais basico ate como usa-lo corretamente, e hora de colocar em pratica esse bela linguagem.Vamos ver como passar uma pagina HTML comum, a uma pagina HTML5.Sigam o Bloggermin no Twitter e no Google+, e curta nossa pagina no Facebook.TutorialA primeira coisa que devemos fazer e declarar o DOCTYPE, como ja vimos anteriormente, portanto, se seu modelo tem uma declaracao 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><!--.....-->So precisamos muda-lo para este:<!DOCTYPE html><html lang="pt"><head><!--.....-->e se, nao houve essa linha, basta adiciona-lo em seu modelo acima da tag html.Pronto! Ja temos o nosso blog em HTML5. Facil? Sim, com a declaracao do DOCTYPE ja 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 contem/delimita a lista, neste caso, <div> por <nav> que e a nova etiqueta para incluir links de navegacao:<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, ja 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="/">Titulo da pagina</a></h1><h2>Descricao