{"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-09-11T19:26:24","modified_gmt":"2026-09-11T22:26:24","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\"><strong>HTML \u00e9 a linguagem que estrutura o conte\u00fado de toda p\u00e1gina da web.<\/strong> Ele define o que \u00e9 t\u00edtulo, o que \u00e9 par\u00e1grafo, onde entra uma imagem e para onde leva cada link \u2014 e \u00e9 a primeira coisa que o navegador l\u00ea ao abrir um site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A sigla vem de <strong>HyperText Markup Language<\/strong>, ou Linguagem de Marca\u00e7\u00e3o de Hipertexto. E a palavra &#8220;marca\u00e7\u00e3o&#8221; \u00e9 a chave: <strong>o HTML n\u00e3o executa nada, ele descreve.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste guia voc\u00ea vai entender como o HTML funciona, o que s\u00e3o tags, a estrutura de um documento, a rela\u00e7\u00e3o com CSS e JavaScript, e por que ele n\u00e3o \u00e9 uma linguagem de programa\u00e7\u00e3o.<\/p>\n\n\n\n<div style=\"border:1px solid #9db4d6; border-left:4px solid #0b3d91; background:#eef3fa; border-radius:8px; padding:18px 22px; margin:24px 0; font-family:Arial, Helvetica, sans-serif;\">\n<div style=\"font-weight:700; color:#0b3d91; margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; font-size:14px;\">Resposta r\u00e1pida<\/div>\n<table style=\"width:100%; border-collapse:collapse; margin-top:4px; font-size:14px; color:#16243d;\">\n<tr><td style=\"padding:6px 8px; width:200px;\"><strong>O que significa<\/strong><\/td><td style=\"padding:6px 8px;\">HyperText Markup Language<\/td><\/tr>\n<tr><td style=\"padding:6px 8px;\"><strong>O que faz<\/strong><\/td><td style=\"padding:6px 8px;\">Estrutura o conte\u00fado da p\u00e1gina<\/td><\/tr>\n<tr><td style=\"padding:6px 8px;\"><strong>\u00c9 programa\u00e7\u00e3o?<\/strong><\/td><td style=\"padding:6px 8px;\">N\u00e3o \u2014 \u00e9 linguagem de <em>marca\u00e7\u00e3o<\/em><\/td><\/tr>\n<tr><td style=\"padding:6px 8px;\"><strong>Quem criou<\/strong><\/td><td style=\"padding:6px 8px;\">Tim Berners-Lee, em 1991<\/td><\/tr>\n<tr><td style=\"padding:6px 8px;\"><strong>Vers\u00e3o atual<\/strong><\/td><td style=\"padding:6px 8px;\">HTML5 \u2014 e desde 2014 \u00e9 um padr\u00e3o vivo, sem novas vers\u00f5es<\/td><\/tr>\n<tr><td style=\"padding:6px 8px;\"><strong>Onde escrever<\/strong><\/td><td style=\"padding:6px 8px;\">Qualquer editor de texto, salvando como <code>.html<\/code><\/td><\/tr>\n<\/table>\n<\/div>\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><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#Os_atributos\" title=\"Os atributos\">Os atributos<\/a><\/li><\/ul><\/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\/#Principais_tags_do_HTML\" title=\"Principais tags do HTML\">Principais tags 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-6\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#Estrutura_do_documento\" title=\"Estrutura do documento\">Estrutura do documento<\/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\/o-que-e-html\/#Texto\" title=\"Texto\">Texto<\/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\/o-que-e-html\/#Tags_semanticas\" title=\"Tags sem\u00e2nticas\">Tags sem\u00e2nticas<\/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\/#Genericas\" title=\"Gen\u00e9ricas\">Gen\u00e9ricas<\/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\/#Links_midia_listas_e_tabelas\" title=\"Links, m\u00eddia, listas e tabelas\">Links, m\u00eddia, listas e tabelas<\/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\/#Formularios\" title=\"Formul\u00e1rios\">Formul\u00e1rios<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" 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-13\" 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-14\" 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-15\" 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-16\" 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-17\" 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-18\" 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-19\" 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-20\" 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-21\" 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-22\" 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-23\" 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-24\" 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-25\" 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.&nbsp; 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 <a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/linguagens-de-programacao\/\" data-type=\"post\" data-id=\"17646\">linguagens<\/a> 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> <\/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 p\u00e1ginas HTML, 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&nbsp;<code>&lt;tag&gt;<\/code>&nbsp;e <code>&lt;\/tag&gt;<\/code>. H\u00e1 tamb\u00e9m tags de estrutura \u00fanica, como a&nbsp; tag <code>&lt;br\/&gt;<\/code> 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 queira escrever um par\u00e1grafo. Chamamos ent\u00e3o a tag <code>&lt;p&gt;<\/code>, escrevemos o par\u00e1grafo e finalmente fechamos a tag com <code>&lt;\/p&gt;<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Meu primeiro par\u00e1grafo.&lt;\/p&gt;<\/code><\/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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Algumas tags n\u00e3o t\u00eam fechamento<\/strong>, e s\u00e3o chamadas de <strong>elementos vazios<\/strong>: elas n\u00e3o envolvem conte\u00fado nenhum, ent\u00e3o n\u00e3o faz sentido fech\u00e1-las. As mais comuns s\u00e3o <code>&lt;img&gt;<\/code>, <code>&lt;br&gt;<\/code>, <code>&lt;hr&gt;<\/code>, <code>&lt;input&gt;<\/code> e <code>&lt;meta&gt;<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>E a ordem do fechamento importa.<\/strong> Tags podem ficar dentro de outras \u2014 \u00e9 assim que a estrutura se forma \u2014, mas precisam ser fechadas na ordem inversa da abertura:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#x2705; <code>&lt;p&gt;Um &lt;strong&gt;destaque&lt;\/strong&gt; aqui.&lt;\/p&gt;<\/code><br>&#x274c; <code>&lt;p&gt;Um &lt;strong&gt;destaque&lt;\/p&gt;&lt;\/strong&gt;<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O navegador tenta consertar o segundo caso, mas o resultado \u00e9 imprevis\u00edvel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Os_atributos\"><\/span>Os atributos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Muitas tags aceitam <strong>atributos<\/strong> \u2014 informa\u00e7\u00f5es extras escritas dentro da tag de abertura, no formato <code>nome=\"valor\"<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/exemplo.com\"&gt;clique aqui&lt;\/a&gt;\n&lt;img src=\"foto.jpg\" alt=\"Descri\u00e7\u00e3o da foto\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>No primeiro caso<\/strong>, o <code>href<\/code> diz para onde o link leva. <strong>No segundo<\/strong>, o <code>src<\/code> diz onde est\u00e1 a imagem e o <code>alt<\/code> descreve o que ela mostra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A tag diz o que \u00e9; o atributo diz os detalhes.<\/strong> Sem o <code>href<\/code>, um <code>&lt;a&gt;<\/code> n\u00e3o leva a lugar nenhum; sem o <code>src<\/code>, um <code>&lt;img&gt;<\/code> n\u00e3o mostra imagem nenhuma.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#x26a0;&#xfe0f; <strong>O <code>alt<\/code> merece aten\u00e7\u00e3o especial:<\/strong> ele \u00e9 o texto lido por leitores de tela e exibido quando a imagem n\u00e3o carrega. <strong>Imagem sem <code>alt<\/code> \u00e9 imagem invis\u00edvel<\/strong> para quem n\u00e3o enxerga \u2014 e para o Google.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para exibir s\u00edmbolos que n\u00e3o est\u00e3o no teclado \u2014 ou os pr\u00f3prios <code>&lt;<\/code> e <code>><\/code> sem que virem tags \u2014, o HTML usa entidades. Nosso guia de <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/caracteres-especiais-acentos-html\/\">caracteres especiais em HTML<\/a> traz a tabela completa.<\/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 o uso di\u00e1rio gira em torno de umas vinte. Vale conhec\u00ea-las agrupadas por fun\u00e7\u00e3o \u2014 e prestar aten\u00e7\u00e3o especial ao terceiro grupo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Estrutura_do_documento\"><\/span>Estrutura do documento<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;html&gt;<\/code><\/strong> \u2014 envolve todo o documento<\/li>\n\n\n\n<li><strong><code>&lt;head&gt;<\/code><\/strong> \u2014 informa\u00e7\u00f5es que n\u00e3o aparecem na tela: t\u00edtulo, metadados, links externos<\/li>\n\n\n\n<li><strong><code>&lt;title&gt;<\/code><\/strong> \u2014 o t\u00edtulo que aparece na aba do navegador e nos resultados de busca<\/li>\n\n\n\n<li><strong><code>&lt;body&gt;<\/code><\/strong> \u2014 tudo que \u00e9 exibido na tela<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Texto\"><\/span>Texto<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;h1&gt;<\/code> a <code>&lt;h6&gt;<\/code><\/strong> \u2014 t\u00edtulos e subt\u00edtulos, do mais importante ao menos<\/li>\n\n\n\n<li><strong><code>&lt;p&gt;<\/code><\/strong> \u2014 par\u00e1grafo<\/li>\n\n\n\n<li><strong><code>&lt;br&gt;<\/code><\/strong> \u2014 <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/quebra-de-linha-html\/\">quebra de linha<\/a><\/li>\n\n\n\n<li><strong><code>&lt;strong&gt;<\/code><\/strong> e <strong><code>&lt;em&gt;<\/code><\/strong> \u2014 destaque forte e \u00eanfase<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tags_semanticas\"><\/span>Tags sem\u00e2nticas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Estas s\u00e3o as que descrevem o papel do conte\u00fado<\/strong>, e n\u00e3o apenas o marcam. Foram a grande novidade do HTML5.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;header&gt;<\/code><\/strong> \u2014 o cabe\u00e7alho da p\u00e1gina ou de uma se\u00e7\u00e3o<\/li>\n\n\n\n<li><strong><code>&lt;nav&gt;<\/code><\/strong> \u2014 a \u00e1rea de navega\u00e7\u00e3o, como o menu<\/li>\n\n\n\n<li><strong><code>&lt;main&gt;<\/code><\/strong> \u2014 o conte\u00fado principal, \u00fanico por p\u00e1gina<\/li>\n\n\n\n<li><strong><code>&lt;article&gt;<\/code><\/strong> \u2014 um conte\u00fado que faz sentido sozinho, como um post<\/li>\n\n\n\n<li><strong><code>&lt;section&gt;<\/code><\/strong> \u2014 uma se\u00e7\u00e3o tem\u00e1tica dentro do conte\u00fado<\/li>\n\n\n\n<li><strong><code>&lt;aside&gt;<\/code><\/strong> \u2014 conte\u00fado lateral ou complementar<\/li>\n\n\n\n<li><strong><code>&lt;footer&gt;<\/code><\/strong> \u2014 o rodap\u00e9<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">&#x26a0;&#xfe0f; <strong>Por que elas importam:<\/strong> um <code>&lt;header&gt;<\/code> e uma <code>&lt;div class=\"header\"&gt;<\/code> produzem exatamente a mesma apar\u00eancia na tela \u2014 <strong>mas s\u00f3 a primeira informa ao navegador, ao buscador e ao leitor de tela que aquilo \u00e9 um cabe\u00e7alho.<\/strong> \u00c9 a diferen\u00e7a entre marcar e significar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Genericas\"><\/span>Gen\u00e9ricas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;div&gt;<\/code><\/strong> \u2014 uma divis\u00e3o sem significado pr\u00f3prio<\/li>\n\n\n\n<li><strong><code>&lt;span&gt;<\/code><\/strong> \u2014 um trecho de texto sem significado pr\u00f3prio<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>As duas existem para quando nenhuma tag sem\u00e2ntica se aplica.<\/strong> Se existe uma que descreve melhor o conte\u00fado, use ela.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Links_midia_listas_e_tabelas\"><\/span>Links, m\u00eddia, listas e tabelas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;a&gt;<\/code><\/strong> \u2014 <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\">o link<\/a>, com o atributo <code>href<\/code>. \u00c9 a tag que define a web<\/li>\n\n\n\n<li><strong><code>&lt;img&gt;<\/code><\/strong> \u2014 <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-img\/\">insere uma imagem<\/a><\/li>\n\n\n\n<li><strong><code>&lt;ul&gt;<\/code>, <code>&lt;ol&gt;<\/code>, <code>&lt;li&gt;<\/code><\/strong> \u2014 lista n\u00e3o ordenada, ordenada, e o item<\/li>\n\n\n\n<li><strong><code>&lt;table&gt;<\/code><\/strong> \u2014 tabela<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Formularios\"><\/span>Formul\u00e1rios<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;form&gt;<\/code><\/strong> \u2014 envolve o formul\u00e1rio<\/li>\n\n\n\n<li><strong><code>&lt;input&gt;<\/code><\/strong> \u2014 os campos<\/li>\n\n\n\n<li><strong><code>&lt;[textarea](https:\/\/www.homehost.com.br\/blog\/criar-sites\/textarea-html\/)&gt;<\/code><\/strong> \u2014 \u00e1rea de texto longo<\/li>\n\n\n\n<li><strong><code>&lt;button&gt;<\/code><\/strong> \u2014 bot\u00e3o<\/li>\n<\/ul>\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><code>&lt;!DOCTYPE html&gt;<\/code><\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ele n\u00e3o \u00e9 decora\u00e7\u00e3o.<\/strong> Sem o DOCTYPE, o navegador entra no chamado <em>quirks mode<\/em> \u2014 um modo de compatibilidade com p\u00e1ginas dos anos 90, em que o layout se comporta de forma diferente e frequentemente quebra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ap\u00f3s isso, iniciamos nosso documento com a tag <strong><code>&lt;html&gt;<\/code><\/strong> que dever\u00e1 ser fechada ao final do documento com <strong><code>&lt;\/html&gt;<\/code><\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Posteriormente, nosso documento dever\u00e1 ter um elemento <strong><code>&lt;head&gt;<\/code><\/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><code>&lt;title&gt;<\/code><\/strong>.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finalmente abrimos ent\u00e3o a tag <strong><code>&lt;body&gt;<\/code><\/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-code\"><code>&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;<\/code><\/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&gt;<\/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><code>&lt;meta\/&gt;<\/code><\/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-code\"><code>&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;<\/code><\/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 sobre 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 Tim<a href=\"https:\/\/www.internethalloffame.org\/\/inductees\/tim-berners-lee\" target=\"_blank\" rel=\"noopener noreferrer\"> Berners-Lee<\/a>, iniciou um projeto baseado na Marca\u00e7\u00e3o de HiperTexto, denominado ENQUIRE. Este projeto foi realizado inicialmente por meio 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&gt;<\/strong>, permitindo a liga\u00e7\u00e3o de uma p\u00e1gina a outra, conhecida como <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a>. &nbsp;A 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,&nbsp; <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 surgiria 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>&nbsp; \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>&nbsp; \u2013 implementa\u00e7\u00e3o na qual os elementos obsoletos s\u00e3o permitidos;<\/li>\n\n\n\n<li><strong>Frameset<\/strong>&nbsp;\u2013 implementa\u00e7\u00e3o direcionada para sites que usam&nbsp;<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,&nbsp; menus, artigos, etc. Com a introdu\u00e7\u00e3o de tags como <strong>&lt;header&gt;, &lt;footer&gt;, &lt;section&gt;, &lt;article&gt;, &lt;nav&gt;<\/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<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, tamanhos 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&gt;&lt;\/style&gt;<\/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 resulta 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 <a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/linguagens-de-programacao\/\" data-type=\"post\" data-id=\"17646\">linguagem de programa\u00e7\u00e3o<\/a> 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<p class=\"wp-block-paragraph\"><strong>O que s\u00e3o atributos HTML?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e3o informa\u00e7\u00f5es extras escritas dentro da tag de abertura, no formato <code>nome=\"valor\"<\/code>. O <code>href<\/code> diz para onde um link leva, o <code>src<\/code> diz onde est\u00e1 uma imagem, e o <code>alt<\/code> descreve o que ela mostra. <strong>A tag diz o que \u00e9; o atributo diz os detalhes.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Para que serve o <code>&lt;!DOCTYPE html&gt;<\/code>?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele informa ao navegador qual vers\u00e3o do HTML esperar. <strong>N\u00e3o \u00e9 decora\u00e7\u00e3o:<\/strong> sem ele, o navegador entra no chamado <em>quirks mode<\/em> \u2014 um modo de compatibilidade com p\u00e1ginas dos anos 90, em que o layout se comporta de forma diferente e frequentemente quebra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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: cores, tamanhos, espa\u00e7amentos e posi\u00e7\u00f5es. O JavaScript define o que acontece: cliques, anima\u00e7\u00f5es, valida\u00e7\u00f5es e atualiza\u00e7\u00f5es sem recarregar. 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, com uma tag 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\":\"O que s\u00e3o atributos HTML?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"S\u00e3o informa\u00e7\u00f5es extras escritas dentro da tag de abertura, no formato nome igual a valor. O href diz para onde um link leva, o src diz onde est\u00e1 uma imagem, e o alt descreve o que ela mostra. A tag diz o que \u00e9; o atributo diz os detalhes.\"}},\n{\"@type\":\"Question\",\"name\":\"Para que serve o DOCTYPE html?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Ele informa ao navegador qual vers\u00e3o do HTML esperar. N\u00e3o \u00e9 decora\u00e7\u00e3o: sem ele, o navegador entra no chamado quirks mode, um modo de compatibilidade com p\u00e1ginas dos anos 90, em que o layout se comporta de forma diferente e frequentemente quebra.\"}},\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 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.\"}},\n{\"@type\":\"Question\",\"name\":\"Onde escrevo o c\u00f3digo HTML?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Em qualquer editor de texto, e 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, e 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>HTML \u00e9 a linguagem que estrutura o conte\u00fado de toda p\u00e1gina da web. Ele define o que \u00e9 t\u00edtulo, o que \u00e9 par\u00e1grafo, onde entra uma imagem e para onde leva cada link \u2014 e \u00e9 a primeira coisa que o navegador l\u00ea ao abrir um site. A sigla vem de HyperText Markup Language, ou [&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 v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\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-09-11T22:26:24+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=\"20 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/o-que-e-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/o-que-e-html\\\/\"},\"author\":{\"name\":\"Rafael Marques\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"headline\":\"O que \u00e9 HTML? Entenda de forma descomplicada\",\"datePublished\":\"2023-06-17T16:14:10+00:00\",\"dateModified\":\"2026-09-11T22:26:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/o-que-e-html\\\/\"},\"wordCount\":3805,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\"},\"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\",\"keywords\":[\"criar um site\",\"css\",\"html\",\"tutoriais\"],\"articleSection\":[\"Tutoriais\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/o-que-e-html\\\/#respond\"]}]},{\"@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-09-11T22:26:24+00:00\",\"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\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\"},\"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\":\"Organization\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\",\"name\":\"Homehost\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/logo-detalhes.png\",\"contentUrl\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/logo-detalhes.png\",\"width\":150,\"height\":48,\"caption\":\"Homehost\"},\"image\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Homehost\\\/\",\"https:\\\/\\\/x.com\\\/Homehost\"]},{\"@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-09-11T22:26:24+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":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#article","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/"},"author":{"name":"Rafael Marques","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"headline":"O que \u00e9 HTML? Entenda de forma descomplicada","datePublished":"2023-06-17T16:14:10+00:00","dateModified":"2026-09-11T22:26:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/"},"wordCount":3805,"commentCount":0,"publisher":{"@id":"https:\/\/www.homehost.com.br\/blog\/#organization"},"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","keywords":["criar um site","css","html","tutoriais"],"articleSection":["Tutoriais"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/#respond"]}]},{"@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-09-11T22:26:24+00:00","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","publisher":{"@id":"https:\/\/www.homehost.com.br\/blog\/#organization"},"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":"Organization","@id":"https:\/\/www.homehost.com.br\/blog\/#organization","name":"Homehost","url":"https:\/\/www.homehost.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2022\/10\/logo-detalhes.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2022\/10\/logo-detalhes.png","width":150,"height":48,"caption":"Homehost"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Homehost\/","https:\/\/x.com\/Homehost"]},{"@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":40,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3695\/revisions"}],"predecessor-version":[{"id":18070,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3695\/revisions\/18070"}],"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}]}}