Introdução
Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language) ficou estacionado na versão 4. De lá pra cá, a W3C esteve focada em linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics - o uso de gráficos vetoriais em navegadores). Enquanto isso, os navegadores estiveram preocupados em desenvolver suas funcionalidades, como exibir páginas em abas e oferecer a integração com leitores de RSS. Porém, recentemente organizações como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar nele novas funcionalidades.
Neste artigo veremos as novidades que o HTML 5 traz. Para quem está se familiarizando agora com o HTML, sem preocupações: os elementos tradicionais continuam os mesmos, já que o HTML 5 foi desenvolvido pensando também em todos os usuários que não utilizam os navegadores mais recentes do mercado.
Novos elementos
Vários novos elementos foram introduzidos no HTML 5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento
com foco na semântica; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais elementos dessa nova versão são:
Elementos de estrutura
- cabeçalho da página ou de uma seção (não confundir com a tag ); - cada seção do conteúdo; - um item do conteúdo dentro da página ou da seção; - o rodapé da página ou de uma seção; - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página; - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo). - usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe:Figura 1. Esquema de uma página em HTML 5 - através de uma API gráfica, irá renderizar imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc; e - usados para streaming (transmissão pela internet) de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje com as imagens: - junto com as tags e será usado para formatar um diálogo: Michael, you never told me your family knew Johnny Fontane! Oh sure, you want to meet him? Yeah! You know, my father helped Johnny in his career. Really? How? ...Let's listen to this song. - representa data e/ou hora; - usada para representar medidas, que podem ser de distância, de armazenagem em disco, etc., , , , , e . Outros foram retirados porque afetam negativamente a acessibilidade do site: e <![CDATA[.<br />
<br />
Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos <strong> e <em>, respectivamente.<br />
<br />
Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são:<br />
<br />
* target no elemento <a>;<br />
* align nos elementos <table>e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros;
* background em <body>;
* bgcolor nos elementos de tabela e no <body>;
* border em <table>e <object>;
* cellpadding e cellspacing em <table>;
* height em <td> e <th>;<br />
* width nos elementos <hr>, <table>, <td>, <th> e <pre>;
* hspace e vspace em <img> e <object>;
* noshade e size em <hr>.
Doctype
Com o HTML 5 usaremos apenas uma declaração doctype:
<!--DOCTYPE html-->
Além de única, ela é curta e fácil de lembrar - hoje em dia praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML.
Transição do XHTML
A semelhança entre o HTML 5 e seus antecessores, HTML 4.01 e XHTML 1.0, é muito grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos elementos deixarão o processo mais simples.
A sintaxe dos elementos é como no HTML 4.01, que não exigia que elementos como <img> e <input> fossem "fechados":
<input type="text" id="nome">
Porém, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita:
<input type="text" id="nome" />
<br />
<br />
É hora de usar o HTML 5?<br />
<br />
Essa pergunta ainda gera um extenso debate entre os desenvolvedores. Há quem diga que, como a maioria dos navegadores usados hoje em dia ainda não tem suporte a HTML 5, e nem todas as novas tags estão completamente definidas, ainda não é hora de gastar energia e tempo desenvolvendo um site para os navegadores mais recentes para depois ter que "corrigir" o código pensando nos navegadores antigos. Além disso, a própria W3C admite que as especificações atuais ainda não são definitivas e podem sofrer revisões.<br />
<br />
Por outro lado, algumas pessoas defendem que toda tecnologia nova deve ser colocada em prática para evoluir, encontrar erros e estabelecer melhorias. A resistência sempre vai existir, como aconteceu com os padrões web: ainda hoje muita gente utiliza tabelas para estruturar os layouts como se estivéssemos nos anos 1990, apesar do extenso material sobre layouts tableless disponível.<br />
<br />
De qualquer maneira, o jeito mais fácil de se tomar a decisão de migrar ou não para o HTML 5 é estudando o público alvo do site para saber quais os navegadores mais utilizados por ele, e pensar se o tempo gasto com a correção para navegadores antigos vai valer a pena. Talvez seja mais interessante, por exemplo, redesenhar seu blog pessoal em HTML 5, mas manter o portfolio em XHTML. Cada caso é um caso, e planejamento, como em qualquer projeto, é essencial.<br />
<br />
Decididamente o HTML 5 inaugura uma nova era no desenvolvimento de páginas para a internet, onde a mobilidade do usuário é a palavra chave. Mudanças foram implementadas a partir das necessidades dos desenvolvedores, baseadas em erros e acertos. A partir de agora teremos em breve aplicações web mais ricas e com maior integração entre conteúdo on-line e off-line.<br />
<br />
Para informações técnicas mais detalhadas sobre o HTML 5, consulte a documentação oficial do W3C e a listagem de diferenças entre o HTML 5 e sua versão anterior.
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Postado por
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/09088973575029545675' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/09088973575029545675' rel='author' title='author profile'>
<span itemprop='name'>Mailson Leal</span>
</a>
</span>
</span>
<span class='post-timestamp'>
às
<meta content='http://mailsonleal.blogspot.com/2010/08/html-5.html' itemprop='url'/>
<a class='timestamp-link' href='http://mailsonleal.blogspot.com/2010/08/html-5.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2010-08-27T14:08:00-07:00'>14:08</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-145114212'>
<a href='https://www.blogger.com/post-edit.g?blogID=8855841513296390462&postID=4272001311322577519&from=pencil' title='Editar postagem'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=8855841513296390462&postID=4272001311322577519&target=email' target='_blank' title='Enviar por e-mail'><span class='share-button-link-text'>Enviar por e-mail</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=8855841513296390462&postID=4272001311322577519&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='Postar no blog!'><span class='share-button-link-text'>Postar no blog!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=8855841513296390462&postID=4272001311322577519&target=twitter' target='_blank' title='Compartilhar no X'><span class='share-button-link-text'>Compartilhar no X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=8855841513296390462&postID=4272001311322577519&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Compartilhar no Facebook'><span class='share-button-link-text'>Compartilhar no Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=8855841513296390462&postID=4272001311322577519&target=pinterest' target='_blank' title='Compartilhar com o Pinterest'><span class='share-button-link-text'>Compartilhar com o Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>Nenhum comentário:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>Postar um comentário</h4>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/8855841513296390462?po=4272001311322577519&hl=pt-BR&saa=85391&origin=http://mailsonleal.blogspot.com' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/1167892209-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</p>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='http://mailsonleal.blogspot.com/2010/08/taxi-simples.html' id='Blog1_blog-pager-newer-link' title='Postagem mais recente'>Postagem mais recente</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='http://mailsonleal.blogspot.com/2010/08/php-pattern-day-sucess.html' id='Blog1_blog-pager-older-link' title='Postagem mais antiga'>Postagem mais antiga</a>
</span>
<a class='home-link' href='http://mailsonleal.blogspot.com/'>Página inicial</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Assinar:
<a class='feed-link' href='http://mailsonleal.blogspot.com/feeds/4272001311322577519/comments/default' target='_blank' type='application/atom+xml'>Postar comentários (Atom)</a>
</div>
</div>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<div class='sidebar section' id='sidebar-right-1'><div class='widget Followers' data-version='1' id='Followers1'>
<h2 class='title'>Seguidores</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
window.followersIframe = null;
function followersIframeOpen(url) {
gapi.load("gapi.iframes", function() {
if (gapi.iframes && gapi.iframes.getContext) {
window.followersIframe = gapi.iframes.getContext().openChild({
url: url,
where: document.getElementById("followers-iframe-container"),
messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
messageHandlers: {
'_ready': function(obj) {
window.followersIframe.getIframeEl().height = obj.height;
},
'reset': function() {
window.followersIframe.close();
followersIframeOpen("https://www.blogger.com/followers/frame/8855841513296390462?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByNmZmZmZmYiByM4ODg4ODgqByMwMDAwMDAyByNmZmZmZmY6ByNmZmZmZmZCByM4ODg4ODhKByM2NjY2NjZSByM4ODg4ODhaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3dpt-BR\x26origin\x3dhttp://mailsonleal.blogspot.com");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers/frame/8855841513296390462?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByNmZmZmZmYiByM4ODg4ODgqByMwMDAwMDAyByNmZmZmZmY6ByNmZmZmZmZCByM4ODg4ODhKByM2NjY2NjZSByM4ODg4ODhaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3dpt-BR\x26origin\x3dhttp://mailsonleal.blogspot.com");
</script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Arquivo do blog</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼ 
</span>
</a>
<a class='post-count-link' href='http://mailsonleal.blogspot.com/2010/'>
2010
</a>
<span class='post-count' dir='ltr'>(39)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
► 
</span>
</a>
<a class='post-count-link' href='http://mailsonleal.blogspot.com/2010/11/'>
novembro
</a>
<span class='post-count' dir='ltr'>(5)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
► 
</span>
</a>
<a class='post-count-link' href='http://mailsonleal.blogspot.com/2010/10/'>
outubro
</a>
<span class='post-count' dir='ltr'>(19)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
► 
</span>
</a>
<a class='post-count-link' href='http://mailsonleal.blogspot.com/2010/09/'>
setembro
</a>
<span class='post-count' dir='ltr'>(4)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼ 
</span>
</a>
<a class='post-count-link' href='http://mailsonleal.blogspot.com/2010/08/'>
agosto
</a>
<span class='post-count' dir='ltr'>(11)</span>
<ul class='posts'>
<li><a href='http://mailsonleal.blogspot.com/2010/08/latinoware-2010-chamada-de-trabalhos.html'>LatinoWare 2010 – Chamada de trabalhos para o COLAPHP</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/taxi-simples.html'>Taxi Simples</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/html-5.html'>HTML 5</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/php-pattern-day-sucess.html'>PHP Pattern Day Sucess !</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/php-pattern-day.html'>PHP PATTERN DAY !</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/quer-aprender-oracle.html'>Quer aprender Oracle ?</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/efeitos-basicos-com-jquery.html'>Efeitos básicos com JQuery</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/certificacao-zend.html'>Certificação ZEND</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/ii-php-pattern-day.html'>II PHP PATTERN DAY !!!!</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/icones-para-sua-aplicacao.html'>Icones para sua aplicação</a></li>
<li><a href='http://mailsonleal.blogspot.com/2010/08/ferramentas-para-desenvolvedores-web.html'>Ferramentas Para desenvolvedores web</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>Quem sou eu</h2>
<div class='widget-content'>
<a href='https://www.blogger.com/profile/09088973575029545675'><img alt='Minha foto' class='profile-img' height='80' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgltDjODlE7FjKVWIbtm54YrEA6Otyzw25qEQPQWdauFBu5ftS4v0Dcs9__NvpXoww_wx35ePyF5p2jYnkxM96zwRgVrclNJwdyTcouUjev3tKo6W6iWwPeGHT2l0FZdg/s220/DSC01420.JPG' width='60'/></a>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/09088973575029545675' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
Mailson Leal
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/09088973575029545675' rel='author'>Ver meu perfil completo</a>
<div class='clear'></div>
</div>
</div></div>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot no-items section' id='footer-1'></div>
<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
<tbody>
<tr>
<td class='first columns-cell'>
<div class='foot no-items section' id='footer-2-1'></div>
</td>
<td class='columns-cell'>
<div class='foot no-items section' id='footer-2-2'></div>
</td>
</tr>
</tbody>
</table>
<!-- outside of the include in order to lock Attribution widget -->
<div class='foot section' id='footer-3' name='Rodapé'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Tema Espetacular Ltda.. Tecnologia do <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3000588928-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7rdGjQ4zKyIIYc1vWz8seEHGAjzQ:1752736863725';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8855841513296390462','//mailsonleal.blogspot.com/2010/08/html-5.html','8855841513296390462');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8855841513296390462', 'title': '.', 'url': 'http://mailsonleal.blogspot.com/2010/08/html-5.html', 'canonicalUrl': 'http://mailsonleal.blogspot.com/2010/08/html-5.html', 'homepageUrl': 'http://mailsonleal.blogspot.com/', 'searchUrl': 'http://mailsonleal.blogspot.com/search', 'canonicalHomepageUrl': 'http://mailsonleal.blogspot.com/', 'blogspotFaviconUrl': 'http://mailsonleal.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'pt-BR', 'localeUnderscoreDelimited': 'pt_br', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22. - Atom\x22 href\x3d\x22http://mailsonleal.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22. - RSS\x22 href\x3d\x22http://mailsonleal.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22. - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8855841513296390462/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22. - Atom\x22 href\x3d\x22http://mailsonleal.blogspot.com/feeds/4272001311322577519/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/923dbacbbd81e7c1', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Gerar link', 'key': 'link', 'shareMessage': 'Gerar link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartilhar no Facebook', 'target': 'facebook'}, {'name': 'Postar no blog!', 'key': 'blogThis', 'shareMessage': 'Postar no blog!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Compartilhar no X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartilhar no Pinterest', 'target': 'pinterest'}, {'name': 'E-mail', 'key': 'email', 'shareMessage': 'E-mail', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27pt_BR\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Leia mais', 'pageType': 'item', 'postId': '4272001311322577519', 'postImageUrl': 'html5.png', 'pageName': 'HTML 5', 'pageTitle': '.: HTML 5'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Editar', 'linkCopiedToClipboard': 'Link copiado para a \xe1rea de transfer\xeancia.', 'ok': 'Ok', 'postLink': 'Link da postagem'}}, {'name': 'template', 'data': {'name': 'Awesome Inc.', 'localizedName': 'Espetacular Ltda.', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false, 'variant': 'dark', 'variantId': 'dark'}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'HTML 5', 'description': 'Introdu\xe7\xe3o Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language) ficou estacionado na vers\xe3o 4. De l\xe1 pra c\xe1, a W3C ...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t_6l8rKjunLxQQ9kyVXxEnACNEtoWiachkphiCTM-FAi7q8zXH31WT0k0goEwLRdg', 'url': 'http://mailsonleal.blogspot.com/2010/08/html-5.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 4272001311322577519}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2660622230-lbx__pt_br.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'sidebar-right-1', document.getElementById('Followers1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Carregando\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar-right-1', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull'));
</script>
</body>
</html>]]>