{"id":3695,"date":"2023-06-17T13:14:10","date_gmt":"2023-06-17T16:14:10","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3695"},"modified":"2026-08-11T12:31:25","modified_gmt":"2026-08-11T15:31:25","slug":"o-que-e-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/","title":{"rendered":"O que \u00e9 HTML? Entenda de forma descomplicada"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Se voc\u00ea trabalha ou tem familiaridade com tecnologia e internet, provavelmente j\u00e1 ouviu falar sobre HTML. Mas afinal, o que \u00e9 esse tal de HTML?<\/p>\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\/o-que-e-html\/#O_que_e_HTML\" title=\"O que \u00e9 HTML?\">O que \u00e9 HTML?<\/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\/o-que-e-html\/#Como_funciona_o_HTML\" title=\"Como funciona o HTML\">Como funciona o HTML<\/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\/o-que-e-html\/#O_que_sao_tags\" title=\"O que s\u00e3o tags\">O que s\u00e3o tags<\/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\/o-que-e-html\/#Principais_tags_do_HTML\" title=\"Principais tags do HTML\">Principais tags do HTML<\/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\/o-que-e-html\/#A_estrutura_basica_de_um_documento_HTML\" title=\"A estrutura b\u00e1sica de um documento HTML\">A estrutura b\u00e1sica de um documento HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#Como_surgiu_o_HTML\" title=\"Como surgiu o HTML\">Como surgiu o HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#A_evolucao_do_HTML\" title=\"A evolu\u00e7\u00e3o do HTML\">A evolu\u00e7\u00e3o do HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#1995_%E2%80%93_Versao_20\" title=\"1995 &#8211; Vers\u00e3o 2.0\">1995 &#8211; Vers\u00e3o 2.0<\/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\/o-que-e-html\/#1997_%E2%80%93_Versao_32\" title=\"1997 &#8211; Vers\u00e3o 3.2\">1997 &#8211; Vers\u00e3o 3.2<\/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\/o-que-e-html\/#1999_%E2%80%93_Versao_401\" title=\"1999 &#8211; Vers\u00e3o 4.0.1\">1999 &#8211; Vers\u00e3o 4.0.1<\/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\/o-que-e-html\/#2000_%E2%80%93_XHTML_10\" title=\"2000 &#8211; XHTML 1.0\">2000 &#8211; XHTML 1.0<\/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\/o-que-e-html\/#2004_%E2%80%93_a_fundacao_da_WHATWG\" title=\"2004 &#8211; a funda\u00e7\u00e3o da WHATWG\">2004 &#8211; a funda\u00e7\u00e3o da WHATWG<\/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\/o-que-e-html\/#2014_%E2%80%93_A_grande_mudanca_a_versao_5_do_HTML\" title=\"2014 &#8211; A grande mudan\u00e7a: a vers\u00e3o 5 do HTML\">2014 &#8211; A grande mudan\u00e7a: a vers\u00e3o 5 do HTML<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#A_relacao_entre_HTML_CSS_e_JavaScript\" title=\"A rela\u00e7\u00e3o entre HTML, CSS e JavaScript\">A rela\u00e7\u00e3o entre HTML, CSS e JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#CSS\" title=\"CSS\">CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#JavaScript\" title=\"JavaScript\">JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#Perguntas_frequentes\" title=\"Perguntas frequentes\">Perguntas frequentes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#Conclusao\" title=\"Conclus\u00e3o\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<p class=\"wp-block-paragraph\"><a name=\"top01\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_HTML\"><\/span>O que \u00e9 HTML?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Criada pelo brit\u00e2nico Tim Berners-Lee, o acr\u00f4nimo HTML significa HiperText Markup Language, traduzindo ao portugu\u00eas: Linguagem de Marca\u00e7\u00e3o de Hipertexto.\u00a0 O <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-basico\/\">HTML \u00e9 o componente b\u00e1sico da web<\/a>, ele permite inserir o conte\u00fado e estabelecer a estrutura b\u00e1sica de um website. Portanto, ele serve para dar significado e organizar as informa\u00e7\u00f5es de uma p\u00e1gina na web. Sem isso, o navegador n\u00e3o saberia exibir textos como elementos ou carregar imagens e outros conte\u00fados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os hipertextos s\u00e3o conjuntos de elementos conectados. Esses podem ser palavras, imagens, v\u00eddeos, documentos, etc. Quando conectados, formam uma rede de informa\u00e7\u00f5es que permite a comunica\u00e7\u00e3o de dados, organizando conhecimentos e guardando informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao visitar uma p\u00e1gina simples na web, voc\u00ea pode perceber que existem diferentes distribui\u00e7\u00f5es e tamanhos para t\u00edtulos, par\u00e1grafos, imagens, v\u00eddeos e qualquer outro elemento. Essa estrutura \u00e9 estabelecida atrav\u00e9s do HTML. No in\u00edcio da web, era comum encontrar sites apenas contendo textos e imagens simples, com estrutura b\u00e1sica e sem estiliza\u00e7\u00f5es. Por\u00e9m, nos dias atuais, muito dificilmente voc\u00ea encontrar\u00e1 sites que possuam apenas elementos HTML. Portanto, podemos considerar o HTML o &#8220;esqueleto&#8221; da sua p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine ent\u00e3o que, al\u00e9m do esqueleto, \u00e9 necess\u00e1rio ter o corpo. Para isso, temos ent\u00e3o as linguagens CSS e JavaScript, que em conjunto com HTML, formam a base para todos os websites atuais. Veremos mais \u00e0 frente o que significam essas linguagens.<br> <a name=\"top02\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_funciona_o_HTML\"><\/span>Como funciona o HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Atrav\u00e9s de um documento HTML, ou seja, um documento com a extens\u00e3o .<b><i>html<\/i><\/b>&nbsp;ou&nbsp;<b><i>.htm<\/i><\/b>., o navegador faz a leitura do arquivo e renderiza o seu conte\u00fado para que o usu\u00e1rio final possa visualiz\u00e1-lo. Os arquivos .html podem ser visualizados em qualquer navegador (como Google Chrome, Safari, ou Mozilla Firefox).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Geralmente, um site \u00e9 composto por diversas <a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html-redirect\/\">p\u00e1ginas HTML<\/a>, como por exemplo: um website que contenha tr\u00eas p\u00e1ginas (uma homepage, uma p\u00e1gina de contato e uma p\u00e1gina de produtos) receber\u00e1 ao menos tr\u00eas documentos <strong>.html<\/strong> distintos, sendo um para cada p\u00e1gina do website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O c\u00f3digo pode ser escrito atrav\u00e9s de qualquer editor de texto, como o pr\u00f3prio bloco de notas. Cada p\u00e1gina consiste em uma s\u00e9rie de <strong>tags<\/strong> (tamb\u00e9m chamadas de elementos) que podem ser considerados os blocos de constru\u00e7\u00e3o das p\u00e1ginas. Portanto, esses blocos s\u00e3o a maneira com a qual o HTML faz a marca\u00e7\u00e3o dos conte\u00fados, criando a hierarquia e a estrutura do mesmo, dividido entre se\u00e7\u00f5es, par\u00e1grafos, cabe\u00e7alhos, e outros.<br> <a name=\"top03\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_sao_tags\"><\/span>O que s\u00e3o tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Atrav\u00e9s de qualquer editor de texto, como o Sublime Text, o NotePad++ ou at\u00e9 mesmo o bloco de notas, \u00e9 poss\u00edvel <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\">criar um documento com a extens\u00e3o .html<\/a> que ser\u00e1 renderizado pelos navegadores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Conforme explicado anteriormente, este documento consiste em uma s\u00e9rie de tags. As tags s\u00e3o c\u00f3digos que definem toda a estrutura da p\u00e1gina, tais como o seu tamanho, a fonte da letra, as cores, as quebras de linha e etc. A maioria dos elementos do documento HTML \u00e9 composta por uma estrutura de abertura e uma de fechamento, como\u00a0<b><i>&lt;tag>\u00a0<\/i><\/b>e<b><i> &lt;\/tag><\/i><\/b>. H\u00e1 tamb\u00e9m tags de estrutura \u00fanica, como a\u00a0 tag <strong>&lt;br\/><\/strong> que realiza uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/quebra-de-linha-html\/\">quebra de linha<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Digamos que voc\u00ea queria escrever um par\u00e1grafo, chamamos ent\u00e3o a tag <strong>&lt;p><\/strong>, escrevemos o par\u00e1grafo e finalmente fechamos a tag com <strong>&lt;\/p><\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p>Meu primeiro par\u00e1grafo.&lt;\/p><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, ao salvar o arquivo com a extens\u00e3o .html e abri-lo em um navegador, voc\u00ea ver\u00e1 o par\u00e1grafo escrito na tela do navegador.<br>\n<a name=\"top04\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Principais_tags_do_HTML\"><\/span>Principais tags do HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Atualmente existem mais de 140 tags, mas algumas delas quase n\u00e3o s\u00e3o utilizadas. Dentre as mais utilizadas, temos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&lt;head><\/strong> &#8211; local para declarar todas as informa\u00e7\u00f5es, como t\u00edtulo e metadados da sua p\u00e1gina;<\/li>\n\n\n\n<li><strong>&lt;title><\/strong> &#8211; define o t\u00edtulo;<\/li>\n\n\n\n<li><strong>&lt;body><\/strong> &#8211; local para declarar todos os elementos que ir\u00e3o compor o corpo da p\u00e1gina;<\/li>\n\n\n\n<li><strong>&lt;h1>,&lt;h2>,&lt;h3>,&lt;h4>,&lt;h5 >e<\/strong>\u00a0<strong>&lt;h6><\/strong> &#8211; Tags para definir um t\u00edtulo e subt\u00edtulos, variando de 1 a 6, sendo h1 o t\u00edtulo mais importante e h6 o de menor import\u00e2ncia;<\/li>\n\n\n\n<li><strong>&lt;p><\/strong> &#8211; Tag para definir um par\u00e1grafo;<\/li>\n\n\n\n<li><strong>&lt;a><\/strong> &#8211; <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tag de link,<\/a> junto ao atributo href=&#8221;&#8221; \u00e9 respons\u00e1vel pela principal caracter\u00edstica da web;<\/li>\n\n\n\n<li><strong>&lt;header><\/strong> &#8211; define um cabe\u00e7alho;<\/li>\n\n\n\n<li><strong>&lt;section><\/strong> &#8211; define uma se\u00e7\u00e3o;<\/li>\n\n\n\n<li><strong>&lt;article><\/strong> &#8211; define um artigo;<\/li>\n\n\n\n<li><strong>&lt;div><\/strong> &#8211; define uma divis\u00e3o;<\/li>\n\n\n\n<li><strong>&lt;footer><\/strong> &#8211; define um rodap\u00e9;<\/li>\n\n\n\n<li><strong>&lt;nav><\/strong> &#8211; define uma \u00e1rea de navega\u00e7\u00e3o (como menus);<\/li>\n\n\n\n<li><strong>&lt;table> <\/strong>&#8211; define uma tabela;<\/li>\n\n\n\n<li><strong>&lt;ol><\/strong> &#8211; define uma lista ordenada;<\/li>\n\n\n\n<li><strong>&lt;ul><\/strong> &#8211; define uma lista n\u00e3o ordenada;<\/li>\n\n\n\n<li><strong>&lt;li><\/strong> &#8211; define o item de uma lista;<\/li>\n\n\n\n<li><strong>&lt;form><\/strong> &#8211; define um formul\u00e1rio;<\/li>\n\n\n\n<li><strong>&lt;input><\/strong> &#8211; define os campos do formul\u00e1rio;<\/li>\n\n\n\n<li><strong>&lt;<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/textarea-html\/\">textarea<\/a>><\/strong> &#8211; define uma \u00e1rea para o usu\u00e1rio digitar um texto;<\/li>\n\n\n\n<li><strong>&lt;button><\/strong> &#8211; define um bot\u00e3o;<\/li>\n\n\n\n<li><strong>&lt;img> <\/strong>&#8211; permite <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-img\/\" target=\"_blank\" rel=\"noopener\">inserir uma imagem<\/a> no seu documento.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><a name=\"top05\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_estrutura_basica_de_um_documento_HTML\"><\/span>A estrutura b\u00e1sica de um documento HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Agora que j\u00e1 sabemos como funciona e quais as suas principais tags, vamos entender como \u00e9 formada a estrutura b\u00e1sica de um documento HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O documento deve conter uma declara\u00e7\u00e3o informando o doctype, que no caso do <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\">HTML5<\/a>, basta declarar com o elemento <strong>&lt;!DOCTYPE html><\/strong>. Ap\u00f3s isso, iniciamos nosso documento com a tag <strong>&lt;html><\/strong> que dever\u00e1 ser fechada ao final do documento com <strong>&lt;\/html><\/strong>. Posteriormente, nosso documento dever\u00e1 ter um elemento <strong>&lt;head><\/strong> que receber\u00e1 todas as informa\u00e7\u00f5es b\u00e1sicas da sua p\u00e1gina, como o t\u00edtulo, links de elementos externos, metadados, etc. Declaramos ent\u00e3o um t\u00edtulo para a p\u00e1gina atrav\u00e9s da tag <strong>&lt;title><\/strong>.\u00a0Finalmente abrimos ent\u00e3o a tag <strong>&lt;body><\/strong> que consiste no corpo do nosso documento, onde ficar\u00e3o todos os elementos que ser\u00e3o renderizados na tela do navegador. Dessa forma, temos a estrutura b\u00e1sica do nosso documento HTML:<\/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;&lt;\/title&gt;\n    &lt;\/head&gt;\n\n    &lt;body&gt;\n\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Para que os acentos e caracteres especiais sejam exibidos corretamente, \u00e9 preciso declarar a codifica\u00e7\u00e3o de caracteres. O padr\u00e3o universal da web \u00e9 o <strong>UTF-8<\/strong>, e ele se declara pela tag <code>&lt;meta><\/code> com o atributo <code>charset<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, atrav\u00e9s da tag de metadados <strong>&lt;meta\/><\/strong>, vamos declarar dentro de um atributo charset que nosso padr\u00e3o \u00e9 o <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/mysql\/acentuacao-mysql-utf8\/\">UTF-8<\/a>. Temos assim a estrutura b\u00e1sica de nosso documento HTML:<\/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;&lt;\/title&gt;\n        &lt;meta charset=\"utf-8\"\/&gt;\n    &lt;\/head&gt;\n\n    &lt;body&gt;\n\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/estrutura-documento-html-683x1024.png\" alt=\"Estrutura de um documento HTML mostrando o DOCTYPE, a tag html envolvendo tudo, o head com title e charset, e o body com o conte\u00fado vis\u00edvel da p\u00e1gina\" class=\"wp-image-17242\" width=\"683\" height=\"1024\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/estrutura-documento-html-683x1024.png 683w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/estrutura-documento-html-200x300.png 200w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/estrutura-documento-html-768x1152.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/estrutura-documento-html.png 1024w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos agora aprender um pouco a hist\u00f3ria do HTML e como evoluiu para se tornar o que \u00e9 hoje.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_surgiu_o_HTML\"><\/span>Como surgiu o HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Em 1980, o F\u00edsico Brit\u00e2nico\u00a0<a href=\"https:\/\/www.internethalloffame.org\/\/inductees\/tim-berners-lee\" target=\"_blank\" rel=\"noopener noreferrer\">Tim Berners-Lee<\/a>, iniciou um projeto baseado na Marca\u00e7\u00e3o de HiperTexto, denominado ENQUIRE. Este projeto foi realizado inicialmente atrav\u00e9s da linguagem de programa\u00e7\u00e3o Pascal. Anos mais tarde, em 1989, Tim Berners-Lee e o estudante Robert Cailliau conseguiram implementar a primeira comunica\u00e7\u00e3o entre o usu\u00e1rio e servidor atrav\u00e9s do <a href=\"https:\/\/www.homehost.com.br\/blog\/internet\/o-que-e-http\/\" target=\"_blank\" rel=\"noopener noreferrer\">protocolo HTTP<\/a>. Com isso, surgia ent\u00e3o a World Wide Web (www), a web que conhecemos hoje.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com o objetivo de facilitar a comunica\u00e7\u00e3o e a dissemina\u00e7\u00e3o de documentos entre pesquisadores, ele criou ent\u00e3o a linguagem de marca\u00e7\u00e3o de hipertexto, o HTML. A sua primeira vers\u00e3o foi publicada em 1991 e foi baseada na SGML, uma linguagem de marca\u00e7\u00e3o utilizada para a estrutura\u00e7\u00e3o de documentos. O SGML j\u00e1 possu\u00eda diversas tags que foram herdadas pelo HTML. Contudo, a maior diferen\u00e7a entre essas duas linguagens, \u00e9 que o HTML implementava a tag <strong>&lt;a><\/strong>, permitindo a liga\u00e7\u00e3o de uma p\u00e1gina a outra, conhecido como <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a>. \u00a0A interliga\u00e7\u00e3o entre documentos \u00e9 a base do funcionamento de toda a Web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A linguagem de marca\u00e7\u00e3o de hipertexto ficou bastante conhecida quando come\u00e7ou a ser utilizada para formar a rede p\u00fablica daquela \u00e9poca. Alguns anos mais tarde, se tornaria a linguagem padr\u00e3o da internet que conhecemos hoje.<br>\n<a name=\"top07\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_evolucao_do_HTML\"><\/span>A evolu\u00e7\u00e3o do HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Conforme visto anteriormente, a primeira vers\u00e3o do HTML surgiu no in\u00edcio da d\u00e9cada de 90. Entre 1990 e 1995, passou por v\u00e1rias atualiza\u00e7\u00f5es e modifica\u00e7\u00f5es em sua estrutura. At\u00e9 ent\u00e3o, quem supervisionava e controlava o padr\u00e3o da linguagem era o CERN. Desse ano em diante, a entidade que regula os padr\u00f5es da web,\u00a0 <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C (<i>The World Wide Web Consortium)<\/i><\/a>, passou a supervisionar e controlar a linguagem de marca\u00e7\u00e3o de hipertextos, tornando-a uma linguagem padr\u00e3o da web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em 1993, Dave Raggett prop\u00f4s uma evolu\u00e7\u00e3o do padr\u00e3o, denominada HTML+. Entretanto, tal proposta nunca foi implementada e a primeira vers\u00e3o sucessora s\u00f3 viria a surgir em 1995.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/evolucao-do-html-linha-do-tempo-655x1024.png\" alt=\"Linha do tempo da evolu\u00e7\u00e3o do HTML, de 1991 com a primeira vers\u00e3o criada por Tim Berners-Lee at\u00e9 2014 com o HTML5, passando por HTML 2.0, 3.2, 4.01, XHTML e a funda\u00e7\u00e3o do WHATWG\" class=\"wp-image-17240\" width=\"655\" height=\"1024\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/evolucao-do-html-linha-do-tempo-655x1024.png 655w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/evolucao-do-html-linha-do-tempo-192x300.png 192w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/evolucao-do-html-linha-do-tempo-768x1201.png 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/evolucao-do-html-linha-do-tempo-983x1536.png 983w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/evolucao-do-html-linha-do-tempo.png 1003w\" sizes=\"(max-width: 655px) 100vw, 655px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1995_%E2%80%93_Versao_20\"><\/span>1995 &#8211; Vers\u00e3o 2.0<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar de diversas atualiza\u00e7\u00f5es e modifica\u00e7\u00f5es, a primeira vers\u00e3o ap\u00f3s a cria\u00e7\u00e3o do HTML puro s\u00f3 foi surgir em 1995, a vers\u00e3o 2.0. Seu surgimento ocorreu no primeiro evento mundial sobre a Web, o World Wide Web Conference. O seu objetivo era formalizar todas as caracter\u00edsticas do HTML que j\u00e1 eram utilizadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1997_%E2%80%93_Versao_32\"><\/span>1997 &#8211; Vers\u00e3o 3.2<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A vers\u00e3o 3.2, lan\u00e7ada em 1997, al\u00e9m de trazer novas funcionalidades \u00e0 linguagem, corrigiu diversos problemas de compatibilidade da vers\u00e3o 2.0. Foi lan\u00e7ada pelo grupo de trabalho do <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C<\/a>, fazendo com que ela fosse tratada como pr\u00e1tica comum. O HTML 3.2 implementou caracter\u00edsticas como tabelas,&nbsp;applets e texto flutuante ao redor de imagens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1999_%E2%80%93_Versao_401\"><\/span>1999 &#8211; Vers\u00e3o 4.0.1<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Em 1999, a vers\u00e3o 4.0.1 foi lan\u00e7ada trazendo a compatibilidade com as suas vers\u00f5es anteriores atrav\u00e9s de tr\u00eas implementa\u00e7\u00f5es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Strict<\/strong>\u00a0 \u2013 implementa\u00e7\u00e3o na qual fica proibida a utiliza\u00e7\u00e3o de elementos obsoletos da linguagem;<\/li>\n\n\n\n<li><strong>Transitional<\/strong>\u00a0 \u2013 implementa\u00e7\u00e3o na qual os elementos obsoletos s\u00e3o permitidos;<\/li>\n\n\n\n<li><strong>Frameset<\/strong>\u00a0\u2013 implementa\u00e7\u00e3o direcionada para sites que usam\u00a0<em>frames<\/em>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Acrescentou novas funcionalidades com suporte para op\u00e7\u00f5es de multim\u00eddia e <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-css\/\">folhas de estilo<\/a>. Tamb\u00e9m foi constru\u00eddo pensando em melhorar as pr\u00e1ticas de programa\u00e7\u00e3o. O HTML4 ocupou lugar de destaque no mundo web por muitos anos e at\u00e9 hoje ainda \u00e9 utilizado por alguns desenvolvedores da web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2000_%E2%80%93_XHTML_10\"><\/span>2000 &#8211; XHTML 1.0<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No ano 2000, pouco tempo ap\u00f3s incrementar a vers\u00e3o 4.0.1, foi lan\u00e7ada a primeira vers\u00e3o do XHTML, que combinava as vantagens do HTML com as do XML. O XHTML trazia uma sintaxe mais rigorosa e menos amb\u00edgua para tornar o HTML mais simples de ser processado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2004_%E2%80%93_a_fundacao_da_WHATWG\"><\/span>2004 &#8211; a funda\u00e7\u00e3o da WHATWG<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2014_%E2%80%93_A_grande_mudanca_a_versao_5_do_HTML\"><\/span>2014 &#8211; A grande mudan\u00e7a: a vers\u00e3o 5 do HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A vers\u00e3o 5 do HTML foi desenvolvida para aperfei\u00e7oar a experi\u00eancia da <i>World Wide Web<\/i> para os desenvolvedores e usu\u00e1rios finais. Ela trouxe grandes avan\u00e7os para a linguagem.&nbsp;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 plug-ins. Essa nova vers\u00e3o tamb\u00e9m nasceu com uma proposta marcante: ela n\u00e3o \u00e9 uma vers\u00e3o final, ou seja, seguir\u00e1 recebendo mudan\u00e7as ao longo do tempo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anteriormente, as vers\u00f5es n\u00e3o eram padronizadas para cria\u00e7\u00e3o de se\u00e7\u00f5es comuns e espec\u00edficas como rodap\u00e9s, cabe\u00e7alhos,\u00a0 menus, artigos, etc. Com a introdu\u00e7\u00e3o de tags como <strong>&lt;header>, &lt;footer>, &lt;section>, &lt;article>, &lt;nav><\/strong>, etc, o HTML5 trouxe uma forma sem\u00e2ntica de se trabalhar com a linguagem. Com esse avan\u00e7o, foi poss\u00edvel aumentar a interatividade sem a necessidade de instala\u00e7\u00e3o de plug-ins. \u00c9 um c\u00f3digo pronto para futuros dispositivos, facilitando a reutiliza\u00e7\u00e3o da informa\u00e7\u00e3o de diferentes maneiras. Portanto, possibilita diversas funcionalidades que antes s\u00f3 eram poss\u00edveis com plugins, sem que isso sobrecarregasse o website, mantendo-o leve e r\u00e1pido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com isso, as novas tags sem\u00e2nticas trouxeram grandes avan\u00e7os para t\u00e9cnicas de <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/seo-marketing-20-dicas-subir-no-google\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a> e para a leitura, pois informam ao navegador sobre o significado do conte\u00fado.<br>\n<a name=\"top08\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_relacao_entre_HTML_CSS_e_JavaScript\"><\/span>A rela\u00e7\u00e3o entre HTML, CSS e JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/htmlcssjs.jpg\" alt=\"HTML 5, CSS 3 e JavaScript\" title=\"HTML 5 CSS 3 e JavaScript\" class=\"wp-image-3708\" width=\"1021\" height=\"417\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/htmlcssjs.jpg 1021w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/htmlcssjs-300x123.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/htmlcssjs-768x314.jpg 768w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/htmlcssjs-1x1.jpg 1w\" sizes=\"(max-width: 1021px) 100vw, 1021px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Conforme explicado anteriormente, no in\u00edcio do artigo, o <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\">HTML servir\u00e1 para marcar todos os elementos da nossa p\u00e1gina<\/a>. Ele funciona como se fosse o esqueleto de uma p\u00e1gina. Por\u00e9m, sozinho, o HTML \u00e9 limitado a essa fun\u00e7\u00e3o, mesmo em sua vers\u00e3o mais atual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sendo assim, podemos definir que uma p\u00e1gina web \u00e9 composta por tr\u00eas camadas. O <strong>HTML<\/strong> formar\u00e1 a primeira camada que apresenta o conte\u00fado ao usu\u00e1rio. O <strong>CSS<\/strong> formar\u00e1 a segunda camada que dar\u00e1 forma aos elementos. Finalmente, o <strong>Javascript<\/strong> formar\u00e1 a terceira camada que adicionar\u00e1 comportamentos din\u00e2micos \u00e0 p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS\"><\/span>CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para poder dar forma ao nosso documento, \u00e9 necess\u00e1rio trabalhar com o estilo em cascata, o CSS. Com isso, podemos estilizar todos os nossos elementos, aplicando espa\u00e7amentos, cores, posicionamentos, tamanho de fontes, fam\u00edlias de fontes, bordas e outros efeitos visuais que d\u00e3o forma ao documento. Durante muito tempo, o estilo era aplicado diretamente na <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\">tag html<\/a>. Hoje em dia, \u00e9 poss\u00edvel utilizar um <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/\">espa\u00e7o dentro do seu documento html<\/a>, atrav\u00e9s da tag <strong>&lt;style>&lt;\/style><\/strong> que deve ser declarada dentro do head, onde ir\u00e1 conter todo o CSS. Da mesma forma, pode-se utilizar uma folha de estilos externa, geralmente de extens\u00e3o <strong>.css<\/strong> , o que deixa o c\u00f3digo muito mais limpo e organizado. Atualmente, a vers\u00e3o mais recente do CSS \u00e9 o CSS 3. Podemos considerar que o CSS \u00e9 o corpo do nosso documento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JavaScript\"><\/span>JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O JavaScript, diferentemente do HTML e do CSS, \u00e9 uma linguagem de programa\u00e7\u00e3o, e em conjunto com esses, ele \u00e9 capaz de dar vida, gerar movimento ao site. Ele \u00e9 o que tornar\u00e1 os elementos mais din\u00e2micos, pois \u00e9 o JavaScript que permite a execu\u00e7\u00e3o de scripts na nossa p\u00e1gina. Dessa forma, quando o usu\u00e1rio est\u00e1 navegando em uma p\u00e1gina e executa uma a\u00e7\u00e3o que resulte em um comportamento na p\u00e1gina, muito provavelmente ser\u00e1 um script que executar\u00e1 esse comportamento. Portanto, o JavaScript pode ser comparado com o movimento do corpo (e do esqueleto) da nossa p\u00e1gina.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Perguntas_frequentes\"><\/span>Perguntas frequentes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O que significa HTML?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML \u00e9 a sigla de <strong>HyperText Markup Language<\/strong> \u2014 Linguagem de Marca\u00e7\u00e3o de Hipertexto, em portugu\u00eas. Ela foi criada por Tim Berners-Lee no in\u00edcio dos anos 1990 e \u00e9 a linguagem que estrutura o conte\u00fado de toda p\u00e1gina da web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML \u00e9 uma linguagem de programa\u00e7\u00e3o?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o. HTML \u00e9 uma linguagem de <strong>marca\u00e7\u00e3o<\/strong>: ela descreve e organiza o conte\u00fado, mas n\u00e3o executa l\u00f3gica, n\u00e3o faz c\u00e1lculos e n\u00e3o toma decis\u00f5es. Quem cumpre esse papel numa p\u00e1gina \u00e9 o JavaScript, que \u00e9 uma linguagem de programa\u00e7\u00e3o de verdade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qual a diferen\u00e7a entre HTML, CSS e JavaScript?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada um cuida de uma camada. O <strong>HTML<\/strong> define o que existe na p\u00e1gina \u2014 t\u00edtulos, par\u00e1grafos, imagens, links. O <strong>CSS<\/strong> define como isso aparece \u2014 cores, tamanhos, espa\u00e7amentos, posi\u00e7\u00f5es. O <strong>JavaScript<\/strong> define o que acontece \u2014 cliques, anima\u00e7\u00f5es, valida\u00e7\u00f5es, atualiza\u00e7\u00f5es sem recarregar. A analogia comum \u00e9 esqueleto, corpo e movimento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O que s\u00e3o tags HTML?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e3o os c\u00f3digos que marcam cada elemento da p\u00e1gina, escritos entre sinais de menor e maior. A maioria vem em par \u2014 uma de abertura e uma de fechamento, como <code>&lt;p&gt;<\/code> e <code>&lt;\/p&gt;<\/code> \u2014, mas algumas s\u00e3o \u00fanicas, como a <code>&lt;br&gt;<\/code> de quebra de linha. Existem mais de 140 tags, embora o uso di\u00e1rio gire em torno de umas vinte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qual a vers\u00e3o atual do HTML?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A \u00faltima vers\u00e3o numerada foi o <strong>HTML5<\/strong>, de 2014 \u2014 e desde ent\u00e3o o HTML deixou de ter vers\u00f5es. Ele passou a ser um <strong>padr\u00e3o vivo<\/strong>, mantido pelo WHATWG e atualizado continuamente. Na pr\u00e1tica, quando algu\u00e9m fala em &#8220;HTML5&#8221; hoje, est\u00e1 falando do HTML atual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Preciso saber HTML para ter um site?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o necessariamente. Plataformas como WordPress, Wix e construtores visuais geram o HTML para voc\u00ea. Mas conhecer o b\u00e1sico ajuda bastante em situa\u00e7\u00f5es comuns: ajustar algo que o editor n\u00e3o permite, entender por que um elemento n\u00e3o aparece, ou colar um c\u00f3digo de terceiros sem quebrar a p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Onde escrevo o c\u00f3digo HTML?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em qualquer editor de texto \u2014 at\u00e9 o Bloco de Notas funciona. Basta salvar o arquivo com a extens\u00e3o <code>.html<\/code> e abri-lo no navegador. Para trabalhar de verdade, editores como VS Code, Sublime Text e Notepad++ ajudam com destaque de sintaxe e autocompletar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Para que serve a tag <code>&lt;meta charset=\"utf-8\"&gt;<\/code>?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ela declara a codifica\u00e7\u00e3o de caracteres do documento. Sem essa linha, acentos e caracteres especiais podem aparecer como s\u00edmbolos estranhos \u2014 <code>informa\u00c3\u00a7\u00c3\u00a3o<\/code> em vez de <code>informa\u00e7\u00e3o<\/code>. O UTF-8 \u00e9 o padr\u00e3o universal da web e cobre praticamente todos os idiomas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qual a diferen\u00e7a entre HTML e HTML5?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML5 \u00e9 a quinta e \u00faltima vers\u00e3o numerada, lan\u00e7ada em 2014. Ela trouxe suporte nativo a \u00e1udio e v\u00eddeo, sem plugins, e as tags sem\u00e2nticas como <code>&lt;header&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;article&gt;<\/code> e <code>&lt;footer&gt;<\/code>, que dizem ao navegador e aos buscadores o <strong>significado<\/strong> de cada parte da p\u00e1gina \u2014 n\u00e3o s\u00f3 a apar\u00eancia.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O que s\u00e3o tags sem\u00e2nticas e por que importam para SEO?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e3o tags que descrevem o papel do conte\u00fado em vez de apenas marc\u00e1-lo visualmente. Usar <code>&lt;header&gt;<\/code> em vez de uma <code>&lt;div&gt;<\/code> gen\u00e9rica informa ao buscador que aquele bloco \u00e9 o cabe\u00e7alho. Isso ajuda os mecanismos de busca a entender a estrutura da p\u00e1gina, e \u00e9 essencial para leitores de tela usados por pessoas com defici\u00eancia visual.<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n{\n\"@context\": \"https:\/\/schema.org\",\n\"@type\": \"FAQPage\",\n\"mainEntity\": [\n{\"@type\":\"Question\",\"name\":\"O que significa HTML?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"HTML \u00e9 a sigla de HyperText Markup Language, ou Linguagem de Marca\u00e7\u00e3o de Hipertexto em portugu\u00eas. Ela foi criada por Tim Berners-Lee no in\u00edcio dos anos 1990 e \u00e9 a linguagem que estrutura o conte\u00fado de toda p\u00e1gina da web.\"}},\n{\"@type\":\"Question\",\"name\":\"HTML \u00e9 uma linguagem de programa\u00e7\u00e3o?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"N\u00e3o. HTML \u00e9 uma linguagem de marca\u00e7\u00e3o: ela descreve e organiza o conte\u00fado, mas n\u00e3o executa l\u00f3gica, n\u00e3o faz c\u00e1lculos e n\u00e3o toma decis\u00f5es. Quem cumpre esse papel numa p\u00e1gina \u00e9 o JavaScript, que \u00e9 uma linguagem de programa\u00e7\u00e3o de verdade.\"}},\n{\"@type\":\"Question\",\"name\":\"Qual a diferen\u00e7a entre HTML, CSS e JavaScript?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Cada um cuida de uma camada. O HTML define o que existe na p\u00e1gina, como t\u00edtulos, par\u00e1grafos, imagens e links. O CSS define como isso aparece, com cores, tamanhos, espa\u00e7amentos e posi\u00e7\u00f5es. O JavaScript define o que acontece, como cliques, anima\u00e7\u00f5es e valida\u00e7\u00f5es. A analogia comum \u00e9 esqueleto, corpo e movimento.\"}},\n{\"@type\":\"Question\",\"name\":\"O que s\u00e3o tags HTML?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"S\u00e3o os c\u00f3digos que marcam cada elemento da p\u00e1gina, escritos entre sinais de menor e maior. A maioria vem em par, uma de abertura e uma de fechamento, mas algumas s\u00e3o \u00fanicas, como a de quebra de linha. Existem mais de 140 tags, embora o uso di\u00e1rio gire em torno de umas vinte.\"}},\n{\"@type\":\"Question\",\"name\":\"Qual a vers\u00e3o atual do HTML?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A \u00faltima vers\u00e3o numerada foi o HTML5, de 2014, e desde ent\u00e3o o HTML deixou de ter vers\u00f5es. Ele passou a ser um padr\u00e3o vivo, mantido pelo WHATWG e atualizado continuamente. Na pr\u00e1tica, quando algu\u00e9m fala em HTML5 hoje, est\u00e1 falando do HTML atual.\"}},\n{\"@type\":\"Question\",\"name\":\"Preciso saber HTML para ter um site?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"N\u00e3o necessariamente. Plataformas como WordPress, Wix e construtores visuais geram o HTML para voc\u00ea. Mas conhecer o b\u00e1sico ajuda em situa\u00e7\u00f5es comuns: ajustar algo que o editor n\u00e3o permite, entender por que um elemento n\u00e3o aparece, ou colar um c\u00f3digo de terceiros sem quebrar a p\u00e1gina.\"}},\n{\"@type\":\"Question\",\"name\":\"Onde escrevo o c\u00f3digo HTML?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Em qualquer editor de texto, at\u00e9 o Bloco de Notas funciona. Basta salvar o arquivo com a extens\u00e3o .html e abri-lo no navegador. Para trabalhar de verdade, editores como VS Code, Sublime Text e Notepad++ ajudam com destaque de sintaxe e autocompletar.\"}},\n{\"@type\":\"Question\",\"name\":\"Para que serve a tag meta charset utf-8?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Ela declara a codifica\u00e7\u00e3o de caracteres do documento. Sem essa linha, acentos e caracteres especiais podem aparecer como s\u00edmbolos estranhos. O UTF-8 \u00e9 o padr\u00e3o universal da web e cobre praticamente todos os idiomas.\"}},\n{\"@type\":\"Question\",\"name\":\"Qual a diferen\u00e7a entre HTML e HTML5?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"HTML5 \u00e9 a quinta e \u00faltima vers\u00e3o numerada, lan\u00e7ada em 2014. Ela trouxe suporte nativo a \u00e1udio e v\u00eddeo, sem plugins, e as tags sem\u00e2nticas como header, nav, article e footer, que dizem ao navegador e aos buscadores o significado de cada parte da p\u00e1gina, n\u00e3o s\u00f3 a apar\u00eancia.\"}},\n{\"@type\":\"Question\",\"name\":\"O que s\u00e3o tags sem\u00e2nticas e por que importam para SEO?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"S\u00e3o tags que descrevem o papel do conte\u00fado em vez de apenas marc\u00e1-lo visualmente. Usar header em vez de uma div gen\u00e9rica informa ao buscador que aquele bloco \u00e9 o cabe\u00e7alho. Isso ajuda os mecanismos de busca a entender a estrutura da p\u00e1gina, e \u00e9 essencial para leitores de tela usados por pessoas com defici\u00eancia visual.\"}}\n]\n}\n<\/script>\n\n\n\n<div style=\"max-width:760px; margin:32px auto; background:linear-gradient(135deg,#1a73e8 0%,#0b3d91 100%); border-radius:16px; padding:32px 28px; font-family:Arial, Helvetica, sans-serif; color:#fff; box-shadow:0 10px 30px rgba(26,115,232,.25);\">\n<div style=\"display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;\">\n<div style=\"flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; background:rgba(255,255,255,.18);\">\n<svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg>\n<\/div>\n<div style=\"flex:1 1 320px; min-width:260px;\">\n<div style=\"font-weight:800; line-height:1.25; margin-bottom:8px; font-size:19px;\">Do arquivo .html ao site no ar<\/div>\n<p style=\"margin:0 0 18px; line-height:1.6; color:#dbe7fb;\">Um arquivo HTML aberto no seu navegador s\u00f3 existe para voc\u00ea. Para que ele tenha um endere\u00e7o pr\u00f3prio e funcione para qualquer pessoa, ele precisa estar hospedado. Na Homehost, voc\u00ea envia seus arquivos pelo painel ou por FTP e o site fica no ar em minutos \u2014 com servidor no Brasil, SSL gr\u00e1tis e suporte em portugu\u00eas. A partir de R$ 7,90\/m\u00eas.<\/p>\n<a href=\"https:\/\/www.homehost.com.br\/hospedagem-de-sites\/\" style=\"display:inline-flex; align-items:center; gap:8px; background:#fff; color:#1a73e8; font-weight:700; text-decoration:none; padding:13px 26px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.15);\">\nVer planos de hospedagem\n<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#1a73e8\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O HTML \u00e9 a camada mais antiga e mais est\u00e1vel da web: a mesma tag <code>&lt;p&gt;<\/code> que Tim Berners-Lee usou nos anos 1990 continua funcionando hoje, em qualquer navegador, sem nenhuma adapta\u00e7\u00e3o. Poucas tecnologias podem dizer o mesmo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tr\u00eas ideias resumem o que vimos aqui. A primeira \u00e9 que <strong>HTML n\u00e3o \u00e9 programa\u00e7\u00e3o<\/strong> \u2014 ele descreve e organiza o conte\u00fado, e quem executa l\u00f3gica \u00e9 o JavaScript. A segunda \u00e9 que <strong>ele nunca trabalha sozinho<\/strong>: HTML estrutura, CSS d\u00e1 forma, JavaScript d\u00e1 movimento, e \u00e9 a combina\u00e7\u00e3o dos tr\u00eas que forma qualquer p\u00e1gina moderna. E a terceira \u00e9 que <strong>as tags t\u00eam significado, n\u00e3o s\u00f3 apar\u00eancia<\/strong> \u2014 usar <code>&lt;header&gt;<\/code>, <code>&lt;nav&gt;<\/code> e <code>&lt;article&gt;<\/code> em vez de <code>&lt;div&gt;<\/code> gen\u00e9ricas \u00e9 o que permite a buscadores e leitores de tela entenderem a p\u00e1gina, e essa foi a grande mudan\u00e7a que o HTML5 trouxe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea est\u00e1 come\u00e7ando, o caminho mais r\u00e1pido \u00e9 pr\u00e1tico: abra o Bloco de Notas, escreva a estrutura b\u00e1sica que mostramos aqui, salve como <code>.html<\/code> e abra no navegador. A partir da\u00ed, cada tag nova que voc\u00ea aprender j\u00e1 tem onde ser encaixada.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea trabalha ou tem familiaridade com tecnologia e internet, provavelmente j\u00e1 ouviu falar sobre HTML. Mas afinal, o que \u00e9 esse tal de HTML? O que \u00e9 HTML? Criada pelo brit\u00e2nico Tim Berners-Lee, o acr\u00f4nimo HTML significa HiperText Markup Language, traduzindo ao portugu\u00eas: Linguagem de Marca\u00e7\u00e3o de Hipertexto.\u00a0 O HTML \u00e9 o componente b\u00e1sico [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":17246,"comment_status":"open","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":[160,2624,2621,241],"class_list":["post-3695","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","tag-criar-um-site","tag-css","tag-html","tag-tutoriais"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O que \u00e9 HTML? Entenda de forma descomplicada | Homehost<\/title>\n<meta name=\"description\" content=\"HTML \u00e9 a linguagem que estrutura toda p\u00e1gina da web. O que \u00e9, como funciona, as principais tags, a estrutura de um documento e a rela\u00e7\u00e3o com CSS e JavaScript.\" \/>\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\/o-que-e-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O que \u00e9 HTML? Entenda de forma descomplicada | Homehost\" \/>\n<meta property=\"og:description\" content=\"HTML \u00e9 a linguagem que estrutura toda p\u00e1gina da web. O que \u00e9, como funciona, as principais tags, a estrutura de um documento e a rela\u00e7\u00e3o com CSS e JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" \/>\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-17T16:14:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-11T15:31:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1672\" \/>\n\t<meta property=\"og:image:height\" content=\"941\" \/>\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=\"17 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\/o-que-e-html\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\",\"name\":\"O que \u00e9 HTML? Entenda de forma descomplicada | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.png\",\"datePublished\":\"2023-06-17T16:14:10+00:00\",\"dateModified\":\"2026-08-11T15:31:25+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"HTML \u00e9 a linguagem que estrutura toda p\u00e1gina da web. O que \u00e9, como funciona, as principais tags, a estrutura de um documento e a rela\u00e7\u00e3o com CSS e JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.png\",\"width\":1672,\"height\":941,\"caption\":\"O que \u00e9 HTML - Capa\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"O que \u00e9 HTML? Entenda de forma descomplicada\"}]},{\"@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":"O que \u00e9 HTML? Entenda de forma descomplicada | Homehost","description":"HTML \u00e9 a linguagem que estrutura toda p\u00e1gina da web. O que \u00e9, como funciona, as principais tags, a estrutura de um documento e a rela\u00e7\u00e3o com CSS e JavaScript.","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\/o-que-e-html\/","og_locale":"pt_BR","og_type":"article","og_title":"O que \u00e9 HTML? Entenda de forma descomplicada | Homehost","og_description":"HTML \u00e9 a linguagem que estrutura toda p\u00e1gina da web. O que \u00e9, como funciona, as principais tags, a estrutura de um documento e a rela\u00e7\u00e3o com CSS e JavaScript.","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-06-17T16:14:10+00:00","article_modified_time":"2026-08-11T15:31:25+00:00","og_image":[{"width":1672,"height":941,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.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":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/","name":"O que \u00e9 HTML? Entenda de forma descomplicada | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.png","datePublished":"2023-06-17T16:14:10+00:00","dateModified":"2026-08-11T15:31:25+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"HTML \u00e9 a linguagem que estrutura toda p\u00e1gina da web. O que \u00e9, como funciona, as principais tags, a estrutura de um documento e a rela\u00e7\u00e3o com CSS e JavaScript.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.png","width":1672,"height":941,"caption":"O que \u00e9 HTML - Capa"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"O que \u00e9 HTML? Entenda de forma descomplicada"}]},{"@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":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/06\/o-que-e-html-capa.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3695","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=3695"}],"version-history":[{"count":28,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3695\/revisions"}],"predecessor-version":[{"id":17247,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3695\/revisions\/17247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/17246"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}