<p>O HTML5 vem para ser a atualização da linguagem HTML. Ela cria várias novas tags na linguagem para que o CSS e o Javascript fazerem melhor seu trabalho sem precisar da instalação de vários plugin, compromentendo o desempenho, e trazer mais semântica ao código HTML. </p>
<p>Embora o padrão não esteja terminado e plenamente suportado, podemos começar a utilizar alguns de seus recursos já que ele esta sendo disponibilizados em módulos. Uma das mudanças que já podemos utilizar é a estrutura da página, que foram criadas tags novas para representar semanticamente a estrutura da página.</p>
<p>Antigamente(HTML4/XHTML) utilizávamos a seguinte estrutura:</p>
<div style="text-align: center;">
<a href="http://www.botecodigital.info/wp-content/uploads/2012/01/structure-div.png" title="structure-div" class="cboxModal"><img class="aligncenter size-medium wp-image-1971" title="structure-div" src="http://www.botecodigital.info/wp-content/uploads/2012/01/structure-div.png" alt="" /></a>
</div>
<p>Para deixar mais semântica a estrutura da página foram adicionadas as tags: <strong>section</strong> , <strong>article</strong>, <strong>aside</strong> e <strong>nav</strong>, <strong>header</strong> e <strong>footer</strong>.</p>
<div style="text-align: center;">
<a href="http://www.botecodigital.info/wp-content/uploads/2012/01/structure-html5.png" title="structure-html5" class="cboxModal"><img class="aligncenter size-medium wp-image-1972" title="structure-html5" src="http://www.botecodigital.info/wp-content/uploads/2012/01/structure-html5.png" alt="" /></a>
</div>
<p>Utilizando estas nova tags podemos criar a seguinte estrutura:</p>
<pre class="brush: xml; title: ; notranslate">
<!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Exemplo de estrutura de site em HTML5&lt;/title&gt;
&lt;meta charset="utf-8"&gt;
&lt;link rel="stylesheet" href="estilo.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="site"&gt;
&lt;header id="topo"&gt;
&lt;h1&gt;Titulo do site&lt;/h1&gt;
&lt;/header&gt;
&lt;nav id="menu"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;section id="conteudo"&gt;
&lt;header&gt;
&lt;h2&gt;Titulo do artigo&lt;/h2&gt;
&lt;small&gt;12/12/2012&lt;/small&gt;
&lt;/header&gt;
&lt;article&gt;
&lt;/article&gt;
&lt;footer&gt;
Por Fulano
&lt;/footer&gt;
&lt;/section&gt;
&lt;aside&gt;
&lt;/aside&gt;
&lt;footer&gt;
&lt;a href="http://www.botecodigital.info"&gt;Boteco Digital&lt;/a&gt;
&lt;/footer&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><a href="http://www.botecodigital.info/exemplos/estruturahtml5/" target="_blank">Veja o exemplo</a></p>
<p>Para começar o <strong>DOCTYPE</strong> foi bastante simplificado, bem como a <strong>metatag charset</strong>. Eu particularmente agradeço já que nunca consegui decorá-las, sempre tive que abrir um arquivo e copiar.</p>
<p>Vamos a uma breve descrição das novas tags.</p>
<h4>section</h4>
<p>A tag <em>section</em> define uma nova seção do site, uma área genérica do site. Por exemplo a home pode ser dividida em destaque, novidades, chamada para conteúdo completo.</p>
<h4>header</h4>
<p>O elemento <em>header</em> representa uma área de introdução. Pode ser utilizado para agrupar índices de conteúdo, campos de busca, cabeçalho do site com titulo ou logo.</p>
<h4>footer</h4>
<p>A tag <em>footer</em> representa o rodapé do site, ou de uma seção.</p>
<h4>nav</h4>
<p>O elemento <em>nav</em> é utilizado para representar uma seção da página que contém links para outras partes do site. Este elemento deve ser utilizado para grupos de links importantes do site tipicamente menus de navegação.</p>
<h4>article</h4>
<p>O elemento <em>article</em> é utilizado para representar o conteúdo do site propriamente dito, como posts, artigos e outros textos em geral.</p>
<h4>aside</h4>
<p>A tag <em>aside</em> representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside.</p>
<p>Porém vários navegadores, principalmente os mais antigos, não reconhecem devidamente as novas marcações. Para mantermos a compatibilidade é necessário estilizar algumas tags usando a seguinte regra CSS.</p>
<pre class="brush: css; title: ; notranslate">
header , footer , article , aside , nav , section {display:block}
</pre>
<p>Para verificar o suporte a HTML5 e CSS3 podemos utilizar a Modernizr (<a href="http://www.modernizr.com/" target="_blank">http://www.modernizr.com/</a>) que é uma biblioteca de detectação que lhe permite verificar o suporte da maioria das características do HTML5 e CSS3. O Modernizr roda automaticamente assim que você o adiciona no head do documento fazendo funcionar as novas tags em navegadores mais antigos(IE8). </p>
<div><h4>Posts Relacionados:</h4><ul><li><a href="http://www.botecodigital.info/web/construindo-uma-galeria-de-fotos-com-o-plugin-prettyphoto-do-jquery/"><img title="Construindo uma Galeria de Fotos com o plugin PrettyPhoto do JQuery" class="crp_thumb wp-post-image" src="http://www.botecodigital.info/wp-content/uploads/2010/05/jquery.png" height="50" alt="Construindo uma Galeria de Fotos com o plugin PrettyPhoto do JQuery" width="50" /></a> <a href="http://www.botecodigital.info/web/construindo-uma-galeria-de-fotos-com-o-plugin-prettyphoto-do-jquery/" class="crp_title">Construindo uma Galeria de Fotos com o plugin PrettyPhoto do JQuery</a></li><li><a href="http://www.botecodigital.info/jquery/menu-sanfona-com-jquery/"><img title="Menu Sanfona com JQuery" class="crp_thumb wp-post-image" src="http://www.botecodigital.info/wp-content/uploads/2010/05/jquery.png" height="50" alt="Menu Sanfona com JQuery" width="50" /></a> <a href="http://www.botecodigital.info/jquery/menu-sanfona-com-jquery/" class="crp_title">Menu Sanfona com JQuery</a></li><li><a href="http://www.botecodigital.info/php/criando-um-feed-com-simplexml/"><img title="Criando um FEED com SimpleXML" class="crp_thumb wp-post-image" src="http://www.botecodigital.info/wp-content/uploads/2010/04/php.png" height="50" alt="Criando um FEED com SimpleXML" width="50" /></a> <a href="http://www.botecodigital.info/php/criando-um-feed-com-simplexml/" class="crp_title">Criando um FEED com SimpleXML</a></li><li><a href="http://www.botecodigital.info/jquery/trocando-dados-utilizando-json/"><img title="Trocando dados utilizando JSON" class="crp_thumb wp-post-image" src="http://www.botecodigital.info/wp-content/uploads/2010/05/jquery.png" height="50" alt="Trocando dados utilizando JSON" width="50" /></a> <a href="http://www.botecodigital.info/jquery/trocando-dados-utilizando-json/" class="crp_title">Trocando dados utilizando JSON</a></li></ul></div>
HTML5 novos elementos de estrutura
14 de Janeiro de 2012, 0:00 - sem comentários ainda | Ninguém está seguindo este artigo ainda.
Visualizado 254 vezes
0sem comentários ainda