{"id":4607,"date":"2021-08-17T10:47:55","date_gmt":"2021-08-17T13:47:55","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriais\/?p=4607"},"modified":"2023-10-27T18:42:45","modified_gmt":"2023-10-27T21:42:45","slug":"diferenca-entre-html-e-html5","status":"publish","type":"post","link":"\/pt\/tutoriais\/diferenca-entre-html-e-html5","title":{"rendered":"Por dentro do HTML5: entenda o c\u00f3digo da web moderna!"},"content":{"rendered":"<p>A Linguagem de Marca&ccedil;&atilde;o de Hipertexto (HTML na sigla em ingl&ecirc;s) &eacute; a linguagem de marca&ccedil;&atilde;o mais utilizada para criar aplica&ccedil;&otilde;es e p&aacute;ginas na web. Ela &eacute; composta de elementos predefinidos e de tags para rotular pe&ccedil;as de conte&uacute;do e descrever a estrutura das p&aacute;ginas.<\/p><p>Neste artigo, vamos explicar o que &eacute; o HTML5, explicar suas diferen&ccedil;as para o HTML e contar quais s&atilde;o as suas vantagens para desenvolvedores e usu&aacute;rios finais. Al&eacute;m disso, vamos responder as perguntas mais frequentes sobre HTML5 e trazer uma folha de dicas para facilitar o seu processo de aprendizagem.c<\/p><p>Bora come&ccedil;ar?<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/HTML-Cheat-Sheet.pdf\" target=\"_blank\" rel=\"noopener\">Baixe o Guia de Recursos HTML definitivo<\/a><\/p><p>\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">O Que &eacute; HTML5?<\/h2>\n                    <p>O HTML5 &eacute; a vers&atilde;o mais recente da Linguagem de Marca&ccedil;&atilde;o de Hipertexto, que suporta tags, elementos e conte&uacute;do multim&iacute;dia &mdash; assim como marca&ccedil;&otilde;es de documento melhoradas e novas APIs.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-html\"><strong>O Que &eacute; HTML?<\/strong><\/h2><p>O HTML &eacute; a principal linguagem da World Wide Web (WWW). Os desenvolvedores a utilizam para projetar elementos das p&aacute;ginas na web, como texto, hiperlinks e arquivos multim&iacute;dia.<\/p><p>O HTML 5.2, uma atualiza&ccedil;&atilde;o de 2017, &eacute; a vers&atilde;o mais recente do HTML. Confira o infogr&aacute;fico abaixo para ver mais marcos hist&oacute;ricos do HTML.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"726\" height=\"1024\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/image2-726x1024.png\" alt=\"Infogr&aacute;fico de marcos HTML com exemplo dos novos html5\" class=\"wp-image-29661\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/image2-726x1024.png 726w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/image2-213x300.png 213w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/image2-106x150.png 106w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/image2-768x1083.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/image2-1089x1536.png 1089w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/image2.png 851w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><\/figure><\/div><p>O HTML funciona atrav&eacute;s do uso de v&aacute;rias <strong>tags <\/strong>para definir as estruturas dos textos. Elas incluem cabe&ccedil;alhos, tabelas e par&aacute;grafos. Cada tag &eacute; definida atrav&eacute;s do uso da f&oacute;rmula <strong>&lt;A&gt; <\/strong>e <strong>&lt;\/A&gt;<\/strong>. Elas s&atilde;o chamadas de tags de &ldquo;abertura&rdquo; e &ldquo;fechamento&rdquo;, respectivamente.<\/p><p>Por exemplo, n&oacute;s podemos usar <em>&lt;i&gt;digite seu texto aqui&lt;\/i&gt;<\/em> para mudar o estilo do texto para it&aacute;lico. O navegador vai renderizar o conte&uacute;do atrav&eacute;s dessas tags, e ent&atilde;o exibi-las na tel.a<\/p><p>Note que essa linguagem s&oacute; funciona de maneira est&aacute;tica, ent&atilde;o n&atilde;o &eacute; poss&iacute;vel criar uma p&aacute;gina da web din&acirc;mica ou interativa usando HTML. Ele apenas modifica os elementos est&aacute;ticos de uma p&aacute;gina, como o cabe&ccedil;alho de conte&uacute;do, o rodap&eacute; e a posi&ccedil;&atilde;o da imagem.Para criar um site interativo, voc&ecirc; precisa combinar o HTML com pelo menos duas linguagens de <em>front-end<\/em>:<strong> <\/strong>Cascading Style Sheets (<a href=\"\/tutoriais\/o-que-e-css-guia-basico-de-css\"><strong>CSS<\/strong><\/a>)<strong> <\/strong>&nbsp;e <a href=\"\/tutoriais\/o-que-e-javascript\"><strong>JavaScript<\/strong><\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-html-vs-html5-comparacao\"><strong>HTML vs HTML5 &ndash; Compara&ccedil;&atilde;o<\/strong><\/h2><p>Tanto o HTML quanto o HTML5 s&atilde;o linguagens de marca&ccedil;&atilde;o de hipertexto, usadas primariamente para desenvolver p&aacute;ginas da web e aplica&ccedil;&otilde;es. O HTML5 &eacute; a vers&atilde;o mais recente do HTML e suporta novas funcionalidades de linguagem de marca&ccedil;&atilde;o, como multim&iacute;dia, novas tags, elementos e novas APIs. O HTML5 tamb&eacute;m suporta &aacute;udio e v&iacute;deo.<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>HTML<\/strong><\/td><td><strong>HTML5<\/strong><\/td><\/tr><tr><td>HTML n&atilde;o oferece suporte nativo a &aacute;udio e v&iacute;deo.<\/td><td>HTML oferece suporte nativo a &aacute;udio e v&iacute;deo.<\/td><\/tr><tr><td>HTML apenas suporta vetores gr&aacute;ficos se forem usados em conjunto com diferentes tecnologias como <a href=\"https:\/\/pt.wikipedia.org\/wiki\/Adobe_Flash\" target=\"_blank\" rel=\"noopener\">Flash<\/a>, <a href=\"https:\/\/learn.microsoft.com\/pt-br\/windows\/win32\/vml\/web-workshop---specs---standards----introduction-to-vector-markup-language--vml-\" target=\"_blank\" rel=\"noopener\">VML<\/a> ou <a href=\"https:\/\/www.microsoft.com\/silverlight\/\" target=\"_blank\" rel=\"noopener\">Silverlight<\/a>.<\/td><td>HTML5 suporta SVG (Scalable Vector Graphics), Canvas e outros elementos gr&aacute;ficos vetoriais virtuais.<\/td><\/tr><tr><td>HTML permite MathML e SVG embutidos em texto com uso restrito.<\/td><td>HTML permite <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/MathML\" target=\"_blank\" rel=\"noopener\">MathML<\/a> e <a href=\"https:\/\/flatschart.com\/html5\/svg.html#:~:text=O%20Formato%20SVG%20(Scalable%20Vectorial,vetoriais%20bidimensionais%2C%20est%C3%A1ticos%20ou%20animados.\" target=\"_blank\" rel=\"noopener\">SVG<\/a> embutidos em texto.<\/td><\/tr><tr><td>HTML n&atilde;o permite que os usu&aacute;rios desenhem formas como c&iacute;rculos, tri&acirc;ngulos e ret&acirc;ngulos.<\/td><td>HTML permite que os usu&aacute;rios desenhem formas como c&iacute;rculos, tri&acirc;ngulos e ret&acirc;ngulos.<\/td><\/tr><tr><td>HTML apenas permite que o cache e os cookies do navegador armazenem dados de maneira tempor&aacute;ria.<\/td><td>HTML5 usa bancos de dados SQL na web, armazenamento local e cache de aplicativos para armazenar dados temporariamente.<\/td><\/tr><tr><td>O JavaScript e a interface do navegador rodam no mesmo processo.<\/td><td>O JavaScript e a interface do navegador rodam em processos separados.<\/td><\/tr><tr><td>Declara&ccedil;&atilde;o de codifica&ccedil;&atilde;o de caracteres mais longa. Usa o <a href=\"https:\/\/pt.wikipedia.org\/wiki\/ASCII\" target=\"_blank\" rel=\"noopener\">conjunto de caracteres<\/a> ASCII.<\/td><td>Declara&ccedil;&atilde;o de codifica&ccedil;&atilde;o de caracteres mais curta. Usa o conjunto de caracteres UTF-8.<\/td><\/tr><tr><td>Compat&iacute;vel com quase todos os navegadores.<\/td><td>Compat&iacute;vel apenas com os navegadores mais recentes, considerando que existem muitas novas tags e elementos que apenas alguns navegadores suportam.<\/td><\/tr><tr><td>Constru&iacute;do com base na <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Glossary\/SGML\" target=\"_blank\" rel=\"noopener\">Standard Generalized Markup Language<\/a> (SGML).<\/td><td>O HTML5 melhorou as regras de an&aacute;lise, fornecendo compatibilidade aprimorada.<\/td><\/tr><\/tbody><\/table><\/figure><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"761\" height=\"621\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/html-vs-html5.png\" alt=\"diferen&ccedil;a de estruturas entre HTML e HTML5\" class=\"wp-image-29662\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/html-vs-html5.png 761w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/html-vs-html5-300x245.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/10\/html-vs-html5-150x122.png 150w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/figure><\/div><p>Al&eacute;m dos recursos da tabela acima, o HTML5 trouxe as seguintes mudan&ccedil;as:<\/p><ul class=\"wp-block-list\">\n<li>Alguns elementos removidos, como <strong>isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike<\/strong> e <strong>tt<\/strong>.<\/li>\n\n\n\n<li>Novas formas de controle, incluindo <strong>dates and times<\/strong> (datas e horas)<strong>, email, number <\/strong>(n&uacute;mero)<strong>, range <\/strong>(intervalo)<strong>, tel, url, search <\/strong>(busca)<strong>, color <\/strong>(cor)<strong> <\/strong>e <strong>datalist<\/strong>.<\/li>\n\n\n\n<li>Diversos novos elementos, incluindo <strong>video, nav, aside, progress <\/strong>(progresso)<strong>, canvas <\/strong>(tela)<strong>, section <\/strong>(se&ccedil;&atilde;o)<strong>, meter<\/strong>, e <strong>time <\/strong>(tempo).<\/li>\n\n\n\n<li>Novas APIs com diversas novas funcionalidades, como suporte a arrastar e soltar, manipula&ccedil;&atilde;o de hist&oacute;rico do navegador, e a manipula&ccedil;&atilde;o e leitura do estado de orienta&ccedil;&atilde;o da tela de bloqueio.<\/li>\n\n\n\n<li>Novos atributos, incluindo <strong>async, manifest, sandbox, srcdoc<\/strong> e <strong>reversed<\/strong>.<\/li>\n<\/ul><p>Novos atributos globais, como <strong>hidden<\/strong> (escondido), <strong>role<\/strong>, <strong>spellcheck<\/strong> e <strong>translate<\/strong> (traduzir).<\/p><h2 class=\"wp-block-heading\" id=\"h-principais-vantagens-do-html5-para-desenvolvedores\"><strong>Principais Vantagens do HTML5 para Desenvolvedores<\/strong><\/h2><p>O HTML5 busca permitir que os desenvolvedores tenham maior flexibilidade na hora de projetar sites. Por causa disso, agora vamos explicar melhorias significativas nas quais voc&ecirc; deve ficar de olho:<\/p><h3 class=\"wp-block-heading\" id=\"h-manipulacao-de-erro-persistente\"><strong>Manipula&ccedil;&atilde;o de Erro Persistente<\/strong><\/h3><p>A maioria dos navegadores tem o suporte para analisar o c&oacute;digo HTML incorreto de maneira estrutural e sint&aacute;tica. Mas, at&eacute; alguns anos atr&aacute;s, n&atilde;o havia um processo padronizado para lidar com isso.<\/p><p>Isso significava que os novos desenvolvedores de navegador precisavam realizar testes de documentos HTML malformados em diferentes navegadores para criar processos de manipula&ccedil;&atilde;o de erros melhorados atrav&eacute;s de engenharia reversa.<\/p><p>A manipula&ccedil;&atilde;o consistente do erro de HTML5 fez uma diferen&ccedil;a enorme a este respeito. Os algoritmos de an&aacute;lise aprimorados que s&atilde;o usados &#8203;&#8203;na vers&atilde;o 5 do HTML t&ecirc;m benef&iacute;cios n&atilde;o quantific&aacute;veis.<\/p><h3 class=\"wp-block-heading\" id=\"h-semantica-melhorada-para-elementos\"><strong>Sem&acirc;ntica Melhorada para Elementos<\/strong><\/h3><p>Para melhorar a sem&acirc;ntica do c&oacute;digo, foram feitas melhorias para os pap&eacute;is de v&aacute;rios elementos existentes.<\/p><p>Se&ccedil;&atilde;o, artigo, navega&ccedil;&atilde;o e cabe&ccedil;alho s&atilde;o os novos elementos que substitu&iacute;ram a maioria dos agora obsoletos elementos div. Isso fez com que o processo de erro de digitaliza&ccedil;&atilde;o ficasse muito menos complicado.<\/p><h3 class=\"wp-block-heading\" id=\"h-suporte-aprimorado-para-recursos-de-aplicativos-da-web\"><strong>Suporte Aprimorado para Recursos de Aplicativos da Web<\/strong><\/h3><p>Um dos principais objetivos do HTML5 era permitir que os navegadores funcionassem como plataformas de aplicativos. Portanto, ele oferece aos desenvolvedores um controle melhorado do desempenho dos seus sites.<\/p><p>No passado, os desenvolvedores tinham que usar solu&ccedil;&otilde;es alternativas porque ainda n&atilde;o existiam muitas tecnologias do lado do servidor e extens&otilde;es de navegadores.<\/p><p>Atualmente, n&atilde;o existe a necessidade de empregar qualquer solu&ccedil;&atilde;o alternativa baseada em JavaScript ou Flash (como era feito anteriormente no HTML4) porque existem elementos no HTML5 que oferecem todas as funcionalidades.<\/p><h3 class=\"wp-block-heading\" id=\"h-navegacao-movel-facilitada\">Navega&ccedil;&atilde;o M&oacute;vel Facilitada<\/h3><p>A quantidade de pessoas que possui um smartphone <a href=\"https:\/\/www.tecmundo.com.br\/mercado\/153859-numero-smartphones-mundo-deve-crescer-50-2021.htm\" target=\"_blank\" rel=\"noopener\"><strong>cresceu de maneira constante<\/strong><\/a> na d&eacute;cada passada, e isso criou a necessidade por padr&otilde;es melhorados do Hypertext Markup Language.<\/p><p>Os usu&aacute;rios finais querem ser capazes de acessar um recurso da web a qualquer momento e atrav&eacute;s de qualquer dispositivo, o que faz com que ter sites responsivos seja uma exig&ecirc;ncia. O HTML5 tornou o suporte m&oacute;vel muito mais simples ao ser capaz de atender aos dispositivos eletr&ocirc;nicos de baixa pot&ecirc;ncia, como tablets e smartphones.<\/p><h3 class=\"wp-block-heading\" id=\"h-o-elemento-canvas\"><strong>O Elemento Canvas<\/strong><\/h3><p>Um dos recursos mais empolgantes do HTML5 &eacute; o elemento &lt;canvas&gt;, que permite que voc&ecirc; desenhe v&aacute;rios componentes gr&aacute;ficos, como caixas, c&iacute;rculos, texto e imagens.<\/p><p>Considerando o qu&atilde;o conveniente &eacute; o uso da nova vers&atilde;o da linguagem de marca&ccedil;&atilde;o para desenhar gr&aacute;ficos usando diferentes cores e formas via scripts (ex.: JavaScript), ela tornou o Flash completamente obsoleto.<\/p><p>Contudo, vale mencionar que o elemento <strong>&lt;canvas&gt;<\/strong> &eacute; meramente um cont&ecirc;iner gr&aacute;fico. Portanto, para definir os gr&aacute;ficos, um script precisa ser executado. Aqui est&aacute; um exemplo onde o JavaScript &eacute; usado em conjunto com o elemento:<\/p><pre class=\"wp-block-preformatted\">&lt;canvas id=&rdquo;TestCanvas&rdquo; width=&rdquo;200&Prime; height=&rdquo;100&Prime;&gt;&lt;\/canvas&gt;\nvar c = document.getElementById(&ldquo;TestCanvas&rdquo;);\nvar context = c.getContext(&ldquo;2d&rdquo;);\ncontext.fillStyle = &ldquo;#FF0000&rdquo;;context.fillRect(0,0,140,75);<\/pre><h3 class=\"wp-block-heading\" id=\"h-o-elemento-menu\"><strong>O elemento Menu<\/strong><\/h3><p>Os elementos rec&eacute;m-adicionados <code>&lt;menu&gt;<\/code>&nbsp;e <code>&lt;menuitem&gt;<\/code> s&atilde;o componentes das especifica&ccedil;&otilde;es dos elementos interativos, mas n&atilde;o s&atilde;o frequentemente usados &#8203;&#8203;ou falados pela comunidade de desenvolvedores.<\/p><p>No entanto, esses dois itens podem ser usados &#8203;&#8203;para garantir uma interatividade web aprimorada. A tag <code>&lt;menu&gt;<\/code>&nbsp;&eacute; usada para representar comandos de menu em aplicativos m&oacute;veis e de mesa para fins de simplicidade. Um poss&iacute;vel uso da tag de menu pode ser:<\/p><pre class=\"wp-block-preformatted\">&lt;body contextmenu=&rdquo;new-menu&rdquo;&gt;\n\n&lt;menu id=&rdquo; new-menu&rdquo; type=&rdquo;context&rdquo;&gt;\n\n&lt;menuitem&gt;Hello!&lt;\/menuitem&gt;\n\n&lt;\/menu&gt;\n\n&lt;\/body&gt;<\/pre><h3 class=\"wp-block-heading\" id=\"h-atributos-de-dados-personalizaveis\"><strong>Atributos de Dados Personaliz&aacute;veis<\/strong><\/h3><p>Era poss&iacute;vel adicionar atributos personalizados antes do HTML5, mas era um caso arriscado; Por exemplo, em HTML4, atributos personalizados podem, por vezes, parar uma p&aacute;gina de renderiza&ccedil;&atilde;o completamente, e eles muitas vezes poderiam tornar-se a causa de documentos incorretos ou inv&aacute;lidos.<\/p><p>O <a href=\"https:\/\/webdesign.tutsplus.com\/pt\/tutorials\/all-you-need-to-know-about-the-html5-data-attribute--webdesign-9642\" target=\"_blank\" rel=\"noopener\"><strong>atributo data- *<\/strong><\/a> em HTML5 trouxe um fim a este problema que costumava ocorrer frequentemente. Existem v&aacute;rios usos para este atributo, mas o objetivo principal de sua introdu&ccedil;&atilde;o foi o armazenamento de informa&ccedil;&otilde;es extras sobre diferentes elementos.<\/p><p>Agora, os dados personalizados podem ser inclu&iacute;dos, e d&aacute; aos desenvolvedores maiores chances de fazer atraente e eficiente p&aacute;ginas da web sem ter que introduzir server-side lookups ou chamadas <a href=\"https:\/\/www.bitdegree.org\/learn\/what-is-ajax\" target=\"_blank\" rel=\"noopener\"><strong>Ajax<\/strong><\/a>.<\/p><h3 class=\"wp-block-heading\" id=\"h-armazemento-local-para-substituir-cookies\"><strong>Armazemento Local para Substituir Cookies<\/strong><\/h3><p>O HTML5 usa o&nbsp;<em>web storage<\/em> ou o <a href=\"https:\/\/www.bitdegree.org\/learn\/html5-local-storage\" target=\"_blank\" rel=\"noopener\"><strong>armazenamento local<\/strong><\/a> para substituir cookies. Em vers&otilde;es mais antigas do H<span style=\"font-weight: 400\">ypertext Markup Language<\/span>, se os desenvolvedores quisessem armazenar qualquer coisa, eles teriam que usar cookies que guardar uma pequena quantidade de dados (cerca de 4 KB).<\/p><p>Contudo, os cookies t&ecirc;m diversas desvantagens &mdash; eles podem expirar, restringir o uso de dados complexos (s&oacute; permitem <a href=\"https:\/\/pt.wikipedia.org\/wiki\/Cadeia_de_caracteres\" target=\"_blank\" rel=\"noopener\"><strong>strings<\/strong><\/a>) e deixar o servidor da internet mais lento ao carregar scripts adicionais.<\/p><p>O&nbsp;<em>web storage<\/em>, por outro lado, permite que os dados sejam armazenados no computador do cliente de maneira permanente (a n&atilde;o ser que o usu&aacute;rio os apague), e tamb&eacute;m possui uma maior capacidade de dados (5 MB), sem trazer um peso extra para o servidor.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"730\" height=\"548\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2021\/06\/html5-logo.jpg\" alt=\"logotipo do html5\" class=\"wp-image-24946\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2021\/06\/html5-logo.jpg 730w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2021\/06\/html5-logo-300x225.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2021\/06\/html5-logo-150x113.jpg 150w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/figure><\/div><p class=\"has-text-align-center\"><\/p><h2 class=\"wp-block-heading\" id=\"h-vantagens-do-html5-para-o-usuario-final\"><strong>Vantagens do HTML5 para o usu&aacute;rio final<\/strong><\/h2><p>O HTML5 trouxe uma mudan&ccedil;a de paradigma tanto para os desenvolvedores quanto para os usu&aacute;rios finais. Algumas das muitas vantagens que ele fornece aos usu&aacute;rios finais s&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li>Reduz travamentos em dispositivos m&oacute;veis.<\/li>\n\n\n\n<li>Aumenta a confian&ccedil;a em sites m&oacute;veis. Quando um usu&aacute;rio quiser usar os servi&ccedil;os da empresa, mas n&atilde;o quiser fazer o download de seu aplicativo, eles podem simplesmente fazer logon no site responsivo da empresa para faz&ecirc;-lo.<\/li>\n\n\n\n<li>A erradica&ccedil;&atilde;o da necessidade de usar o Adobe Flash permite que os desenvolvedores forne&ccedil;am uma experi&ecirc;ncia est&eacute;tica de usu&aacute;rio rica em gr&aacute;ficos usando JavaScript e MPEG4.<\/li>\n\n\n\n<li>A capacidade de suportar elementos nativos de &aacute;udio e v&iacute;deo sem plugins adicionais.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-o-quao-seguro-e-o-html5\"><strong>O Qu&atilde;o Seguro &eacute; o HTML5?<\/strong><\/h2><p>O HTML5 &eacute; a vers&atilde;o mais segura do HTML. Contudo, aplicativos e sites constru&iacute;dos usando o HTML5 ainda est&atilde;o vulner&aacute;veis a ataques de seguran&ccedil;a.<\/p><p>Uma forma comum de amea&ccedil;a de seguran&ccedil;a s&atilde;o os c&oacute;digos maliciosos, que podem ser injetados atrav&eacute;s de v&aacute;rias maneiras, como atrav&eacute;s de erros do desenvolvedor, arquivos de m&uacute;sica, imagens, QR codes, campos SSID e frameworks de middleware.<\/p><p>Infelizmente, n&atilde;o existe uma solu&ccedil;&atilde;o &uacute;nica e universal para construir um site ou aplica&ccedil;&atilde;o web seguro usando HTML5. A seguran&ccedil;a de um site ou aplicativo depende do qu&atilde;o cuidadoso e minucioso &eacute; o desenvolvedor que o est&aacute; criando.<\/p><p>Al&eacute;m disso, &eacute; necess&aacute;rio entender que as vulnerabilidades da plataforma usada para construir seu site. Por exemplo, usu&aacute;rios do WordPress precisam compreender as vulnerabilidades deste sistema de gest&atilde;o de conte&uacute;do e cuidar para <a href=\"\/tutoriais\/como-aumentar-seguranca-no-wordpress\/\">aumentar a seguran&ccedil;a dos seus sites WordPress<\/a>.<\/p><p>Aqui est&atilde;o algumas dicas para melhorar a seguran&ccedil;a do seu site:<\/p><ul class=\"wp-block-list\">\n<li><strong>Mantenha o software e os plugins atualizados<\/strong>. Atualiza&ccedil;&otilde;es de software e de plugins cont&ecirc;m melhorias de desempenho e de seguran&ccedil;a, incluindo o conserto de bugs e prote&ccedil;&atilde;o contra as mais recentes amea&ccedil;as online.<\/li>\n\n\n\n<li><strong>Livre-se de plugins e arquivos desnecess&aacute;rios<\/strong>. Plugins e arquivos desnecess&aacute;rios ou desatualizados podem ser usados para acessar o seu site e implantar amea&ccedil;as de seguran&ccedil;a.<\/li>\n\n\n\n<li><strong>Use HTTPS e SSL<\/strong>. HTTPS e SSL oferecem um maior n&iacute;vel de seguran&ccedil;a para um site. O HTTPS criptografa solicita&ccedil;&otilde;es e respostas, enquanto o SSL <a href=\"\/tutoriais\/o-que-e-ssl-tls-https\">cria uma conex&atilde;o segura entre um site e um navegador<\/a>, garantindo a seguran&ccedil;a das informa&ccedil;&otilde;es privadas.<\/li>\n\n\n\n<li><strong>Crie uma pol&iacute;tica de senhas robusta<\/strong>. Crie uma pol&iacute;tica de senhas que solicita que os usu&aacute;rios criem senhas seguras, que consistem numa mistura de letras, n&uacute;meros e caracteres especiais.<\/li>\n\n\n\n<li>Escolha o<strong> <\/strong><a href=\"\/tutoriais\/melhor-hospedagem-de-sites\"><strong>melhor provedor de hospedagem<\/strong><\/a>. Encontre um <a href=\"\/pt\/hospedagem-barata\"><strong>provedor de hospedagem<\/strong><\/a> seguro, que oferece suporte 24\/7 e v&aacute;rios recursos &mdash; como servi&ccedil;os de backup, <a href=\"\/pt\/certificado-ssl-gratis\">SSL free<\/a> (gr&aacute;tis) e uma taxa de <em>uptime <\/em>alta.<\/li>\n\n\n\n<li><a href=\"\/tutoriais\/como-fazer-backup-do-seu-site-wordpress\"><strong>Fa&ccedil;a backups frequentes do seu site<\/strong><\/a>. Crie <a href=\"\/tutoriais\/como-fazer-download-de-um-backup\"><strong>c&oacute;pias de seguran&ccedil;a do seu site<\/strong><\/a> com frequ&ecirc;ncia para evitar a perda de informa&ccedil;&otilde;es importantes no caso de uma viola&ccedil;&atilde;o de seguran&ccedil;a, j&aacute; que voc&ecirc; pode simplesmente <a href=\"https:\/\/support.hostinger.com\/pt\/articles\/3989447-como-restaurar-um-backup-de-um-site-wordpress\" target=\"_blank\" rel=\"noopener\">restaurar o site<\/a> a partir do backup de uma base de dados.<\/li>\n\n\n\n<li><strong>Escaneie regularmente seu site em busca de malware<\/strong>. V&aacute;rios tipos de malware podem invadir um site atrav&eacute;s de plugins ou outros arquivos. Execute escaneamentos regulares de malware para livrar seu site dessas amea&ccedil;as de seguran&ccedil;a.<\/li>\n\n\n\n<li><strong>Limite tentativas de login<\/strong>. Limite o n&uacute;mero de tentativas de login para evitar que hackers tenham v&aacute;rias tentativas para testar diferentes combina&ccedil;&otilde;es de senha.<\/li>\n\n\n\n<li><strong>Gerencie o acesso dos usu&aacute;rios<\/strong>. Seja rigoroso ou rigorosa no controle do acesso dos usu&aacute;rios e das suas permiss&otilde;es, permitindo que apenas pessoas autorizadas possam acessar arquivos e informa&ccedil;&otilde;es sens&iacute;veis. Isso &eacute; especialmente importante para sites com m&uacute;ltiplos usu&aacute;rios.<\/li>\n\n\n\n<li><strong>Instale um Web Application Firewall (WAF)<\/strong>. Um WAF filtra, monitora e bloqueia tr&aacute;fego HTTP malicioso que chega ao aplicativo. Ele pode habilitar o recurso de <em>lockdown<\/em> da URL, evitando que endere&ccedil;os de IP n&atilde;o autorizados acessem a p&aacute;gina de login do site.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/pt\/hospedagem-barata\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-saber-html-ajuda-a-aprender-html5\"><strong>Saber HTML Ajuda a Aprender HTML5?<\/strong><\/h2><p>Aprender HTML5 &eacute; praticamente o mesmo que aprender HTML, j&aacute; que HTML5 &eacute; apenas a vers&atilde;o mais nova do HTML. Se voc&ecirc; j&aacute; domina uma das vers&otilde;es, n&atilde;o deve ser dif&iacute;cil escrever c&oacute;digos usando outra vers&atilde;o.Hoje em dia, praticamente qualquer pessoa pode aprender HTML por conta pr&oacute;pria, o que fica ainda mais f&aacute;cil com sites para <a href=\"\/tutoriais\/11-sites-aprender-como-programar-de-graca\">aprender a programar de gra&ccedil;a<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-pagina-de-dicas-e-exemplos-html5\"><strong>P&aacute;gina de Dicas e Exemplos HTML5<\/strong><\/h2><p><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/codigos-html-prontos-guia-pdf\" target=\"_blank\" rel=\"noopener\"><strong>P&aacute;gina de Dicas<\/strong><\/a> podem ser de uma grande ajuda se voc&ecirc; est&aacute; come&ccedil;ando a aprender uma nova linguagem. Neste artigo, gostar&iacute;amos de fornecer uma folha virtual que inclui as tags mais comumente usadas no HTML e as novas presentes no HTML5.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2017\/04\/html5-cheat-sheet.jpg\" alt=\"html5 cheat sheet\"><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-devo-mudar-para-o-html5\"><strong>Devo Mudar para o HTML5?<\/strong><\/h2><p>Pode ser considerada uma boa pr&aacute;tica migrar para o HTML5. Uma das principais raz&otilde;es para isso &eacute; que o HTML5 j&aacute; substituiu o Flash como a forma padr&atilde;o de oferecer conte&uacute;do multim&iacute;dia em v&aacute;rias plataformas.<\/p><p>A maior parte dos maiores nomes da ind&uacute;stria j&aacute; migrou do Flash para o HTML. Exemplos incluem Apple, YouTube e Google Chrome.<\/p><p>Aqui est&atilde;o alguns dos motivos para migrar do Adobe Flash para HTML5:<\/p><ul class=\"wp-block-list\">\n<li><strong>Adobe Flash &eacute; um software propriet&aacute;rio<\/strong>. As pessoas usando esse software estar&atilde;o sujeitas a restri&ccedil;&otilde;es ou condi&ccedil;&otilde;es de licenciamento. O HTML5, por outro lado, &eacute; de c&oacute;digo aberto e desenvolvido por um painel internacional.<\/li>\n\n\n\n<li><strong>Preocupa&ccedil;&otilde;es de seguran&ccedil;a e desempenho<\/strong>. Especialistas apontaram que o Flash &eacute; inseguro e inst&aacute;vel. Ele se tornou uma porta de entrada para v&aacute;rios ataques de malware, e a maneira como o conte&uacute;do Flash &eacute; processado tamb&eacute;m afeta negativamente o tempo de carregamento.<\/li>\n\n\n\n<li><strong>Uso excessivo de bateria<\/strong>. Visualizar conte&uacute;do em Flash em dispositivos m&oacute;veis tende a drenar mais r&aacute;pido a sua bateria.<\/li>\n\n\n\n<li><strong>Flash n&atilde;o &eacute; adequado para dispositivos sens&iacute;veis ao toque<\/strong>. A tecnologia Flash &eacute; projetada primeiramente para dispositivos desktop, e n&atilde;o para aparelhos com <em>touchscreen<\/em>. Por exemplo, m&uacute;ltiplas aplica&ccedil;&otilde;es desenvolvidas em Flash dependem da a&ccedil;&atilde;o de passar o mouse por cima do elemento, o que &eacute; imposs&iacute;vel em telas sens&iacute;veis ao toque.<\/li>\n\n\n\n<li><strong>Adobe parou que suportar o Flash Player<\/strong>. A <a href=\"https:\/\/www.adobe.com\/br\/products\/flashplayer\/end-of-life.html\" target=\"_blank\" rel=\"noopener\">Adobe parou de suportar<\/a> o Flash Player em 31 de dezembro de 2020. Ela reconhece que padr&otilde;es abertos como o HTML5 se tornaram melhores alternativas e j&aacute; s&atilde;o usados pelos principais navegadores.<\/li>\n<\/ul><p>Para ajudar voc&ecirc; a decidir se vale a pena migrar para o HTML5, n&oacute;s reunimos alguns pr&oacute;s e contras de usar a linguagem de marca&ccedil;&atilde;o.<\/p><p><strong>Pr&oacute;s<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Gratuito<\/strong>. N&atilde;o &eacute; preciso pagar taxas de royalties ou licenciamento para us&aacute;-lo.<\/li>\n\n\n\n<li><strong>Multiplataforma<\/strong>. Dispon&iacute;vel em qualquer dispositivo &mdash; computadores, laptops e smartphones &mdash; desde que o navegador suporte HTML5.<\/li>\n\n\n\n<li><strong>Suporte nativo a &aacute;udio e v&iacute;deo<\/strong>. O HTML5 proporciona suporte a &aacute;udio e v&iacute;deo sem a necessidade de instalar software e aplica&ccedil;&otilde;es adicionais.<\/li>\n\n\n\n<li><strong>Pode impulsionar o <\/strong><a href=\"\/tutoriais\/o-que-e-seo\"><strong>SEO<\/strong><\/a>. A natureza multiplataforma do HTML5 e as novas tags HTML sem&acirc;nticas que ele introduziu podem melhorar o desempenho de SEO de um site. Al&eacute;m disso, a Google parou de indexar sites conte&uacute;do de sites em Flash ou p&aacute;ginas com conte&uacute;do&nbsp; em Flash.<\/li>\n\n\n\n<li><strong>Op&ccedil;&otilde;es confi&aacute;veis de armazenamento<\/strong>. O HTML5 permite o armazenamento tempor&aacute;rio de dados do usu&aacute;rio num banco de dados SQL, eliminando a necessidade de cookies.<\/li>\n<\/ul><p><strong>Contras<\/strong><\/p><ul class=\"wp-block-list\">\n<li><strong>Diferentes formatos de v&iacute;deo<\/strong>. N&atilde;o existe um formato de v&iacute;deo padr&atilde;o ou definitivo para o HTML5. Exemplos de formatos incluem <strong>H.264<\/strong>, <strong>WebM<\/strong> e <strong>Ogg<\/strong>. Diferentes navegadores suportam diferentes formatos de v&iacute;deo. Por exemplo, o Firefox suporta <strong>WebM<\/strong> e <strong>Ogg<\/strong>, mas n&atilde;o <strong>H.264<\/strong>.<\/li>\n\n\n\n<li><strong>N&atilde;o suporta navegadores antigos<\/strong>. Usu&aacute;rios de navegadores mais velhos podem n&atilde;o conseguir acessar sites com HTML5 de maneira adequada. Alguns dos recursos mais novos adicionados no HTML5 s&atilde;o compat&iacute;veis apenas com navegadores modernos.<\/li>\n\n\n\n<li><strong>Entrega de inconsistente de conte&uacute;do<\/strong>. Apesar da sua natureza multiplataforma, o conte&uacute;do em HTML5 pode ser renderizado de maneria diferente dependendo do tipo de navegador e dispositivo que for usado.<\/li>\n\n\n\n<li><strong>Problemas de licenciamento de m&iacute;dia<\/strong>. Alguns codecs de v&iacute;deo cont&ecirc;m tecnologia patenteada, o que significa que certos usos desses formatos de v&iacute;deo est&atilde;o sujeitos ao pagamento de taxas de royalties para donos de patentes. Por exemplo, os codecs <strong>H.264<\/strong>, <strong>ACC<\/strong> e <strong>MPEG-4<\/strong> entram nessa categoria.<\/li>\n\n\n\n<li><strong>N&atilde;o &eacute; ideal para o desenvolvimento de games<\/strong>. O JavaScript &eacute; a &uacute;nica linguagem de script do HTML5. Apesar dele ser ideal para diversas aplica&ccedil;&otilde;es, ele fica aqu&eacute;m do desejado para o desenvolvimento de games, especialmente na hora de lidar com <em>namespaces <\/em>customizados, heran&ccedil;a e acesso de membros.<\/li>\n<\/ul><p>Se voc&ecirc; quer trocar do Flash para o HTML5, aqui est&aacute; um breve guia passo a passo para seguir:<\/p><ol class=\"wp-block-list\">\n<li><strong>Prepare-se para transi&ccedil;&atilde;o<\/strong>. Isso pode incluir fazer uma auditoria do conte&uacute;do do seu site e tomar a decis&atilde;o do que deve ser adicionado ou modificado. Voc&ecirc; tamb&eacute;m pode fazer uma lista de refer&ecirc;ncia cruzada para seguir durante a convers&atilde;o, assim como determinar o linha do tempo da convers&atilde;o, as diretrizes e as regras.<\/li>\n\n\n\n<li><strong>Verifique os arquivos-fonte<\/strong>. Encontre e documente os arquivos-fonte, garantindo que nada ser&aacute; perdido.<\/li>\n\n\n\n<li><strong>Re&uacute;na arquivos de m&iacute;dia e seu conte&uacute;do<\/strong>. Extraia todos os arquivos de m&iacute;dia e o conte&uacute;do do seu site Flash para ser reutilizado ou convertido para o site HTML5.<\/li>\n\n\n\n<li><strong>Use a ferramenta de convers&atilde;o apropriada<\/strong>. Existem muitas ferramentas de convers&atilde;o do Flash para HTML5. Exemplos incluem o Adobe Animate, OpenFL e Google Web Designer. Vamos falar mais sobre isso adiante.<\/li>\n\n\n\n<li><strong>Teste o novo site<\/strong>. Assim que a convers&atilde;o estiver completa, teste o seu site HTML5 em diferentes dispositivos e navegadores.<\/li>\n<\/ol><p>O tipo de ferramenta de convers&atilde;o de Flash para HTML5 indicada vai depender dos arquivos que voc&ecirc; tem.<\/p><p>\n\n\n<div><p class=\"important\"><strong>Importante!<\/strong> Se voc&ecirc; tem os arquivos-fonte <strong>.fla<\/strong> e <strong>.as3<\/strong>, recomendamos usar o Google Web Designer ou o Adobe Animate. Se voc&ecirc; tem apenas os arquivos <strong>.swf<\/strong>, recomendamos usar ferramentas como o Z&ouml;e da CreateJS ou o OpenFL.<\/p><\/div>\n\n\n\n<\/p><p>Aqui est&atilde;o breves descri&ccedil;&otilde;es de cada ferramenta:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/webdesigner.withgoogle.com\/intl\/pt-BR_ALL\" target=\"_blank\" rel=\"noopener\"><strong>Google Web Designer<\/strong><\/a>. O editor gratuito da Google &eacute; usado para criar conte&uacute;do HTML5 para a web atrav&eacute;s de uma combina&ccedil;&atilde;o de c&oacute;digos e de uma interface visual. Ele suporta Windows, Mac e Linux.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.adobe.com\/br\/products\/animate.html\" target=\"_blank\" rel=\"noopener\"><strong>Adobe Animate<\/strong><\/a>. O software da Adobe para cria&ccedil;&atilde;o de anima&ccedil;&otilde;es computadorizadas e conte&uacute;do multim&iacute;dia.<\/li>\n\n\n\n<li><a href=\"https:\/\/createjs.com\/zoe\" target=\"_blank\" rel=\"noopener\"><strong>Z&ouml;e do CreateJS<\/strong><\/a>. Um aplicativo de c&oacute;digo aberto que faz parte do CreateJS, uma suite de bibliotecas JavaScript para criar conte&uacute;do interativo. Esta ferramenta converte anima&ccedil;&otilde;es <strong>.swf<\/strong> para <em>sprite sheets<\/em>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.openfl.org\/\" target=\"_blank\" rel=\"noopener\"><strong>OpenFL<\/strong><\/a>. Um <em>framework<\/em> de software gratuita e multiplataforma que implementa a API Flash. Escrito na linguagem de programa&ccedil;&atilde;o <a href=\"https:\/\/haxe.org\/\" target=\"_blank\" rel=\"noopener\">Haxe<\/a>, o <em>framework<\/em> geralmente &eacute; usado para criar aplica&ccedil;&otilde;es e jogos.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>O HTML &eacute; a linguagem de marca&ccedil;&atilde;o mais usada no desenvolvimento de p&aacute;ginas e aplica&ccedil;&otilde;es da web. O HTML5 &eacute; a vers&atilde;o mais recente do HTML.<\/p><p>Neste artigo de HTML vs HTML5, n&oacute;s discutimos os principais recursos que diferenciam o HTML5 dos seus antecessores, como por exemplo;<\/p><ul class=\"wp-block-list\">\n<li>Suporte nativo a &aacute;udio e v&iacute;deo.<\/li>\n\n\n\n<li>Suporte a gr&aacute;ficos vetoriais sem plugins.<\/li>\n\n\n\n<li>Uso irrestrito de MathML e SVG embutidos no texto.<\/li>\n\n\n\n<li>Suporte a cria&ccedil;&atilde;o de formas.<\/li>\n\n\n\n<li>Uso de um banco de dados SQL ao inv&eacute;s de cookies para o armazenamento tempor&aacute;rio de dados.<\/li>\n\n\n\n<li>Capacidade de rodar JavaScript e a interface do navegador em processos separados.<\/li>\n\n\n\n<li>Declara&ccedil;&atilde;o HTML DOCTYPE mais curta.<\/li>\n\n\n\n<li>Declara&ccedil;&atilde;o de codifica&ccedil;&atilde;o de caracteres mais curta e uso do conjunto de caracteres UTF-8.<\/li>\n\n\n\n<li>Regras de an&aacute;lise aprimoradas, j&aacute; que o HTML5 n&atilde;o &eacute; constru&iacute;do com base na Standard Generalized Markup Language.<\/li>\n<\/ul><p>Al&eacute;m dos recursos acima, o HTML5 oferece v&aacute;rios novos elementos, controles de formul&aacute;rio, atributos e APIs. Isso &eacute; especialmente ben&eacute;fico para desenvolvedores e usu&aacute;rios finais.<\/p><p>Recomendamos que os usu&aacute;rios de Adobe Flash fa&ccedil;am a migra&ccedil;&atilde;o para o HTML5. Apesar do HTML5 ter os seus pr&oacute;prios pr&oacute;s e contras, ele foi adotado muitos nomes not&aacute;veis da ind&uacute;stria. O principal motivo para isso s&atilde;o as v&aacute;rias preocupa&ccedil;&otilde;es com seguran&ccedil;a e desempenho.<\/p><p>Se voc&ecirc; usa o Flash e quer migrar para o HTML5, recomendamos que fa&ccedil;a isso da maneira correta. Use ferramentas de convers&atilde;o apropriadas como <strong>Google Web Designer<\/strong>, <strong>Adobe Animate<\/strong>, <strong>Z&ouml;e do CreateJS<\/strong> e <strong>OpenFL<\/strong>.<\/p><p>Esperamos que este artigo sobre HTML5 tenha sido &uacute;til para voc&ecirc;. Boa sorte!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Linguagem de Marca&ccedil;&atilde;o de Hipertexto (HTML na sigla em ingl&ecirc;s) &eacute; a linguagem de marca&ccedil;&atilde;o mais utilizada para criar aplica&ccedil;&otilde;es e p&aacute;ginas na web. Ela &eacute; composta de elementos predefinidos e de tags para rotular pe&ccedil;as de conte&uacute;do e descrever a estrutura das p&aacute;ginas. Neste artigo, vamos explicar o que &eacute; o HTML5, explicar [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/diferenca-entre-html-e-html5\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":26020,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"O Que \u00e9 HTML5 e Quais Vantagens ele Traz para seu Site","rank_math_description":"Quer saber tudo o que o HTML5 traz de novo em compara\u00e7\u00e3o com as vers\u00f5es anteriores do HTML? Ent\u00e3o vem que a gente te conta tudo!","rank_math_focus_keyword":"HTML5","footnotes":""},"categories":[4928],"tags":[4842,4809,5200,4889,5050,4849,4823],"class_list":["post-4607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-blog","tag-html","tag-html-cores","tag-html5","tag-internet","tag-site","tag-website"],"hreflangs":[{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/diferenca-entre-html-e-html5","default":1},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/diferenca-entre-html-e-html5","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=4607"}],"version-history":[{"count":42,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4607\/revisions"}],"predecessor-version":[{"id":41212,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4607\/revisions\/41212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media\/26020"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=4607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=4607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=4607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}