{"id":3889,"date":"2023-06-10T18:07:13","date_gmt":"2023-06-10T21:07:13","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3889"},"modified":"2023-06-10T18:15:20","modified_gmt":"2023-06-10T21:15:20","slug":"html5","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/","title":{"rendered":"HTML5: suas novidades e atualiza\u00e7\u00f5es"},"content":{"rendered":"\n<figure class=\"wp-block-image aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/html5-bg.png\" alt=\"\" class=\"wp-image-8336\" width=\"500\" height=\"500\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/html5-bg.png 500w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/html5-bg-300x300.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/html5-bg-150x150.png 150w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Como_surgiu_o_HTML5\" title=\"Como surgiu o HTML5 ?\">Como surgiu o HTML5 ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#As_principais_novidades_do_HTML5\" title=\"As principais novidades do HTML5\">As principais novidades do HTML5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#As_8_areas_que_contemplam_as_novidades_do_HTML5\" title=\"As 8 \u00e1reas que contemplam as novidades do HTML5\">As 8 \u00e1reas que contemplam as novidades do HTML5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Criando_um_pagina_em_HTML5\" title=\"Criando um p\u00e1gina em HTML5\">Criando um p\u00e1gina em HTML5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#A_semantica_do_HTML5\" title=\"A sem\u00e2ntica do HTML5\">A sem\u00e2ntica do HTML5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Elemento\" title=\"Elemento &lt;header&gt;\">Elemento &lt;header&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Elemento-2\" title=\"Elemento &lt;section&gt;\">Elemento &lt;section&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Elemento-3\" title=\"Elemento &lt;article&gt;\">Elemento &lt;article&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#ou\" title=\"&lt;section&gt; ou &lt;article&gt;?\">&lt;section&gt; ou &lt;article&gt;?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Elemento-4\" title=\"Elemento &lt;main&gt;\">Elemento &lt;main&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#O_elemento\" title=\"O elemento &lt;footer&gt;\">O elemento &lt;footer&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Elemento-5\" title=\"Elemento &lt;aside&gt;\">Elemento &lt;aside&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Elemento-6\" title=\"Elemento &lt;nav&gt;\">Elemento &lt;nav&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Outros_elementos_semanticos_do_HTML5\" title=\"Outros elementos sem\u00e2nticos do HTML5\">Outros elementos sem\u00e2nticos do HTML5<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Principais_tags_de_multimidia_do_HTML5\" title=\"Principais tags de multim\u00eddia do HTML5\">Principais tags de multim\u00eddia do HTML5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#A_tag\" title=\"A tag &lt;img&gt;\">A tag &lt;img&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#As_tags_e\" title=\"As tags &lt;video&gt;&nbsp;e &lt;audio&gt;\">As tags &lt;video&gt;&nbsp;e &lt;audio&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#i\" title=\"&lt;iframe&gt;\">&lt;iframe&gt;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#HTML5_e_os_elementos_e\" title=\"HTML5 e os elementos &lt;canvas&gt; e &lt;svg&gt;\">HTML5 e os elementos &lt;canvas&gt; e &lt;svg&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#Aprofundando_seus_estudos_em_HTML5\" title=\"Aprofundando seus estudos em HTML5\">Aprofundando seus estudos em HTML5<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_surgiu_o_HTML5\"><\/span>Como surgiu o HTML5 ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O HTML5 surgiu em 2014 com grandes mudan\u00e7as e atualiza\u00e7\u00f5es na linguagem de marca\u00e7\u00e3o mais utilizada no mundo inteiro. O HTML , criado por <a href=\"https:\/\/www.techtudo.com.br\/tudo-sobre\/tim-berners-lee\/\">Tim Berners Lee<\/a>, surgiu em 1991 e logo se popularizou, por ser a principal linguagem utilizada na web. Hoje ela \u00e9 considerar um dos padr\u00f5es web supervisionada e controlada pela <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C (<i>The World Wide Web Consortium)<\/i><\/a><i> .<\/i><\/p>\n\n\n\n<p>Desde 1999 o HTML n\u00e3o recebia uma grande atualiza\u00e7\u00e3o. O HTML 4 estagnou de forma que j\u00e1 n\u00e3o conseguia atender a todas necessidades do mercado. Portanto, era necess\u00e1rio&nbsp;integrar plugins externos, como o <em>flashplayer,<\/em> para poder garantir as novas funcionalidades.<\/p>\n\n\n\n<p>Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de grandes empresas como Mozilla, Apple e Opera. A partir desse momento, teve in\u00edcio o trabalho de cria\u00e7\u00e3o da nova vers\u00e3o do HTML. Em 2008 foi lan\u00e7ada uma vers\u00e3o beta, por\u00e9m, s\u00f3 mais tarde seria lan\u00e7ada a nova vers\u00e3o definitiva: o <strong>HTML5<\/strong>.<\/p>\n\n\n\n<p>Neste tutorial, vamos explicar as principais inova\u00e7\u00f5es que surgiram com o HTML5 e os novos padr\u00f5es da web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-as-principais-novidades-do-html5\"><span class=\"ez-toc-section\" id=\"As_principais_novidades_do_HTML5\"><\/span>As principais novidades do HTML5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A vers\u00e3o 5 do <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\">HTML<\/a> foi desenvolvida para aperfei\u00e7oar a experi\u00eancia da <i>World Wide Web<\/i> para os desenvolvedores e usu\u00e1rios finais, o que trouxe grandes avan\u00e7os para a linguagem HTML.<\/p>\n\n\n\n<p>O HTML 5 fornece o suporte de \u00e1udio e v\u00eddeo em alto n\u00edvel que, at\u00e9 ent\u00e3o, n\u00e3o existia nas vers\u00f5es anteriores sem o uso de plugins. Essa nova vers\u00e3o tamb\u00e9m nasceu com uma proposta marcante: ela n\u00e3o \u00e9 uma vers\u00e3o final, ou seja, seguir\u00e1 recebendo atualiza\u00e7\u00f5es ao longo do tempo.<\/p>\n\n\n\n<p>No HTML5, surgiram novos recursos para suporte gr\u00e1fico 2D e 3D, como a ado\u00e7\u00e3o do Canvas. Houve tamb\u00e9m grandes melhorias a respeito da conectividade com o servidor. Al\u00e9m disso, tamb\u00e9m houve novidades quanto a trabalhar com armazenamento de dados e opera\u00e7\u00f5es offline. Portanto, s\u00f3 com essas novidades, j\u00e1 \u00e9 poss\u00edvel perceber o quanto o HTML5 veio com o objetivo de transformar, simplificar e aperfei\u00e7oar a forma de desenvolvimento das p\u00e1ginas. J\u00e1 se percebe essa caracter\u00edstica atrav\u00e9s da simples declara\u00e7\u00e3o doHTML5, o <strong>&lt;!DOCTYPE<\/strong><span class=\"attributecolor\">&nbsp;<strong>html<\/strong><\/span><span class=\"tagcolor\"><strong>&gt;<\/strong>.<\/span><\/p>\n\n\n\n<p>Outra grande mudan\u00e7a com o HTML5 foi a inser\u00e7\u00e3o de tags espec\u00edficas para se\u00e7\u00f5es comuns \u00e0 maioria dos sites, como rodap\u00e9s, cabe\u00e7alhos, menus, artigos, etc. Essa mudan\u00e7a trouxe uma forma sem\u00e2ntica de se trabalhar com a linguagem. Assim passou a ser poss\u00edvel a cria\u00e7\u00e3o de c\u00f3digos prontos para futuros dispositivos de forma facilitada. Portanto, esta vers\u00e3o possibilitou diversas funcionalidades que at\u00e9 ent\u00e3o, s\u00f3 eram poss\u00edveis atrav\u00e9s de plugins, e de uma forma que n\u00e3o sobrecarregue a p\u00e1gina, mantendo-a leve e r\u00e1pida.<\/p>\n\n\n\n<p>A rela\u00e7\u00e3o entre o HTML5 e o CSS tamb\u00e9m \u00e9 uma das caracter\u00edsticas que possibilitou um avan\u00e7o na estiliza\u00e7\u00e3o das p\u00e1ginas. O HTML5 traz total suporte para o CSS, facilitando o uso das <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-css\/\">folhas de estilo em cascata<\/a>. Outra caracter\u00edstica importante do HTML5 \u00e9 que sua sintaxe mant\u00e9m total compatibilidade com o HTML4 e XHTML. O Google, inclusive, valoriza sites atualizados para HTML5 nos resultados de buscas. Dessa forma, isso ajudar\u00e1 seu <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/seo-marketing-20-dicas-subir-no-google\/\">SEO<\/a>.<br><a name=\"topico02\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-as-8-areas-que-contemplam-as-novidades-do-html5\"><span class=\"ez-toc-section\" id=\"As_8_areas_que_contemplam_as_novidades_do_HTML5\"><\/span>As 8 \u00e1reas que contemplam as novidades do HTML5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Conforme mencionamos anteriormente, o HTML5 trouxe uma nova forma de se <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-basico\/\">desenvolver para a web<\/a>, facilitando a utiliza\u00e7\u00e3o de muitos recursos que antes s\u00f3 eram poss\u00edveis aplicar atrav\u00e9s de plugins. Em seu surgimento, O W3C dividiu as novidades em oito \u00e1reas tecnol\u00f3gicas, facilitando na homologa\u00e7\u00e3o do padr\u00e3o e suporte aos fabricantes. Estas \u00e1reas s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sem\u00e2ntica<\/strong>: Com as novas tags de estrutura, \u00e9 poss\u00edvel especificar ao navegador o conte\u00fado contido na se\u00e7\u00e3o. Dessa forma, facilita muito a maneira de desenvolver os documentos HTML. Tamb\u00e9m \u00e9 um mecanismo muito \u00fatil para os mecanismos de busca, sendo muito bem aproveitado para <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/seo-marketing-20-dicas-subir-no-google\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO;<\/a><\/li>\n\n\n\n<li><strong>Conectividade<\/strong>: Grandes avan\u00e7os na comunica\u00e7\u00e3o com o servidor de formas modernas e inovadoras. Por exemplo, permite melhor comunica\u00e7\u00e3o usando WebSockets e SSE (Server Side Events);<\/li>\n\n\n\n<li><strong>Armazenamento de dados e dados offline<\/strong>: Melhorou a forma de lidar com armazenamento de dados local, al\u00e9m de permitir que as p\u00e1ginas sejam armazenadas no local do cliente. Dessa forma, permite ainda que a p\u00e1gina seja renderizada mesmo estando desconectado (offline);<\/li>\n\n\n\n<li><strong>Multim\u00eddia<\/strong>: Viabiliza a utiliza\u00e7\u00e3o de \u00e1udio, v\u00eddeos e iframes sem a necessidade de plugins externos, al\u00e9m de otimizar esses recursos;<\/li>\n\n\n\n<li><strong>Gr\u00e1ficos e efeitos 2D\/3D<\/strong>: Possibilita um leque de op\u00e7\u00f5es atrav\u00e9s de efeitos gr\u00e1ficos.<\/li>\n\n\n\n<li><strong>Performance e integra\u00e7\u00e3o<\/strong>: O HTML5 traz melhor performance de velocidade, al\u00e9m de fornecer melhor utiliza\u00e7\u00e3o do hardware do computador;<\/li>\n\n\n\n<li><strong>Acesso ao dispositivo<\/strong>: Viabiliza a utiliza\u00e7\u00e3o de diversos m\u00e9todos e dispositivos de entrada e sa\u00edda. Al\u00e9m disso, tem tamb\u00e9m a integra\u00e7\u00e3o com diversas APIs que estendem funcionalidades para diversos dispositivos m\u00f3veis. Dentre elas, uso de geolocaliza\u00e7\u00e3o, uso de aceler\u00f4metro, o uso do microfone e c\u00e2mera destes dispositivos, al\u00e9m de eventos espec\u00edficos para telas sens\u00edveis ao toque;<\/li>\n\n\n\n<li><strong>Estiliza\u00e7\u00e3o<\/strong>: Associado ao <strong>CSS3<\/strong>, permite o desenvolvimento de temas mais sofisticados.<\/li>\n<\/ul>\n\n\n\n<p><a name=\"topico03\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-criando-um-pagina-em-html5\"><span class=\"ez-toc-section\" id=\"Criando_um_pagina_em_HTML5\"><\/span>Criando um p\u00e1gina em HTML5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>No HTML5, podemos iniciar uma p\u00e1gina apenas definindo o <strong>&lt;!DOCTYPE html&gt;<\/strong>. Ap\u00f3s isso, inserimos ent\u00e3o a tag <strong>&lt;html&gt;<\/strong> onde ficar\u00e1 todo o conte\u00fado de nossa p\u00e1gina. Inclu\u00edmos em seguida o <strong>&lt;head&gt;<\/strong>, que conter\u00e1 todas as informa\u00e7\u00f5es de base que n\u00e3o ser\u00e3o renderizadas do nosso site, como metadados e outros. Depois inclu\u00edmos a tag <strong>&lt;body&gt;<\/strong> onde conter\u00e1 o corpo da p\u00e1gina, ou seja, o que ser\u00e1 renderizado pelo navegador. Dessa forma, podemos incluir diversas tags no nosso documento.<\/p>\n\n\n\n<p>Tamb\u00e9m \u00e9 importante definir o padr\u00e3o de caracteres (charset) , que no HTML5 \u00e9 muito f\u00e1cil, bastando incluir o seguinte c\u00f3digo ao <strong>&lt;head&gt;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta&nbsp;charset=\"UTF-8\"&gt;<\/pre>\n\n\n\n<p>Neste artigo vamos abordar as principais tags sem\u00e2nticas do HTML5, assim como as principais tags de multim\u00eddia. Voc\u00ea pode ainda ler mais a respeito das tags no nosso <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">artigo sobre tags HTML<\/a>.<\/p>\n\n\n\n<p>Veja um exemplo de uma estrutura b\u00e1sica de uma p\u00e1gina em HTML5 j\u00e1 com tags sem\u00e2nticas:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Minha p\u00e1gina HTML5&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;&lt;!--defini\u00e7\u00e3 do padr\u00e3o de caracteres--&gt;\n    &lt;style&gt;\n        \/*AQUI VAI TODO NOSSO C\u00d3DIGO CSS*\/\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;header&gt;&lt;!--criando um cabe\u00e7alho para nossa p\u00e1gina com um menu--&gt;\n    &lt;h2&gt;Minha P\u00e1gina em HTML5&lt;\/h2&gt;\n    &lt;nav&gt;&lt;!--vamos criar um menu utilizando listas--&gt;\n        &lt;a href=\"#home\"&gt;P\u00e1gina Inicial&lt;\/a&gt;\n        &lt;a href=\"#artigo1\"&gt;Artigo 1&lt;\/a&gt;\n        &lt;a href=\"#artigo2\"&gt;Artigo 2&lt;\/a&gt;\n        &lt;a href=\"\/contato\/\"&gt;Contato&lt;\/a&gt;\n    &lt;\/nav&gt;&lt;!--aqui finaliza o meu menu--&gt;\n&lt;\/header&gt;\n&lt;main&gt;    \n    &lt;section&gt;&lt;!--vamos criar a primeira section do meu documento--&gt;\n        &lt;article&gt;\n            &lt;h3&gt;Titulo do meu artigo&lt;\/h3&gt;\n            &lt;p&gt;Conteudo do meu artigo&lt;\/p&gt;\n            &lt;p&gt;Mais conte\u00fado para o meu artigo&lt;\/p&gt;\n            &lt;ol&gt;&lt;!--vamos criar uma lista ordenada--&gt;\n                &lt;li&gt;item 1&lt;\/li&gt;\n                &lt;li&gt;item 2&lt;\/li&gt;\n                &lt;li&gt;item 3&lt;\/li&gt;\n            &lt;\/ol&gt;\n        &lt;\/article&gt;&lt;!-- aqui finaliza meu primeiro artigo da section--&gt;\n        &lt;article&gt;\n            &lt;h3&gt;Titulo do meu segundo artigo&lt;\/h3&gt;\n            &lt;p&gt;Conteudo do meu segundo artigo&lt;\/p&gt;\n            &lt;p&gt;Mais conte\u00fado para o meu segundo artigo&lt;\/p&gt;        \n        &lt;\/article&gt;&lt;!--aqui finaliza meu segundo artigo da section--&gt;\n&lt;\/section&gt;&lt;!--aqui encerra a primeira section do meu documento--&gt;\n&lt;\/main&gt;&lt;!--aqui finaliza todo conte\u00fado principal do corpo da pagina--&gt;\n\n&lt;aside&gt;\n    &lt;h4&gt;Conte\u00fados relacionados&lt;\/h4&gt;\n    &lt;a href=\"\/artigo1\/\"&gt;Artigo 1&lt;\/a&gt;\n    &lt;a href=\"\/artigo2\/\"&gt;Artigo 2&lt;\/a&gt;\n    &lt;a href=\"\/artigo3\/\"&gt;Artigo 3&lt;\/a&gt;\n&lt;\/aside&gt;\n\n&lt;footer&gt;\n    &lt;h3&gt;Minha primeira <a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html-redirect\/\">p\u00e1gina html&lt;\/h3&gt;<\/a>\n    &lt;p&gt;Todos os direitos reservados&lt;\/p&gt;\n\n&lt;\/footer&gt;\n\n&lt;script&gt;\n    \/\/AQUI VAI NOSSO C\u00d3DIGO DE SCRIPT (JAVASCRIPT)\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p><a name=\"topico04\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-a-semantica-do-html5\"><span class=\"ez-toc-section\" id=\"A_semantica_do_HTML5\"><\/span>A sem\u00e2ntica do HTML5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O termo sem\u00e2ntica representa o significado de uma palavra ou frase em uma linguagem. Dessa forma, o HTML5 adota a sem\u00e2ntica trazendo maior significado a suas se\u00e7\u00f5es. Ou seja, com as novas <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tags<\/a>, \u00e9 poss\u00edvel inserir se\u00e7\u00f5es que possuem um valor sem\u00e2ntico, um significado, j\u00e1 predefinido. Isso auxilia <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/seo-marketing-20-dicas-subir-no-google\/\" target=\"_blank\" rel=\"noopener noreferrer\">os mecanismos de busca<\/a>, al\u00e9m de facilitar no desenvolvimento da p\u00e1gina e tamb\u00e9m na identifica\u00e7\u00e3o do conte\u00fado por parte do usu\u00e1rio.<\/p>\n\n\n\n<p>Quando utilizamos uma <strong>&lt;div&gt;<\/strong>, n\u00e3o tem como identificarmos de fato o seu conte\u00fado, portanto, essa \u00e9 uma tag n\u00e3o sem\u00e2ntica. Mas se utilizarmos uma tag <strong>&lt;header&gt;<\/strong>, j\u00e1 sabemos que o conte\u00fado representa um cabe\u00e7alho, portanto \u00e9 uma tag com valor sem\u00e2ntico. Com isso, vamos estudar agora as principais tags sem\u00e2nticas do HTML5:<br><a name=\"topico05\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elemento-header\"><span class=\"ez-toc-section\" id=\"Elemento\"><\/span>Elemento &lt;header&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A tag <strong>&lt;header&gt;<\/strong> significa cabe\u00e7alho, e representa que todo seu conte\u00fado ser\u00e1 parte do cabe\u00e7alho da se\u00e7\u00e3o. \u00c9 muito utilizada para inserir o conte\u00fado inicial de uma p\u00e1gina, geralmente contendo uma logo e um menu. Veja o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;header&gt;\n  &lt;div class=\"logo\"&gt;\n    &lt;h1&gt;Minha p\u00e1gina&lt;\/h1&gt;\n    &lt;img src=\"logo.jpg\"\/&gt;\n  &lt;\/div&gt;\n  &lt;nav&gt;\n    &lt;ul&gt;\n      &lt;li&gt;Home&lt;\/li&gt;\n      &lt;li&gt;Sobre&lt;\/li&gt;\n      &lt;li&gt;Contato&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&gt;\n&lt;\/header&gt;<\/pre>\n\n\n\n<p>Neste exemplo, inclu\u00edmos uma logo, com um t\u00edtulo da p\u00e1gina e posteriormente utilizamos uma tag <strong>&lt;nav&gt; <\/strong>(cuja utiliza\u00e7\u00e3o explicaremos posteriormente) para incluir a estrutura de um menu atrav\u00e9s de listas.<\/p>\n\n\n\n<p>Por\u00e9m, tamb\u00e9m pode ser utilizado dentro das se\u00e7\u00f5es do conte\u00fado, como uma postagem de blog. Dessa forma, o <strong>&lt;header&gt;<\/strong> servir\u00e1 para especificar o cabe\u00e7alho daquela postagem, geralmente contendo um t\u00edtulo e uma descri\u00e7\u00e3o introdut\u00f3ria. Veja o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;section&gt;\n    &lt;header&gt;\n        &lt;h2&gt;Minha postagem do Blog&lt;\/h2&gt;\n        &lt;p&gt;Resumo ou introdu\u00e7\u00e3o a essa postagem&lt;\/p&gt;\n    &lt;\/header&gt;\n    &lt;article&gt;\n        &lt;!--CONTEUDO--&gt;\n        &lt;!--CONTEUDO--&gt;\n        &lt;!--CONTEUDO--&gt;\n    &lt;\/article&gt;\n&lt;\/section&gt;<\/pre>\n\n\n\n<p><a name=\"topico06\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elemento-section\"><span class=\"ez-toc-section\" id=\"Elemento-2\"><\/span>Elemento &lt;section&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>O elemento <strong>&lt;section&gt;<\/strong> define uma se\u00e7\u00e3o do documento.&nbsp; De acordo com a documenta\u00e7\u00e3o HTML5 do <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C<\/a>: &#8220;<em>Uma se\u00e7\u00e3o \u00e9 um agrupamento tem\u00e1tico de conte\u00fado<\/em>&#8220;.<\/p>\n\n\n\n<p>Diante disso, uma se\u00e7\u00e3o pode ser entendida como um agrupamento de um determinado conte\u00fado. Por exemplo, uma p\u00e1gina de uma empresa que possua as seguintes divis\u00f5es: uma introdu\u00e7\u00e3o, servi\u00e7os que a empresa realiza, informa\u00e7\u00f5es sobre a empresa, depoimentos e contato. Dessa forma, podemos incluir, para cada uma dessas divis\u00f5es uma se\u00e7\u00e3o. Cada se\u00e7\u00e3o ter\u00e1 o seu objetivo. Isso facilita muito na hora de desenvolver uma p\u00e1gina HTML, pois permite dividir seu conte\u00fado adequadamente, mantendo um valor sem\u00e2ntico.<\/p>\n\n\n\n<p>Vejamos o exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;body&gt;\n    &lt;section&gt;\n        &lt;h1&gt;Minha primeira se\u00e7\u00e3o&lt;\/h1&gt;\n        &lt;p&gt;Conte\u00fado da minha se\u00e7\u00e3o&lt;\/p&gt;\n    &lt;\/section&gt;\n\n    &lt;section&gt;\n        &lt;h1&gt;Minha segunda se\u00e7\u00e3o&lt;\/h1&gt;\n        &lt;p&gt;Conte\u00fado da minha se\u00e7\u00e3o&lt;\/p&gt;\n    &lt;\/section&gt;\n&lt;\/body&gt;<\/pre>\n\n\n\n<p><a name=\"topico07\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elemento-article\"><span class=\"ez-toc-section\" id=\"Elemento-3\"><\/span>Elemento &lt;article&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>O elemento <strong>&lt;article&gt;<\/strong> define um artigo dentro do seu documento. \u00c9 uma divis\u00e3o de conte\u00fado independente, ou seja, de conte\u00fado especifico completo. Um artigo deve fazer sentido por si s\u00f3, de forma que seu conte\u00fado possa ser lido independentemente do restante da p\u00e1gina. Geralmente, seu conte\u00fado consiste em texto e conte\u00fado gr\u00e1fico e de multim\u00eddia que complementem esse texto.<\/p>\n\n\n\n<p>Exemplos de onde um elemento <strong>&lt;article&gt;<\/strong> pode ser usado:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Postagem no f\u00f3rum<\/li>\n\n\n\n<li>Postagem no blog<\/li>\n\n\n\n<li>Artigo de jornal<\/li>\n<\/ul>\n\n\n\n<p>Dessa forma, veja o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;body&gt;\n    &lt;article&gt;\n        &lt;h1&gt;T\u00edtulo do meu Artigo&lt;\/h1&gt;\n        &lt;p&gt;Conte\u00fado do meu artigo&lt;\/p&gt;\n        &lt;p&gt;Conte\u00fado do meu artigo&lt;\/p&gt;\n        &lt;p&gt;Conte\u00fado do meu artigo&lt;\/p&gt;\n    &lt;\/article&gt;\n&lt;\/body&gt;<\/pre>\n\n\n\n<p>Sua defini\u00e7\u00e3o pode confundir-se com a utiliza\u00e7\u00e3o do elemento <strong>&lt;section&gt;<\/strong>, por isso, preparamos um t\u00f3pico espec\u00edfico para explicar essa rela\u00e7\u00e3o:<br><a name=\"topico08\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-section-ou-article\"><span class=\"ez-toc-section\" id=\"ou\"><\/span>&lt;section&gt; ou &lt;article&gt;?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vimos anteriormente que elemento <strong>&lt;article&gt;<\/strong> especifica conte\u00fado independente e completo por si s\u00f3. J\u00e1 o elemento <strong>&lt;section&gt;<\/strong> define se\u00e7\u00e3o em um documento HTML5. Por\u00e9m, ainda existem uma grande confus\u00e3o por parte das pessoas e desenvolvedores sobre como utiliz\u00e1-las. Basicamente, podemos perceber que \u00e9 poss\u00edvel aninhar sections dentro de articles e vice versa. O que vai definir isso \u00e9 o conte\u00fado incluso dentro de cada uma. Para decidir entre qual delas utilizar, vale a pena se perguntar: se eu extrair esse elemento do seu contexto, ele continuar\u00e1 fazendo sentido? Se sim, tudo indica que \u00e9 um <strong>&lt;article&gt;<\/strong>.&nbsp;se n\u00e3o, \u00e9 poss\u00edvel que seja um <strong>&lt;section&gt;<\/strong>.<\/p>\n\n\n\n<p>Vejamos um exemplo de uma galeria de fotos com legendas explicando a foto. Podemos dizer que cada foto pertence a uma se\u00e7\u00e3o, e a legenda pertence a um artigo sobre a foto. Ou seja, teremos na estrutura algo como:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;section&gt;\n  &lt;img src=\"exemplo.jpg\"&gt;\n  &lt;article&gt;\n    &lt;h1&gt;Minha imagem&lt;h1&gt;\n    &lt;p&gt;Descri\u00e7\u00e3o da minha imagem&lt;\/p&gt;\n  &lt;\/article&gt;\n&lt;\/section&gt;<\/pre>\n\n\n\n<p>Outro exemplo disso: em uma p\u00e1gina de jornal, possu\u00edmos a se\u00e7\u00e3o esportes, e dentro dessa se\u00e7\u00e3o, encontramos ent\u00e3o os artigos referentes a esportes.<\/p>\n\n\n\n<p>Vejamos agora a situa\u00e7\u00e3o de aninhamento de <strong>&lt;section&gt;<\/strong> dentro do <strong>&lt;article&gt;<\/strong>. Esse exemplo \u00e9 muito utilizado para postagens de blogs, onde a postagem deve ser independente por si s\u00f3, ou seja, um artigo. Por\u00e9m dentro dela, podemos conter algumas se\u00e7\u00f5es: introdu\u00e7\u00e3o, conte\u00fado 1, conte\u00fado 2, conclus\u00e3o. Essas se\u00e7\u00f5es s\u00e3o dependentes de outras se\u00e7\u00f5es para sua compreens\u00e3o, ou seja, dependem de todo o contexto para serem totalmente compreendidas. Portanto, a estrutura ficaria parecida com:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;article&gt;\n    &lt;h1&gt;T\u00edtulo do meu artigo&lt;\/h1&gt;\n    &lt;section&gt;\n        &lt;p&gt;Introdu\u00e7\u00e3o&lt;\/p&gt;\n        &lt;p&gt;texto&lt;\/p&gt;\n    &lt;\/section&gt;\n    &lt;section&gt;\n        &lt;p&gt;conte\u00fado 1&lt;\/p&gt;\n        &lt;p&gt;conte\u00fado 1&lt;\/p&gt;\n        &lt;p&gt;conte\u00fado 1&lt;\/p&gt;\n    &lt;\/section&gt;\n    &lt;section&gt;\n        &lt;p&gt;conte\u00fado 2&lt;\/p&gt;\n        &lt;p&gt;conte\u00fado 2&lt;\/p&gt;\n    &lt;\/section&gt;\n    &lt;section&gt;\n        &lt;p&gt;Conclus\u00e3o&lt;\/p&gt;\n    &lt;\/section&gt;\n        \n&lt;\/article&gt;<\/pre>\n\n\n\n<p><a name=\"topico09\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elemento-main\"><span class=\"ez-toc-section\" id=\"Elemento-4\"><\/span>Elemento &lt;main&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Define o conte\u00fado principal e exclusivo da p\u00e1gina. O conte\u00fado dentro do elemento <strong>&lt;main&gt;<\/strong> deve ser exclusivo para o documento. Ele n\u00e3o deve conter nenhum conte\u00fado que seja repetido em documentos como barras laterais, links de navega\u00e7\u00e3o, informa\u00e7\u00f5es de direitos autorais, logotipos de sites e formul\u00e1rios de pesquisa. Por exemplo: se voc\u00ea tiver uma barra de navega\u00e7\u00e3o que aparecer\u00e1 na lateral de todas as p\u00e1ginas do seu site, a mesma n\u00e3o deve ser inclusa no elemento <strong>&lt;main&gt;<\/strong>. Por\u00e9m, se voc\u00ea tem uma se\u00e7\u00e3o que s\u00f3 aparecer\u00e1 na p\u00e1gina inicial, a mesma pode e deve estar inclusa no elemento <strong>&lt;main&gt;<\/strong>.<\/p>\n\n\n\n<p>O elemento <strong>&lt;main&gt;&nbsp;<\/strong>\u00e9 um elemento principal, portanto, n\u00e3o deve ser aninhado dentro de header, footer, sections, articles ou outros. Deve pertencer ao body. Muitas p\u00e1ginas costumam utilizar como estrutura padr\u00e3o a seguinte hierarquia:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;body&gt;\n    &lt;header&gt;\n        ...   \n    &lt;\/header&gt;\n    \n    &lt;main&gt;\n        &lt;section&gt;\n            ...\n        &lt;\/section&gt;\n        &lt;section&gt;\n            ...\n        &lt;\/section&gt;\n    &lt;\/main&gt;\n\n    &lt;footer&gt;\n        ...\n    &lt;\/footer&gt;\n&lt;\/body&gt;<\/pre>\n\n\n\n<p><a name=\"topico10\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-o-elemento-footer\"><span class=\"ez-toc-section\" id=\"O_elemento\"><\/span>O elemento &lt;footer&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Este elemento representa o rodap\u00e9, o conte\u00fado final de um documento HTML5. Assim como o <strong>&lt;header&gt;<\/strong>, pode ser utilizado aninhado a outros elementos. Geralmente, dentro do elemento <strong>&lt;body&gt;<\/strong> \u00e9 utilizado um <strong>&lt;footer&gt;<\/strong> para definir o rodap\u00e9 da p\u00e1gina.<\/p>\n\n\n\n<p>\u00c9 muito comum incluir no rodap\u00e9 um mapa do site, ou ainda informa\u00e7\u00f5es como direitos autorais, termos de uso ou informa\u00e7\u00f5es de contato. Tamb\u00e9m e comum apresentar novamente o nome ou logo da p\u00e1gina.<\/p>\n\n\n\n<p>Vejamos o seguinte exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;body&gt;\n    ...\n\n    &lt;footer&gt;\n        &lt;img src=\"logo.png\"&gt;\n        &lt;p&gt;Endere\u00e7o: ...&lt;\/p&gt;\n        &lt;p&gt;Telefone:(XX)XXXX-XXXX&lt;\/p&gt;\n        &lt;p&gt;Todos os direitos reservados&lt;\/p&gt;\n    &lt;\/footer&gt;\n&lt;\/body&gt;<\/pre>\n\n\n\n<p><a name=\"topico11\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elemento-aside\"><span class=\"ez-toc-section\" id=\"Elemento-5\"><\/span>Elemento &lt;aside&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>O elemento <strong>&lt;aside&gt;<\/strong> define algum conte\u00fado al\u00e9m do conte\u00fado principal. O conte\u00fado de <strong>&lt;aside&gt;<\/strong> deve estar relacionado ao conte\u00fado do documento, por\u00e9m n\u00e3o ser o foco principal deste. \u00c9 muito utilizado para integrar uma barra lateraal, ou ainda uma se\u00e7\u00e3o de &#8220;saiba mais&#8221;, entre outros. Veja um exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;main&gt;\n  &lt;article&gt;\n    &lt;p&gt;Essa semana, eu e minha fam\u00edlia conhecemos a cidade de S\u00e3o Paulo.&lt;\/p&gt;\n  &lt;\/article&gt;\n&lt;\/main&gt;\n\n&lt;aside&gt;\n  &lt;h4&gt;S\u00e3o Paulo&lt;\/h4&gt;\n  &lt;p&gt;Capital do estado de S\u00e3o Paulo&lt;\/p&gt;\n&lt;\/aside&gt;<\/pre>\n\n\n\n<p><a name=\"topico12\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elemento-nav\"><span class=\"ez-toc-section\" id=\"Elemento-6\"><\/span>Elemento &lt;nav&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>O elemento <strong>&lt;nav&gt;<\/strong> representa uma barra de navega\u00e7\u00e3o, ou seja, algo como um menu. Portanto, \u00e9 muito utilizado para cria\u00e7\u00e3o do menu da p\u00e1gina, ou ainda para a cria\u00e7\u00e3o de lista de links, entre outros. Dessa forma, \u00e9 comum encontrarmos a tag <strong>&lt;nav&gt;<\/strong> aninhada a outros elementos, como o <strong>&lt;header&gt;<\/strong>,<strong>&lt;footer&gt;<\/strong> ou <strong>&lt;aside&gt;<\/strong>.<\/p>\n\n\n\n<p>Observe que nem todos os links de um documento HTML5 devem estar dentro deste elemento. Portanto, o elemento <strong>&lt;nav&gt;<\/strong> destina-se apenas ao bloco principal de links de navega\u00e7\u00e3o.<\/p>\n\n\n\n<p>Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;nav&gt;\n  &lt;a href=\"#home\"&gt;P\u00e1gina inicial&lt;\/a&gt;\n  &lt;a href=\"#sobre\"&gt;Sobre&lt;\/a&gt;\n  &lt;a href=\"#servicos\"&gt;Servi\u00e7os&lt;\/a&gt;\n  &lt;a href=\"#contato\"&gt;Entre em Contato&lt;\/a&gt;\n&lt;\/nav&gt;<\/pre>\n\n\n\n<p><a name=\"topico13\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-outros-elementos-semanticos-do-html5\"><span class=\"ez-toc-section\" id=\"Outros_elementos_semanticos_do_HTML5\"><\/span>Outros elementos sem\u00e2nticos do HTML5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Al\u00e9m dos elementos apresentados anteriormente, o HTML5 trouxe consigo diversos outros elementos com valores sem\u00e2nticos. Confira alguns deles na tabela abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>Elemento<\/th><th>Descri\u00e7\u00e3o<\/th><\/tr><tr><td><strong>&lt;details&gt;<\/strong><\/td><td>Define detalhes adicionais que o usu\u00e1rio pode visualizar ou ocultar<\/td><\/tr><tr><td><strong>&lt;figcaption&gt;<\/strong><\/td><td>Define uma legenda para o elemento <strong>&lt;figure&gt;<\/strong><\/td><\/tr><tr><td><strong>&lt;figure&gt;<\/strong><\/td><td>Especifica conte\u00fados como ilustra\u00e7\u00f5es e imagens, listagens de c\u00f3digos, fotografias, etc<\/td><\/tr><tr><td><strong>&lt;mark&gt;<\/strong><\/td><td>Define um texto marcado, real\u00e7ado<\/td><\/tr><tr><td><strong>&lt;summary&gt;<\/strong><\/td><td>Define um t\u00edtulo vis\u00edvel para o elemento <strong>&lt;details&gt;<\/strong><\/td><\/tr><tr><td><strong>&lt;time&gt;<\/strong><\/td><td>Define uma data ou hor\u00e1rio<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><a name=\"topico14\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-principais-tags-de-multimidia-do-html5\"><span class=\"ez-toc-section\" id=\"Principais_tags_de_multimidia_do_HTML5\"><\/span>Principais tags de multim\u00eddia do HTML5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Como mencionamos anteriormente, uma das principais atualiza\u00e7\u00f5es do HTML5 \u00e9 a possibilidade de incluir multim\u00eddias sem a necessidade de plugins externos. As tags de multim\u00eddia servem para incluir imagens, v\u00eddeos, \u00e1udios, iframes e outros tipos de conte\u00fado multim\u00eddia. Dentre as principais, est\u00e3o as tags <strong>&lt;img&gt;<\/strong>, <strong>&lt;video&gt;<\/strong>,<strong>&lt;audio&gt;<\/strong> e <strong>&lt;iframe&gt;<\/strong>. Vamos estud\u00e1-las:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-tag-img\"><span class=\"ez-toc-section\" id=\"A_tag\"><\/span><strong>A tag &lt;img&gt;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Essa tag n\u00e3o necessita de fechamento, serve para incluir uma imagem ao seu texto. A partir dessa tag, utilizamos o atributo <strong>src=&#8221;&#8230;&#8221;<\/strong> onde deve ser digitado o local em que a imagem se encontra. Tamb\u00e9m \u00e9 muito utilizado em conjunto com o atributo <strong>alt=&#8221;&#8230;&#8221;<\/strong> para definir o texto alternativo da imagem.<\/p>\n\n\n\n<p>Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;img src=\"imagens\/imagem1.jpg\" alt=\"imagem 1 da minha p\u00e1gina\"&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-as-tags-video-e-audio\"><span class=\"ez-toc-section\" id=\"As_tags_e\"><\/span><strong>As tags &lt;video&gt;<\/strong>&nbsp;e &lt;audio&gt;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A tag &lt;<strong>video&gt;<\/strong> serve para indicar a inser\u00e7\u00e3o de um v\u00eddeo. Com isso, devemos colocar alguns atributos dentro da tag para poder ativar o controle, a principal dela \u00e9 o <strong>controls.<\/strong> Posteriormente, inclu\u00edmos a tag <strong>&lt;source&gt;<\/strong> com os atributos <strong>src<\/strong> e <strong>type<\/strong>, que receber\u00e3o o local em que est\u00e1 o v\u00eddeo e o tipo do v\u00eddeo. Al\u00e9m isso, \u00e9 recomendado utilizar mais de um tipo de source do mesmo v\u00eddeo, para garantir maior possibilidade de compatibilidade com o navegador. Finalmente, podemos incluir uma mensagem que ser\u00e1 renderizada apenas se o navegador do usu\u00e1rio n\u00e3o suportar a tag video.<\/p>\n\n\n\n<p>Diante disso, vejamos os exemplos a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;video controls&gt;\n  &lt;source src=\"video.mp4\" type=\"video\/mp4\"&gt;\n  &lt;source src=\"video.ogg\" type=\"video\/ogg\"&gt;\n  Seu navegador n\u00e3o possui suporte para V\u00eddeos.\n&lt;\/video&gt;<\/pre>\n\n\n\n<p>A tag <strong>&lt;audio&gt;<\/strong> funciona da mesma forma que a tag &lt;<strong>video&gt;<\/strong>, portanto, utilizamos a tag <strong>&lt;source&gt;<\/strong> dentro dela. Vejamos o exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;audio controls&gt;\n  &lt;source src=\"musica.ogg\" type=\"audio\/ogg\"&gt;\n  &lt;source src=\"musica.mp3\" type=\"audio\/mpeg\"&gt;\n  Seu navegador n\u00e3o possui suporte para \u00e1udio.\n&lt;\/audio&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-iframe\"><span class=\"ez-toc-section\" id=\"i\"><\/span><strong>&lt;iframe&gt;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Os iframes s\u00e3o muito utilizados na atualidade, servem para incluir recursos de uma outra p\u00e1gina dentro da sua p\u00e1gina. Por isso, vale a pena conferir o exemplo da <a href=\"https:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_iframe\" target=\"_blank\" rel=\"noopener noreferrer\">W3C Schools<\/a>, p\u00e1gina de tutorias pertencente ao grupo W3C, a organiza\u00e7\u00e3o atualmente respons\u00e1vel pelos padr\u00f5es da web.<\/p>\n\n\n\n<p>Portanto, para inserir um iframe, basta utilizar a tag com o atributo <strong>src<\/strong>. Al\u00e9m disso, \u00e9 poss\u00edvel incluir um texto dentro do elemento, caso o navegador do usu\u00e1rio n\u00e3o possua suporte para tal. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;iframe src=\"https:\/\/www.homehost.com.br\"&gt;\n  &lt;p&gt;Seu navegador n\u00e3o possui suporte para iFrames.&lt;\/p&gt;\n&lt;\/iframe&gt;<\/pre>\n\n\n\n<p><a name=\"topico15\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html5-e-os-elementos-canvas-e-svg\"><span class=\"ez-toc-section\" id=\"HTML5_e_os_elementos_e\"><\/span>HTML5 e os elementos &lt;canvas&gt; e &lt;svg&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Com tudo que foi explicado nesse artigo, voc\u00ea j\u00e1 ser\u00e1 capaz de entender a sem\u00e2ntica completa do HTML5, suas principais funcionalidades e ainda conseguir\u00e1 criar p\u00e1ginas completas. Por\u00e9m, o HTML5, conforme mencionado no inicio desse artigo, trouxe diversas funcionalidades.<\/p>\n\n\n\n<p>Uma funcionalidade muito \u00fatil \u00e9 poss\u00edvel atrav\u00e9s da tag <strong>&lt;canvas&gt;<\/strong> e da tag <strong>&lt;svg&gt;<\/strong>. Essa tags permitem a inser\u00e7\u00e3o e manipula\u00e7\u00e3o, at\u00e9 mesmo, cria\u00e7\u00e3o de anima\u00e7\u00f5es, atrav\u00e9s do <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/caracteres-especiais-acentos-html\/\">c\u00f3digo HTML<\/a> sem a utiliza\u00e7\u00e3o de plugins externos.<\/p>\n\n\n\n<p>A tag <strong>&lt;canvas&gt;<\/strong> permite a inser\u00e7\u00e3o de gr\u00e1ficos atrav\u00e9s de script (geralmente utilizando JavaScript). Voc\u00ea pode estudar mais a respeito sobre na documenta\u00e7\u00e3o oficial da <a href=\"https:\/\/www.w3schools.com\/tags\/tag_canvas.asp\" target=\"_blank\" rel=\"noopener noreferrer\">W3C Schools sobre canvas<\/a>.<\/p>\n\n\n\n<p>J\u00e1 a tag <strong>&lt;svg&gt;<\/strong> permite a incluir um <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/\">c\u00f3digo diretamente no HTML<\/a> que resultar\u00e1 em uma renderiza\u00e7\u00e3o vetorial. Diferentemente do canvas, n\u00e3o \u00e9 necess\u00e1rio a utiliza\u00e7\u00e3o de scripts, e todo o c\u00f3digo \u00e9 feito diretamente no <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-css\/\">HTML e estilizado no CSS<\/a>. Voc\u00ea pode ler mais a respeito na documenta\u00e7\u00e3o oficial da <a href=\"https:\/\/www.w3schools.com\/tags\/tag_svg.asp\" target=\"_blank\" rel=\"noopener noreferrer\">W3C Schools sobre a tag svg.<\/a><br><a name=\"topico16\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-aprofundando-seus-estudos-em-html5\"><span class=\"ez-toc-section\" id=\"Aprofundando_seus_estudos_em_HTML5\"><\/span>Aprofundando seus estudos em HTML5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Esse artigo j\u00e1 traz conte\u00fado suficiente para voc\u00ea entender melhor as principais novidades do HTML5, como funciona a sem\u00e2ntica, assim como seus principais elementos. Portanto, com esta leitura, voc\u00ea j\u00e1 ser\u00e1 capaz de criar suas pr\u00f3prias p\u00e1ginas HTML5. Tamb\u00e9m recomendamos a leitura de outras publica\u00e7\u00f5es do nosso blog, como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tags HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Links HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tabelas HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-img\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagens em HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/checkbox-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Checkbox em HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">O que \u00e9 HTML<\/a><\/li>\n<\/ul>\n\n\n\n<p>Al\u00e9m disso, tamb\u00e9m recomendamos os seguintes links para estudo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/html\/html5_new_elements.asp\" target=\"_blank\" rel=\"noopener noreferrer\">Novos elementos do HTML5 &#8211; W3C Schools<\/a> (em ingl\u00eas)<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/HTML5\" target=\"_blank\" rel=\"noopener noreferrer\">Documenta\u00e7\u00e3o do Mozilla sobre HTML5<\/a> (parcialmente traduzido)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Como surgiu o HTML5 ? O HTML5 surgiu em 2014 com grandes mudan\u00e7as e atualiza\u00e7\u00f5es na linguagem de marca\u00e7\u00e3o mais utilizada no mundo inteiro. O HTML , criado por Tim Berners Lee, surgiu em 1991 e logo se popularizou, por ser a principal linguagem utilizada na web. Hoje ela \u00e9 considerar um dos padr\u00f5es web [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3895,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[2624,252,2621,3306,253,241,3307],"class_list":["post-3889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","tag-css","tag-desenvolvimento","tag-html","tag-html5","tag-javascript","tag-tutoriais","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5: suas novidades e atualiza\u00e7\u00f5es | Homehost<\/title>\n<meta name=\"description\" content=\"HTML5: aprenda tudo sobre esta vers\u00e3o,suas principais novidades e como utilizar a sem\u00e2ntica correta e os novos elementos na sua p\u00e1gina HTML\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5: suas novidades e atualiza\u00e7\u00f5es | Homehost\" \/>\n<meta property=\"og:description\" content=\"HTML5: aprenda tudo sobre esta vers\u00e3o,suas principais novidades e como utilizar a sem\u00e2ntica correta e os novos elementos na sua p\u00e1gina HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-10T21:07:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-10T21:15:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"561\" \/>\n\t<meta property=\"og:image:height\" content=\"220\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\",\"name\":\"HTML5: suas novidades e atualiza\u00e7\u00f5es | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png\",\"datePublished\":\"2023-06-10T21:07:13+00:00\",\"dateModified\":\"2023-06-10T21:15:20+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"HTML5: aprenda tudo sobre esta vers\u00e3o,suas principais novidades e como utilizar a sem\u00e2ntica correta e os novos elementos na sua p\u00e1gina HTML\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png\",\"width\":561,\"height\":220,\"caption\":\"HTML5 e sua principais novidades!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5: suas novidades e atualiza\u00e7\u00f5es\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\/\/www.instagram.com\/rafamarquesrmb\/\",\"https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5: suas novidades e atualiza\u00e7\u00f5es | Homehost","description":"HTML5: aprenda tudo sobre esta vers\u00e3o,suas principais novidades e como utilizar a sem\u00e2ntica correta e os novos elementos na sua p\u00e1gina HTML","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/","og_locale":"pt_BR","og_type":"article","og_title":"HTML5: suas novidades e atualiza\u00e7\u00f5es | Homehost","og_description":"HTML5: aprenda tudo sobre esta vers\u00e3o,suas principais novidades e como utilizar a sem\u00e2ntica correta e os novos elementos na sua p\u00e1gina HTML","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-06-10T21:07:13+00:00","article_modified_time":"2023-06-10T21:15:20+00:00","og_image":[{"width":561,"height":220,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png","type":"image\/png"}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Rafael Marques","Est. tempo de leitura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/","name":"HTML5: suas novidades e atualiza\u00e7\u00f5es | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png","datePublished":"2023-06-10T21:07:13+00:00","dateModified":"2023-06-10T21:15:20+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"HTML5: aprenda tudo sobre esta vers\u00e3o,suas principais novidades e como utilizar a sem\u00e2ntica correta e os novos elementos na sua p\u00e1gina HTML","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png","width":561,"height":220,"caption":"HTML5 e sua principais novidades!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML5: suas novidades e atualiza\u00e7\u00f5es"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"Gustavo Gallas","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Novidades_do_HTML5.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3889"}],"version-history":[{"count":18,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3889\/revisions"}],"predecessor-version":[{"id":8341,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3889\/revisions\/8341"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/3895"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}