{"id":4027,"date":"2019-08-05T20:47:23","date_gmt":"2019-08-05T20:47:23","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=4027"},"modified":"2026-06-18T09:29:26","modified_gmt":"2026-06-18T12:29:26","slug":"html-basico","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","title":{"rendered":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Se voc\u00ea pretende criar um site, aprender o HTML b\u00e1sico \u00e9 uma das melhores coisas que voc\u00ea pode fazer! Independentemente de pretender trabalhar com <a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/o-que-e-o-wordpress\/\">WordPress<\/a>, web designer ou desenvolvimento web, conhecer o b\u00e1sico do HTML \u00e9 essencial. Esse conhecimento permite compreender como funciona uma p\u00e1gina web e seus elementos. Dessa forma, voc\u00ea pode criar seus pr\u00f3prios documentos e p\u00e1ginas HTML. Al\u00e9m disso, no futuro poder\u00e1 tamb\u00e9m fazer uso desses recursos para fazer altera\u00e7\u00f5es e manuten\u00e7\u00f5es em p\u00e1ginas j\u00e1 existentes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao final deste artigo, voc\u00ea ter\u00e1 um conhecimento do HTML b\u00e1sico. Portanto, conhecer\u00e1 o suficiente para realizar as sugest\u00f5es acima. Dessa forma, tamb\u00e9m ser\u00e1 poss\u00edvel avan\u00e7ar seus estudos a um n\u00edvel intermedi\u00e1rio e avan\u00e7ado para come\u00e7ar a criar p\u00e1ginas profissionais.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML e CSS s\u00e3o \u00f3timos primeiros passos na web \u2014 para ver onde eles se encaixam no caminho completo, confira o guia de <a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/como-aprender-programacao\/\">como aprender a programar<\/a>. Recomendamos tamb\u00e9m este artigo sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/cursos-de-programacao-gratuitos\/\">cursos de programa\u00e7\u00e3o gratuitos<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><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\/html-basico\/#O_que_e_o_HTML\" title=\"O que \u00e9 o HTML\">O que \u00e9 o 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\/html-basico\/#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\/html-basico\/#As_tags_do_HTML\" title=\"As tags do HTML\">As tags do HTML<\/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\/html-basico\/#Estrutura_basica_de_um_documento_HTML\" title=\"Estrutura b\u00e1sica de um documento HTML\">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-5\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#Tags_importantes_para_o_HTML_basico\" title=\"Tags importantes para o HTML b\u00e1sico\">Tags importantes para o HTML b\u00e1sico<\/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\/html-basico\/#Classes_e_IDs_no_HTML\" title=\"Classes e IDs no HTML\">Classes e IDs no 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\/html-basico\/#Criando_uma_pagina_com_elementos_do_HTML_basico\" title=\"Criando uma p\u00e1gina com elementos do HTML b\u00e1sico\">Criando uma p\u00e1gina com elementos do HTML b\u00e1sico<\/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\/html-basico\/#1o_passo_%E2%80%93_criando_uma_pagina\" title=\"1\u00ba passo &#8211; criando uma p\u00e1gina\">1\u00ba passo &#8211; criando uma p\u00e1gina<\/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\/html-basico\/#2o_passo_%E2%80%93_criando_o_cabecalho\" title=\"2\u00ba passo &#8211; criando o cabe\u00e7alho\">2\u00ba passo &#8211; criando o cabe\u00e7alho<\/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\/html-basico\/#3o_passo_%E2%80%93_criando_a_primeira_secao_com_artigos\" title=\"3\u00ba passo &#8211; criando a primeira se\u00e7\u00e3o com artigos\">3\u00ba passo &#8211; criando a primeira se\u00e7\u00e3o com artigos<\/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\/html-basico\/#4o_passo_%E2%80%93_criando_nossa_segunda_secao_com_iframes_e_uma_tabela\" title=\"4\u00ba passo &#8211; criando nossa segunda se\u00e7\u00e3o com iframes e uma tabela\">4\u00ba passo &#8211; criando nossa segunda se\u00e7\u00e3o com iframes e uma tabela<\/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\/html-basico\/#5o_passo_%E2%80%93_criando_a_terceira_secao_com_um_formulario_de_%E2%80%9Ccontato%E2%80%9D\" title=\"5\u00ba passo &#8211; criando a terceira se\u00e7\u00e3o com um formul\u00e1rio de &#8220;contato&#8221;\">5\u00ba passo &#8211; criando a terceira se\u00e7\u00e3o com um formul\u00e1rio de &#8220;contato&#8221;<\/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\/html-basico\/#6o_passo_%E2%80%93_criando_o_rodape_da_pagina\" title=\"6\u00ba passo &#8211; criando o rodap\u00e9 da p\u00e1gina\">6\u00ba passo &#8211; criando o rodap\u00e9 da p\u00e1gina<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#7o_passo_%E2%80%93_ajustes_finais\" title=\"7\u00ba passo &#8211; ajustes finais\">7\u00ba passo &#8211; ajustes finais<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#Dicas_para_avancar_seus_estudos_em_HTML_basico_e_desenvolvimento_web\" title=\"Dicas para avan\u00e7ar seus estudos em HTML b\u00e1sico e desenvolvimento web\">Dicas para avan\u00e7ar seus estudos em HTML b\u00e1sico e desenvolvimento web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#Perguntas_frequentes\" title=\"Perguntas frequentes\">Perguntas frequentes<\/a><\/li><\/ul><\/nav><\/div>\n<a name=\"top01\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_o_HTML\"><\/span>O que \u00e9 o HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>HTML<\/strong> (HyperText Markup Language) n\u00e3o \u00e9 uma linguagem de programa\u00e7\u00e3o, mas sim de marca\u00e7\u00e3o. Portanto, isso significa que n\u00e3o podemos usar o <strong>HTML<\/strong> para criar funcionalidades din\u00e2micas. Entretanto, o <strong>HTML<\/strong> possibilita a organiza\u00e7\u00e3o e formata\u00e7\u00e3o de documentos, de forma similar ao que fazemos em editores de texto, como o Microsoft Word.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>HTML<\/strong> \u00e9 uma linguagem de marca\u00e7\u00e3o de HiperTexto utilizada para estruturar um documento ou p\u00e1gina para a web. Ou seja, ao visualizar uma p\u00e1gina na internet, voc\u00ea ver\u00e1 a renderiza\u00e7\u00e3o de um c\u00f3digo criado em <strong>HTML<\/strong> em conjunto com outras linguagens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A linguagem <strong>HTML<\/strong> permite criar um c\u00f3digo que \u00e9 interpretado e renderizado pelos navegadores, exibindo o resultado ao usu\u00e1rio. \u00c9 assim que funcionam todas as p\u00e1ginas que voc\u00ea acessa na internet: por tr\u00e1s delas h\u00e1 um c\u00f3digo HTML que o navegador transforma na p\u00e1gina visual que voc\u00ea v\u00ea. Junto com o <strong>CSS<\/strong> e o <strong>JavaScript<\/strong>, o HTML forma os tr\u00eas pilares do desenvolvimento web Front End.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>HTML<\/strong> \u00e9 utilizado para marcar os elementos da p\u00e1gina, ou seja, para estruturar a p\u00e1gina. O <strong>CSS<\/strong> permite que possamos aplicar <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilos<\/a> aos elementos atrav\u00e9s de estilo em cascata. Ou seja, com o CSS, temos controle e modificamos a apresenta\u00e7\u00e3o visual da p\u00e1gina.&nbsp; J\u00e1 o <strong>JavaScript<\/strong> \u00e9 uma linguagem de programa\u00e7\u00e3o que permite adicionar intera\u00e7\u00e3o dentro da sua p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto, se voc\u00ea deseja <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-site-profissional\/\">criar qualquer p\u00e1gina da internet<\/a>, saber pelo menos o HTML b\u00e1sico \u00e9 muito importante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Atualmente o <strong>HTML<\/strong> se encontra na&nbsp;<a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">vers\u00e3o HTML5<\/a>, e \u00e9 padronizada pela <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C (World Wide Web Consortium)<\/a>, uma organiza\u00e7\u00e3o internacional respons\u00e1vel por estabelecer padr\u00f5es para a internet, como as linguagens <strong>XML<\/strong>, <strong>CSS<\/strong> e o <strong>SOAP<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Recomendamos tamb\u00e9m a leitura do nosso artigo sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">o que \u00e9 HTML<\/a>, onde poder\u00e1 compreender melhor sobre sua hist\u00f3ria, sua evolu\u00e7\u00e3o e muito mais.<br>\n<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\">Um documento <strong>HTML<\/strong> nada mais \u00e9 que um documento contendo a extens\u00e3o .<b><i>html<\/i><\/b>&nbsp;ou&nbsp;<b><i>.htm<\/i><\/b><i>. <\/i>A partir deste documento, o navegador faz a leitura do arquivo e renderiza o seu conte\u00fado para que o usu\u00e1rio final possa visualiz\u00e1-lo. Portanto, os arquivos <strong>.html <\/strong>ou <strong>.htm<\/strong> podem ser visualizados em qualquer navegador (como Google Chrome, Opera, Safari, Mozilla Firefox, etc).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Geralmente um <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-buttton\/\">site \u00e9 composto por diversas p\u00e1ginas<\/a> <strong>HTML<\/strong>, 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&nbsp;<strong>.html<\/strong>&nbsp;distintos, sendo um para cada p\u00e1gina do website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dentro desse documento, s\u00e3o escrito diversas linhas de c\u00f3digos de marca\u00e7\u00e3o, ou seja, elementos do HTML. Esses elementos se dividem entre as tags HTML e o seu conte\u00fado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/4-motivos-para-criar-site-com-homehost\/\">Para poder criar<\/a> ou editar um documento HTML, o \u00fanico recurso que voc\u00ea precisa \u00e9 de um editor de texto, como o pr\u00f3prio bloco de notas. Por\u00e9m, para o desenvolvimento recomenda-se utilizar editores especializados, como o <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sublime Text<\/a>, o <a href=\"https:\/\/notepad-plus-plus.org\" target=\"_blank\" rel=\"noopener noreferrer\">Notepad++<\/a>, o <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a>, entre outros. Portanto, verifique qual o editor de texto que mais se adapta ao seu gosto e utilize-o para criar seus c\u00f3digos! Para fins de estudos e testes, recomendamos tamb\u00e9m o <a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Code Pen<\/a>, uma ferramenta completa para teste de c\u00f3digos HTML, CSS e JavaScript diretamente do navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada p\u00e1gina consiste em uma s\u00e9rie de&nbsp;<strong>tags<\/strong>&nbsp;(tamb\u00e9m chamados de elementos) que podem ser consideradas 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>\n<a name=\"top03\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"As_tags_do_HTML\"><\/span>As tags do HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As tags s\u00e3o parte dos elementos do HTML. S\u00e3o usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um c\u00f3digo em <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a>, as tags ser\u00e3o interpretadas pelo navegador, produzindo assim a estrutura e o conte\u00fado visual da p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A principal caracter\u00edstica das tags \u00e9 estarem sempre dentro dos sinais de chevron (sinal de \u201cmaior que\u201d e \u201cmenor que\u201d), ou seja:<strong>&nbsp;&lt; &gt;<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As tags HTML s\u00e3o divididas em dois tipos: as que precisam de fechamento e as que n\u00e3o precisam de fechamento. As tags que precisam de fechamento possuem a sintaxe&nbsp;<strong>&lt;tag&gt;<\/strong> &#8230;<strong>&lt;\/tag&gt;<\/strong>, j\u00e1 as que n\u00e3o precisam de fechamento possuem como estrutura&nbsp;<strong>&lt;tag\/&gt;<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m disso, uma mesma tag pode receber um ou mais atributos, que possuir\u00e1 um valor que modifica sua estrutura ou funcionalidade. Os atributos nada mais s\u00e3o que propriedades capazes de modificar e personalizar a funcionalidade de uma tag. Portanto, podemos utilizar diversos atributos, como largura, altura, dentre outros. Com a vers\u00e3o do HTML5, boa parte dos atributos referente a estiliza\u00e7\u00e3o deixaram de ser utilizados, passando a ser estilizado atrav\u00e9s do <strong>CSS<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode estudar mais a respeito das principais tags do HTML neste&nbsp;<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">nosso artigo sobre as tags HTML<\/a>.<br>\n<a name=\"top04\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Estrutura_basica_de_um_documento_HTML\"><\/span>Estrutura b\u00e1sica de um documento HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A estrutura b\u00e1sica de um documento HTML, ou seja, de uma p\u00e1gina da web, \u00e9 realizada da seguinte forma:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A partir desse c\u00f3digo, podemos desenvolver toda a nossa p\u00e1gina, estruturando como precisarmos. Mas primeiro, \u00e9 bom compreender o que est\u00e1 sendo feito at\u00e9 o momento.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Explicando as tags essenciais<\/h4>\n\n\n\n<style>\n  .struct-grid { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 10px; }\n  .struct-card {\n    border: 1px solid #e5e7eb;\n    border-radius: 12px;\n    background: #fff;\n    padding: 14px 16px;\n    display: flex;\n    gap: 14px;\n    align-items: flex-start;\n  }\n  .struct-tag {\n    font-family: monospace;\n    font-weight: 600;\n    padding: 4px 10px;\n    border-radius: 8px;\n    white-space: nowrap;\n    flex-shrink: 0;\n\n  }\n  .struct-body { display: flex; flex-direction: column; gap: 2px; }\n  .struct-text { color: #4b5563; line-height: 1.55; }\n  .struct-text a { color: #185FA5; font-weight: 500; text-underline-offset: 2px; }\n  .struct-text code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-family: monospace; }\n\n  .t-doctype { background: #EEEDFE; color: #534AB7; }\n  .t-html    { background: #E6F1FB; color: #185FA5; }\n  .t-head    { background: #E1F5EE; color: #0F6E56; }\n  .t-meta    { background: #FAEEDA; color: #854F0B; }\n  .t-title   { background: #FCEBEB; color: #A32D2D; }\n  .t-body    { background: #FCE7F3; color: #9D2463; }\n<\/style>\n\n<div class=\"struct-grid\">\n\n  <div class=\"struct-card\">\n    <span class=\"struct-tag t-doctype\">&lt;!DOCTYPE html&gt;<\/span>\n    <div class=\"struct-body\">\n      <span class=\"struct-text\">Informa ao navegador que o documento usa HTML. Hoje serve basicamente para garantir que a p\u00e1gina se comporte corretamente. Saiba mais no artigo sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/doctype-html\/\">doctype HTML<\/a>.<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"struct-card\">\n    <span class=\"struct-tag t-html\">&lt;html&gt;<\/span>\n    <div class=\"struct-body\">\n      <span class=\"struct-text\">Envolve todo o conte\u00fado da p\u00e1gina HTML \u2014 \u00e9 o elemento raiz que cont\u00e9m todos os outros.<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"struct-card\">\n    <span class=\"struct-tag t-head\">&lt;head&gt;<\/span>\n    <div class=\"struct-body\">\n      <span class=\"struct-text\">Re\u00fane os elementos que n\u00e3o s\u00e3o exibidos na p\u00e1gina, como metadados, t\u00edtulo e as tags <code>&lt;link&gt;<\/code> para folhas de estilo.<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"struct-card\">\n    <span class=\"struct-tag t-meta\">&lt;meta charset&gt;<\/span>\n    <div class=\"struct-body\">\n      <span class=\"struct-text\">Define o conjunto de caracteres do documento. O <code>utf-8<\/code> garante a exibi\u00e7\u00e3o correta de acentos e caracteres especiais do portugu\u00eas.<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"struct-card\">\n    <span class=\"struct-tag t-title\">&lt;title&gt;<\/span>\n    <div class=\"struct-body\">\n      <span class=\"struct-text\">Define o t\u00edtulo da p\u00e1gina \u2014 aquele que aparece na guia (aba) do navegador.<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"struct-card\">\n    <span class=\"struct-tag t-body\">&lt;body&gt;<\/span>\n    <div class=\"struct-body\">\n      <span class=\"struct-text\">Cont\u00e9m todo o conte\u00fado vis\u00edvel da p\u00e1gina, ou seja, tudo que o navegador renderiza e o visitante v\u00ea.<\/span>\n    <\/div>\n  <\/div>\n\n<\/div>\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=\"Tags_importantes_para_o_HTML_basico\"><\/span>Tags importantes para o HTML b\u00e1sico<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Atualmente, no <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\">HTML5<\/a>, j\u00e1 \u00e9 poss\u00edvel encontrar mais que 140 <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tags HTML<\/a>. Por\u00e9m, boa parte dessas n\u00e3o s\u00e3o muito utilizadas, e no dia a dia do desenvolvimento, geralmente encontraremos as mesmas tags sendo utilizadas. Vejamos abaixo uma tabela contendo as tags mais utilizadas e mais importantes para dominar o HTML b\u00e1sico.<\/p>\n\n\n\n<style>\n  .t-wrap { overflow-x: auto; }\n  table { width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }\n  thead tr { background: #f9fafb; }\n  th { padding: 10px 14px; text-align: left; font-weight: 500; color: #6b7280; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }\n  th:first-child { width: 26%; }\n  td { padding: 10px 14px; border-bottom: 1px solid #f3f4f6; color: #111827; vertical-align: top; line-height: 1.5; }\n  tbody tr:last-child td { border-bottom: none; }\n  tbody tr:hover td { background: #f9fafb; }\n  .cat-row td { background: #f3f4f6; font-weight: 500; }\n  .cat-label { display: inline-flex; align-items: center; gap: 7px; }\n  .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }\n  .tag { font-family: monospace; font-weight: 500; padding: 2px 7px; border-radius: 5px; white-space: nowrap; display: inline-block; }\n  td a { color: #185FA5; font-weight: 500; }\n\n  .d-meta { background: #534AB7; } .t-meta { background: #EEEDFE; color: #3B3490; }\n  .d-txt  { background: #185FA5; } .t-txt  { background: #E6F1FB; color: #0C447C; }\n  .d-str  { background: #0F6E56; } .t-str  { background: #E1F5EE; color: #0A4D3C; }\n  .d-list { background: #B7791F; } .t-list { background: #FAEEDA; color: #633806; }\n  .d-form { background: #9D2463; } .t-form { background: #FCE7F3; color: #7A1B4D; }\n  .d-media{ background: #A32D2D; } .t-media{ background: #FCEBEB; color: #791F1F; }\n<\/style>\n\n<div class=\"t-wrap\">\n  <table>\n    <thead>\n      <tr><th>Tag<\/th><th>Descri\u00e7\u00e3o<\/th><\/tr>\n    <\/thead>\n    <tbody>\n\n      <tr class=\"cat-row\"><td colspan=\"2\"><span class=\"cat-label\"><span class=\"dot d-meta\"><\/span> Metadados e recursos (dentro do &lt;head&gt;)<\/span><\/td><\/tr>\n      <tr><td><span class=\"tag t-meta\">&lt;style&gt;<\/span><\/td><td>Introduz um c\u00f3digo CSS ao documento HTML.<\/td><\/tr>\n      <tr><td><span class=\"tag t-meta\">&lt;script&gt;<\/span><\/td><td>Introduz um c\u00f3digo de script, como JavaScript, ao documento HTML.<\/td><\/tr>\n      <tr><td><span class=\"tag t-meta\">&lt;link&gt;<\/span><\/td><td>Faz a liga\u00e7\u00e3o com documentos externos, como fontes ou folhas de estilo.<\/td><\/tr>\n      <tr><td><span class=\"tag t-meta\">&lt;meta&gt;<\/span><\/td><td>Inclui metadados na p\u00e1gina, como descri\u00e7\u00e3o, <a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/favicon\/\">favicon<\/a> e charset.<\/td><\/tr>\n\n      <tr class=\"cat-row\"><td colspan=\"2\"><span class=\"cat-label\"><span class=\"dot d-txt\"><\/span> Texto e conte\u00fado<\/span><\/td><\/tr>\n      <tr><td><span class=\"tag t-txt\">&lt;h1&gt;<\/span> a <span class=\"tag t-txt\">&lt;h6&gt;<\/span><\/td><td>Definem t\u00edtulos e subt\u00edtulos, de 1 a 6, sendo o h1 o mais importante e o h6 o de menor import\u00e2ncia.<\/td><\/tr>\n      <tr><td><span class=\"tag t-txt\">&lt;p&gt;<\/span><\/td><td>Define um par\u00e1grafo.<\/td><\/tr>\n      <tr><td><span class=\"tag t-txt\">&lt;span&gt;<\/span><\/td><td>Define um trecho de texto em linha, sem quebrar o fluxo.<\/td><\/tr>\n      <tr><td><span class=\"tag t-txt\">&lt;br&gt;<\/span><\/td><td>Realiza uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/quebra-de-linha-html\/\">quebra de linha<\/a>.<\/td><\/tr>\n      <tr><td><span class=\"tag t-txt\">&lt;a&gt;<\/span><\/td><td>Cria um <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\">link<\/a>; com o atributo <span class=\"tag t-txt\">href<\/span> \u00e9 a principal caracter\u00edstica da web.<\/td><\/tr>\n\n      <tr class=\"cat-row\"><td colspan=\"2\"><span class=\"cat-label\"><span class=\"dot d-str\"><\/span> Estrutura e sem\u00e2ntica<\/span><\/td><\/tr>\n      <tr><td><span class=\"tag t-str\">&lt;header&gt;<\/span><\/td><td>Define um cabe\u00e7alho.<\/td><\/tr>\n      <tr><td><span class=\"tag t-str\">&lt;nav&gt;<\/span><\/td><td>Define uma \u00e1rea de navega\u00e7\u00e3o, como menus.<\/td><\/tr>\n      <tr><td><span class=\"tag t-str\">&lt;section&gt;<\/span><\/td><td>Define uma se\u00e7\u00e3o da p\u00e1gina.<\/td><\/tr>\n      <tr><td><span class=\"tag t-str\">&lt;article&gt;<\/span><\/td><td>Define um artigo ou conte\u00fado independente.<\/td><\/tr>\n      <tr><td><span class=\"tag t-str\">&lt;div&gt;<\/span><\/td><td>Define uma divis\u00e3o gen\u00e9rica (sem valor sem\u00e2ntico).<\/td><\/tr>\n      <tr><td><span class=\"tag t-str\">&lt;footer&gt;<\/span><\/td><td>Define um rodap\u00e9.<\/td><\/tr>\n\n      <tr class=\"cat-row\"><td colspan=\"2\"><span class=\"cat-label\"><span class=\"dot d-list\"><\/span> Tabelas e listas<\/span><\/td><\/tr>\n      <tr><td><span class=\"tag t-list\">&lt;table&gt;<\/span><\/td><td>Define uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\">tabela<\/a>.<\/td><\/tr>\n      <tr><td><span class=\"tag t-list\">&lt;tr&gt;<\/span><\/td><td>Define uma linha da tabela.<\/td><\/tr>\n      <tr><td><span class=\"tag t-list\">&lt;td&gt;<\/span><\/td><td>Define uma c\u00e9lula da tabela.<\/td><\/tr>\n      <tr><td><span class=\"tag t-list\">&lt;ol&gt;<\/span><\/td><td>Define uma lista ordenada.<\/td><\/tr>\n      <tr><td><span class=\"tag t-list\">&lt;ul&gt;<\/span><\/td><td>Define uma lista n\u00e3o ordenada.<\/td><\/tr>\n      <tr><td><span class=\"tag t-list\">&lt;li&gt;<\/span><\/td><td>Define um item de lista.<\/td><\/tr>\n\n      <tr class=\"cat-row\"><td colspan=\"2\"><span class=\"cat-label\"><span class=\"dot d-form\"><\/span> Formul\u00e1rios<\/span><\/td><\/tr>\n      <tr><td><span class=\"tag t-form\">&lt;form&gt;<\/span><\/td><td>Define um <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\">formul\u00e1rio<\/a>.<\/td><\/tr>\n      <tr><td><span class=\"tag t-form\">&lt;input&gt;<\/span><\/td><td>Define os campos do formul\u00e1rio.<\/td><\/tr>\n      <tr><td><span class=\"tag t-form\">&lt;textarea&gt;<\/span><\/td><td>Define uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/textarea-html\/\">\u00e1rea de texto<\/a> para o usu\u00e1rio digitar.<\/td><\/tr>\n      <tr><td><span class=\"tag t-form\">&lt;button&gt;<\/span><\/td><td>Define um bot\u00e3o.<\/td><\/tr>\n\n      <tr class=\"cat-row\"><td colspan=\"2\"><span class=\"cat-label\"><span class=\"dot d-media\"><\/span> M\u00eddia e incorpora\u00e7\u00e3o<\/span><\/td><\/tr>\n      <tr><td><span class=\"tag t-media\">&lt;img&gt;<\/span><\/td><td>Insere uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-img\/\">imagem<\/a> no documento.<\/td><\/tr>\n      <tr><td><span class=\"tag t-media\">&lt;iframe&gt;<\/span><\/td><td>Incorpora o conte\u00fado de <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/iframe-html\/\">outra p\u00e1gina<\/a>.<\/td><\/tr>\n      <tr><td><span class=\"tag t-media\">&lt;video&gt;<\/span><\/td><td>Insere um campo de v\u00eddeo.<\/td><\/tr>\n\n    <\/tbody>\n  <\/table>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de prosseguir, recomendamos que leia todos os t\u00f3picos anteriores desse artigo. Tamb\u00e9m recomendamos que j\u00e1 tenha lido tamb\u00e9m os nossos artigos sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tags HTML<\/a>, <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">o que \u00e9 HTML<\/a> e tamb\u00e9m <a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">sobre o HTML5<\/a>.<br>\n<a name=\"top06\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Classes_e_IDs_no_HTML\"><\/span>Classes e IDs no HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As classes e os IDs s\u00e3o amplamente utilizados dentro dos elementos HTML. Eles definem um classe ou um ID \u00fanico a uma ou mais tags HTML. Sua maior utilidade \u00e9 para manipula\u00e7\u00e3o dos elementos, tanto atrav\u00e9s do CSS quanto de scripts. Portanto, entender como funcionam \u00e9 uma das prioridades para se entender o b\u00e1sico do HTML.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Classes<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Para atribuir uma ou mais classes ao elemento, basta incluir o atributo <strong>class=&#8221;&#8230;&#8221;<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo, se temos diversos elementos de par\u00e1grafo, e queremos que os dois primeiros recebam a classe &#8220;blue&#8221; e os dois \u00faltimos a classe &#8220;red&#8221;, podemos fazer conforme o c\u00f3digo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p class=\"blue\"&gt;Paragrafo da classe blue&lt;\/p&gt;\n&lt;p class=\"blue\"&gt;Paragrafo da classe blue&lt;\/p&gt;\n&lt;p class=\"red\"&gt;Paragrafo da classe red&lt;\/p&gt;\n&lt;p class=\"red\"&gt;Paragrafo da classe red&lt;\/p&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Digamos tamb\u00e9m que queiramos que o primeiro elemento das classes acima receba tamb\u00e9m uma classe chamada &#8220;primeiro&#8221;. Para isto, basta acrescentar a classe &#8220;primeiro&#8221;, separada apenas com um espa\u00e7amento entre ela e as demais classes:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p class=\"blue primeiro\"&gt;Paragrafo da classe blue&lt;\/p&gt; \n&lt;p class=\"blue\"&gt;Paragrafo da classe blue&lt;\/p&gt; \n&lt;p class=\"red primeiro\"&gt;Paragrafo da classe red&lt;\/p&gt; \n&lt;p class=\"red\"&gt;Paragrafo da classe red&lt;\/p&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto, podemos incluir uma ou mais classes a qualquer elemento, e al\u00e9m disso, v\u00e1rios elementos podem receber uma mesma classe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No CSS, JavaScript e outros, para poder reconhecer e selecionar uma classe, utilizamos um &#8220;<strong>.<\/strong>&#8221; e o nome da classe. Ou seja, nos casos acima, utilizar\u00edamos &#8220;<strong>.blue<\/strong>&#8220;, &#8220;<strong>.red<\/strong>&#8221; e &#8220;<strong>.primeiro<\/strong>&#8220;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">IDs<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">J\u00e1 os IDs s\u00e3o parecidos com as classes, por\u00e9m eles s\u00e3o \u00fanicos. S\u00f3 podem ser utilizados em um \u00fanico elemento, portanto n\u00e3o podem ser repetidos. Para declarar o ID, basta chamar o atributo <strong>id=&#8221;&#8230;&#8221;<\/strong>. Portanto, digamos que o c\u00f3digo tenha tr\u00eas&nbsp;<strong>&lt;div&gt; <\/strong>e desejamos que a primeira receba o ID do &#8220;<strong>primeira_div<\/strong>&#8220;, para isso basta usar o c\u00f3digo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div id=\"primeira_div\"&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;\/div&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto, ao declarar a id &#8220;<strong>primeira_div<\/strong>&#8221; \u00e0 primeira <strong>&lt;div&gt;<\/strong>,&nbsp; nenhum outro elemento do HTML, mesmo que referente a outra tag, dever\u00e1 receber este ID. Ele \u00e9 \u00fanico e exclusivo deste elemento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Diferentemente das classes, um ID \u00e9 reconhecido e selecionado no CSS, JavaScript e outros atrav\u00e9s do &#8220;<strong>#<\/strong>&#8220;. Ou seja, no exemplo acima, o id seria reconhecida no <strong>CSS<\/strong> por &#8220;<strong>#primeira_div<\/strong>&#8220;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um elemento pode receber mais que um ID, por\u00e9m recomenda-se utilizar apenas um \u00fanico ID em um mesmo elemento.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mesclando classes e IDs<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar de terem utilidades parecidas, por\u00e9m diferentes, as classes e os IDs s\u00e3o atributos que podem ser utilizados em conjunto. Um elemento que receba um ID tamb\u00e9m pode receber uma ou mais classes. Al\u00e9m disso, uma classe pode receber o mesmo nome que um ID, e vice-versa, sem que isso afete sua funcionalidade. Por\u00e9m, para melhor organiza\u00e7\u00e3o, \u00e9 recomendado evitar essa pr\u00e1tica e manter os nomes sempre diferentes entre IDs e classes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div id=\"primeira_div\"&gt;&lt;\/div&gt;\n&lt;div class=\"divisao\"&gt;&lt;\/div&gt;\n&lt;div id=\"terceira_div\" class=\"divisao\"&gt;&lt;\/div&gt;\n&lt;div id=\"quarta_div\" class=\"quarta_div\"&gt;&lt;\/div&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><a name=\"top07\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criando_uma_pagina_com_elementos_do_HTML_basico\"><\/span>Criando uma p\u00e1gina com elementos do HTML b\u00e1sico<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Neste momento, se voc\u00ea leu e acompanhou os t\u00f3picos anteriores, j\u00e1 pode dizer que compreende o b\u00e1sico do HTML. Por\u00e9m, assim como qualquer linguagem de computa\u00e7\u00e3o, seja de marca\u00e7\u00e3o ou programa\u00e7\u00e3o, uma das coisas mais importantes a se fazer \u00e9 praticar. Portanto, vamos agora colocar em pr\u00e1tica nossos estudos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos criar uma p\u00e1gina utilizando o b\u00e1sico do HTML passo a passo. Observe que n\u00e3o vamos utilizar o CSS e nem o JavaScript. Por\u00e9m, com essa estrutura, a &nbsp;p\u00e1gina j\u00e1 estar\u00e1 pronta para depois receber uma estiliza\u00e7\u00e3o e intera\u00e7\u00f5es, atrav\u00e9s do CSS e do JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1o_passo_%E2%80%93_criando_uma_pagina\"><\/span>1\u00ba passo &#8211; criando uma p\u00e1gina<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Inicialmente, vamos criar um documento com a extens\u00e3o <strong>.html<\/strong>. Vamos utilizar como exemplo o arquivo <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-arquivo-index-html\/\"><strong>index.html<\/strong><\/a>. Posteriormente, vamos iniciar criando uma estrutura b\u00e1sica do HTML e incluindo um t\u00edtulo. Observe que vamos incluir um atributo <strong>lang<\/strong> com o valor <strong>pt-br<\/strong>&nbsp;a tag <strong>&lt;html&gt;<\/strong>. Dessa forma, o navegador e os mecanismos de busca entender\u00e3o que o nosso documento HTML se trata de um documento no idioma portugu\u00eas do Brasil (<strong>pt-br<\/strong>). Portanto, vejamos o c\u00f3digo da p\u00e1gina abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;title&gt;Aprendendo o HTML B\u00e1sico&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2o_passo_%E2%80%93_criando_o_cabecalho\"><\/span>2\u00ba passo &#8211; criando o cabe\u00e7alho<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Agora que j\u00e1 criamos a estrutura b\u00e1sica, vamos criar a primeira divis\u00e3o da p\u00e1gina HTML. Inicialmente vamos criar um header b\u00e1sico no HTML, contendo apenas um t\u00edtulo com uma descri\u00e7\u00e3o e um menu, em forma de lista n\u00e3o ordenada. Por\u00e9m, por enquanto, vamos manter no menu a lista contendo apenas itens sem descri\u00e7\u00e3o. Ao finalizar nosso projeto, voltamos a mexer nessa parte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, nosso c\u00f3digo agora ser\u00e1:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;title&gt;Aprendendo o HTML B\u00e1sico&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;h1&gt;Minha primeira p\u00e1gina HTML&lt;\/h1&gt;\n        &lt;p&gt;Aprendendo HTML B\u00e1sico com exercicio pr\u00e1tico&lt;\/p&gt;\n        &lt;br\/&gt;\n        &lt;nav&gt;\n            &lt;p&gt;Menu:&lt;\/p&gt;\n            &lt;ul&gt;\n                &lt;li&gt;item 1&lt;\/li&gt;\n                &lt;li&gt;item 2&lt;\/li&gt;\n                &lt;li&gt;item 3&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto, nossa p\u00e1gina j\u00e1 come\u00e7a a ganhar vida. Se abrir o arquivo no navegador, j\u00e1 podemos visualizar a p\u00e1gina como na imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico01.jpg\" alt=\"Exemplo 01 de HTML B\u00e1sico\" class=\"wp-image-4033\" width=\"555\" height=\"293\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico01.jpg 555w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico01-300x158.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico01-1x1.jpg 1w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3o_passo_%E2%80%93_criando_a_primeira_secao_com_artigos\"><\/span>3\u00ba passo &#8211; criando a primeira se\u00e7\u00e3o com artigos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Agora que j\u00e1 criamos o cabe\u00e7alho, vamos continuar a formata\u00e7\u00e3o da p\u00e1gina inserindo elementos de texto. Inicialmente vamos incluir uma divis\u00e3o <strong>&lt;main&gt;<\/strong> pois conter\u00e1 o conte\u00fado principal da p\u00e1gina. Posteriormente vamos criar uma se\u00e7\u00e3o e dentro dela, vamos incluir dois artigos, sendo que um deles conter\u00e1 tamb\u00e9m a imagem abaixo, que dever\u00e1 ser salva na mesma pasta do documento HTML.:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/img_exemplo.jpg\" alt=\"img_exemplo para utilizar em nossa p\u00e1gina\" class=\"wp-image-4034\" width=\"596\" height=\"437\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/img_exemplo.jpg 596w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/img_exemplo-300x220.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/img_exemplo-1x1.jpg 1w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto, vamos acrescentar ao nosso c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;main&gt;<br>    &lt;section id=\"secao_principal\"&gt;<br>        &lt;h2&gt;Sobre o artigo HTML B\u00e1sico&lt;\/h2&gt;<br>        &lt;article&gt;<br>            &lt;h3&gt;O que aprendi com o artigo HTML B\u00e1sico&lt;\/h3&gt;<br>            &lt;p&gt;Inicialmente, aprendi sobre o Que \u00e9 HTML&lt;\/p&gt;<br>            &lt;p&gt;Posteriormente aprendi como funciona o HTML e sua estrutura b\u00e1sica&lt;\/p&gt;<br>            &lt;p&gt;Posteriormente aprendi sobre as Tags do HTML&lt;\/p&gt;<br>            &lt;p&gt;Posteriormente aprendi sobre classes e IDs&lt;\/p&gt;<br>            &lt;p&gt;...&lt;\/p&gt;<br>            &lt;img src=\"img_exemplo.jpg\"&gt;<br>        &lt;\/article&gt;<br>        &lt;article&gt;<br>            &lt;h3&gt;O que estou aprendendo agora:&lt;\/h3&gt;<br>            &lt;p&gt;Agora estou fazendo exercicios pr\u00e1ticos para criar uma p\u00e1gina HTML!&lt;\/p&gt;<br>        &lt;\/article&gt;<br>    &lt;\/section&gt;<br>&lt;\/main&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora nossa p\u00e1gina j\u00e1 come\u00e7a a ganhar uma complexidade maior. Vejamos na imagem abaixo como deve ficar a p\u00e1gina com os exemplos do c\u00f3digo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico02.jpg\" alt=\"Exemplo 02 de Html B\u00e1sico\" class=\"wp-image-4035\" width=\"518\" height=\"866\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico02.jpg 518w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico02-179x300.jpg 179w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico02-1x2.jpg 1w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4o_passo_%E2%80%93_criando_nossa_segunda_secao_com_iframes_e_uma_tabela\"><\/span>4\u00ba passo &#8211; criando nossa segunda se\u00e7\u00e3o com iframes e uma tabela<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Agora que j\u00e1 criamos o conte\u00fado principal, vamos criar uma segunda se\u00e7\u00e3o utilizando os recursos de <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/iframe-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">iframes<\/a> e tamb\u00e9m contendo <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">uma tabela<\/a> contendo as tags de t\u00edtulo. Portanto, vejamos abaixo a continua\u00e7\u00e3o do nosso c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;section id=\"secao_2\"&gt;<br>    &lt;div class=\"divisao\"&gt;<br>        &lt;h2&gt;Onde aprender mais sobre HTML B\u00e1sico&lt;\/h2&gt;<br>        &lt;p&gt;Para aprender mais sobre HTML B\u00e1sico e outros conte\u00fados podemos acessar o blog da Homehost&lt;\/p&gt;<br>        &lt;iframe width=\"400px\" height=\"400px\" src=\"https:\/\/www.homehost.com.br\/blog\/\"&gt;&lt;\/iframe&gt;<br>        &lt;p&gt;&lt;a href=\"https:\/\/www.homehost.com.br\/blog\/\"&gt;Site do blog da Home Host&lt;\/a&gt;&lt;\/p&gt;<br>    &lt;\/div&gt;<br>    &lt;br&gt;<br>    &lt;div&gt;<br>        &lt;h2&gt;Minha primeira tabela&lt;\/h2&gt;<br>        &lt;p&gt;Minha tabela contendo as tags de t\u00edtulo&lt;\/p&gt;<br>        &lt;table&gt;<br>            &lt;tr&gt;<br>                &lt;th&gt;tag&lt;\/th&gt;<br>                &lt;th&gt;descri\u00e7\u00e3o&lt;\/th&gt;<br>                &lt;th&gt;exemplo&lt;\/th&gt;<br>            &lt;\/tr&gt;<br>            &lt;tr&gt;<br>                &lt;td&gt;h1&lt;\/td&gt;<br>                &lt;td&gt;T\u00edtulo 1&lt;\/td&gt;<br>                &lt;td&gt;&lt;h1&gt;exemplo&lt;\/h1&gt;&lt;\/td&gt;<br>            &lt;\/tr&gt;<br>            &lt;tr&gt;<br>                &lt;td&gt;h2&lt;\/td&gt;<br>                &lt;td&gt;T\u00edtulo 2&lt;\/td&gt;<br>                &lt;td&gt;&lt;h2&gt;exemplo&lt;\/h2&gt;&lt;\/td&gt;<br>            &lt;\/tr&gt;<br>            &lt;tr&gt;<br>                &lt;td&gt;h3&lt;\/td&gt;<br>                &lt;td&gt;T\u00edtulo 3&lt;\/td&gt;<br>                &lt;td&gt;&lt;h3&gt;exemplo&lt;\/h3&gt;&lt;\/td&gt;<br>            &lt;\/tr&gt;<br>            &lt;tr&gt;<br>                &lt;td&gt;h4&lt;\/td&gt;<br>                &lt;td&gt;T\u00edtulo 4&lt;\/td&gt;<br>                &lt;td&gt;&lt;h4&gt;exemplo&lt;\/h4&gt;&lt;\/td&gt;<br>            &lt;\/tr&gt;<br>            &lt;tr&gt;<br>                &lt;td&gt;h5&lt;\/td&gt;<br>                &lt;td&gt;T\u00edtulo 5&lt;\/td&gt;<br>                &lt;td&gt;&lt;h5&gt;exemplo&lt;\/h5&gt;&lt;\/td&gt;<br>            &lt;\/tr&gt;<br>            &lt;tr&gt;<br>                &lt;td&gt;h6&lt;\/td&gt;<br>                &lt;td&gt;T\u00edtulo 6&lt;\/td&gt;<br>                &lt;td&gt;&lt;h6&gt;exemplo&lt;\/h6&gt;&lt;\/td&gt;<br>            &lt;\/tr&gt;<br>        &lt;\/table&gt;<br>    &lt;\/div&gt;<br>&lt;\/section&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, esta se\u00e7\u00e3o da p\u00e1gina ficar\u00e1 como no exemplo da imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico03.jpg\" alt=\"Exemplo da sess\u00e3o da nossa pagina\" class=\"wp-image-4036\" width=\"551\" height=\"879\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico03.jpg 551w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico03-188x300.jpg 188w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico03-1x2.jpg 1w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5o_passo_%E2%80%93_criando_a_terceira_secao_com_um_formulario_de_%E2%80%9Ccontato%E2%80%9D\"><\/span>5\u00ba passo &#8211; criando a terceira se\u00e7\u00e3o com um formul\u00e1rio de &#8220;contato&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Anteriormente <a href=\"https:\/\/www.homehost.com.br\/blog\/contas-de-email\/visitantes-do-meu-site-podem-criar-e-mails-por-conta-propria\/\">criamos sess\u00f5es contendo<\/a> textos, imagem e at\u00e9 mesmo iframe. Nesta se\u00e7\u00e3o, vamos atribuir um ID contato. Portanto, vamos incluir nela um formul\u00e1rio de contato.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo, por se tratar de HTML b\u00e1sico, n\u00e3o vamos explicar muito a respeito de como enviar um formul\u00e1rio. Por\u00e9m, posteriormente voc\u00ea pode aprofundar estas quest\u00f5es no nosso artigo sobre <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">formul\u00e1rios HTML<\/a>. Desta forma voc\u00ea estar\u00e1 apto a incluir formul\u00e1rios com envio para e-mail.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos continuar com a p\u00e1gina de HTML b\u00e1sico, criando agora a seguinte se\u00e7\u00e3o contendo formul\u00e1rio:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;section id=\"contato\"&gt;<br>    &lt;h2&gt;Entre em contato&lt;\/h2&gt;<br>    &lt;p&gt;Preencha o formul\u00e1rio abaixo para poder entrar em contato!&lt;\/p&gt;<br>    &lt;form method=\"POST\"&gt;<br>        &lt;div&gt;<br>            &lt;span&gt;Nome:&lt;\/span&gt;<br>            &lt;input type=\"text\" name=\"nome\"&gt;<br>        &lt;\/div&gt;<br>        &lt;div&gt;<br>            &lt;span&gt;Email:&lt;\/span&gt;<br>            &lt;input type=\"email\" name=\"email\"&gt;<br>        &lt;\/div&gt;<br>        &lt;div&gt;<br>            &lt;span&gt;Mensagem:&lt;\/span&gt;<br>            &lt;textarea&gt;&lt;\/textarea&gt;<br>        &lt;\/div&gt;<br>        &lt;div&gt;<br>            &lt;input type=\"submit\" value=\"enviar\"&gt;<br>        &lt;\/div&gt;<br>    &lt;\/form&gt;<br>&lt;\/section&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Com esse c\u00f3digo, agora vamos verificar que ao abrir a p\u00e1gina ela conter\u00e1 um formul\u00e1rio ao final. O resultado ser\u00e1 como na imagem de exemplo abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico04.jpg\" alt=\"Criando um formul\u00e1rio de contato ao nossa p\u00e1gina HTML\" class=\"wp-image-4037\" width=\"567\" height=\"250\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico04.jpg 567w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico04-300x132.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico04-1x1.jpg 1w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6o_passo_%E2%80%93_criando_o_rodape_da_pagina\"><\/span>6\u00ba passo &#8211; criando o rodap\u00e9 da p\u00e1gina<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Agora que j\u00e1 criamos toda a estrutura da p\u00e1gina, vamos finalizar incluindo nela um rodap\u00e9. Este rodap\u00e9 conter\u00e1 apenas uma mensagem. Portanto, vejamos o c\u00f3digo do nosso rodap\u00e9 abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;footer&gt;\n    &lt;p&gt;Todos os direitos reservados&lt;\/p&gt;\n&lt;\/footer&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Com isso, logo abaixo do nossa se\u00e7\u00e3o contato, temos ent\u00e3o o rodap\u00e9 conforme a imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico05.jpg\" alt=\"Criando um rodap\u00e9 para nossa Pagina HTML B\u00e1sico\" class=\"wp-image-4038\" width=\"496\" height=\"292\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico05.jpg 496w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico05-300x177.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico05-1x1.jpg 1w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7o_passo_%E2%80%93_ajustes_finais\"><\/span>7\u00ba passo &#8211; ajustes finais<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ao chegar at\u00e9 aqui, significa que j\u00e1 conclu\u00edmos toda nossa p\u00e1gina. Por\u00e9m lembra-se que criamos em nosso cabe\u00e7alho um menu que modificar\u00edamos depois?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pois bem, voc\u00ea deve ter percebido que inclu\u00edmos um ID a todas nossas sess\u00f5es. Dessa forma, vamos agora modificar o menu, incluindo um link que ao ser clicado redirecione diretamente \u00e0s sess\u00f5es. Portanto, nosso cabe\u00e7alho da p\u00e1gina HTML agora ser\u00e1 como no c\u00f3digo do exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;header&gt;<br>        &lt;h1&gt;Minha primeira p\u00e1gina HTML&lt;\/h1&gt;<br>        &lt;p&gt;Aprendendo HTML B\u00e1sico com exercicio pr\u00e1tico&lt;\/p&gt;<br>        &lt;br\/&gt;<br>        &lt;nav&gt;<br>            &lt;p&gt;Menu:&lt;\/p&gt;<br>            &lt;ul&gt;<br>                &lt;li&gt;&lt;a href=\"#secao_principal\"&gt;Sobre o artigo HTML B\u00e1sicol&lt;\/a&gt;&lt;\/li&gt;<br>                &lt;li&gt;&lt;a href=\"#secao_2\"&gt;Onde aprender mais sobre HTML B\u00e1sico&lt;\/a&gt;&lt;\/li&gt;<br>                &lt;li&gt;&lt;a href=\"#contato\"&gt;Entre em Contato&lt;\/a&gt;&lt;\/li&gt;<br>            &lt;\/ul&gt;<br>        &lt;\/nav&gt;<br>    &lt;\/header&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto, o cabe\u00e7alho conter\u00e1 agora um menu conforme o da imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico06.jpg\" alt=\"Finalizando nossa p\u00e1gina de HTML B\u00e1sico\" class=\"wp-image-4039\" width=\"582\" height=\"307\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico06.jpg 582w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico06-300x158.jpg 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_basico06-1x1.jpg 1w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Observe que agora, ao clicar em qualquer um dos itens da lista, a p\u00e1gina ser\u00e1 direcionada diretamente para a posi\u00e7\u00e3o dos IDs referenciados no link.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finalizamos ent\u00e3o a nossa p\u00e1gina contendo elementos de HTML b\u00e1sico.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, voc\u00ea pode utilizar o c\u00f3digo final para estudar e modificar. O mesmo se encontra no exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br>&lt;html lang=\"pt-br\"&gt;<br>&lt;head&gt;<br>    &lt;title&gt;Aprendendo o HTML B\u00e1sico&lt;\/title&gt;<br>    &lt;meta charset=\"utf-8\"&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br>    &lt;header&gt;<br>        &lt;h1&gt;Minha primeira p\u00e1gina HTML&lt;\/h1&gt;<br>        &lt;p&gt;Aprendendo HTML B\u00e1sico com exercicio pr\u00e1tico&lt;\/p&gt;<br>        &lt;br\/&gt;<br>        &lt;nav&gt;<br>            &lt;p&gt;Menu:&lt;\/p&gt;<br>            &lt;ul&gt;<br>                &lt;li&gt;&lt;a href=\"#secao_principal\"&gt;Sobre o artigo HTML B\u00e1sicol&lt;\/a&gt;&lt;\/li&gt;<br>                &lt;li&gt;&lt;a href=\"#secao_2\"&gt;Onde aprender mais sobre HTML B\u00e1sico&lt;\/a&gt;&lt;\/li&gt;<br>                &lt;li&gt;&lt;a href=\"#contato\"&gt;Entre em Contato&lt;\/a&gt;&lt;\/li&gt;<br>            &lt;\/ul&gt;<br>        &lt;\/nav&gt;<br>    &lt;\/header&gt;<br><br>    &lt;main&gt;<br>        &lt;section id=\"secao_principal\"&gt;<br>            &lt;h2&gt;Sobre o artigo HTML B\u00e1sico&lt;\/h2&gt;<br>            &lt;article&gt;<br>                &lt;h3&gt;O que aprendi com o artigo HTML B\u00e1sico&lt;\/h3&gt;<br>                &lt;p&gt;Inicialmente, aprendi sobre o Que \u00e9 HTML&lt;\/p&gt;<br>                &lt;p&gt;Posteriormente aprendi como funciona o HTML e sua estrutura b\u00e1sica&lt;\/p&gt;<br>                &lt;p&gt;Posteriormente aprendi sobre as Tags do HTML&lt;\/p&gt;<br>                &lt;p&gt;Posteriormente aprendi sobre classes e IDs&lt;\/p&gt;<br>                &lt;p&gt;...&lt;\/p&gt;<br>                &lt;img src=\"img_exemplo.jpg\"&gt;<br>            &lt;\/article&gt;<br>            &lt;article&gt;<br>                &lt;h3&gt;O que estou aprendendo agora:&lt;\/h3&gt;<br>                &lt;p&gt;Agora estou fazendo exercicios pr\u00e1ticos para criar uma p\u00e1gina HTML!&lt;\/p&gt;<br>            &lt;\/article&gt;<br>        &lt;\/section&gt;<br>    &lt;\/main&gt;<br>    &lt;br\/&gt;<br>    &lt;br\/&gt;<br>    &lt;section id=\"secao_2\"&gt;<br>        &lt;div class=\"divisao\"&gt;<br>            &lt;h2&gt;Onde aprender mais sobre HTML B\u00e1sico&lt;\/h2&gt;<br>            &lt;p&gt;Para aprender mais sobre HTML B\u00e1sico e outros conte\u00fados podemos acessar o blog da Homehost&lt;\/p&gt;<br>            &lt;iframe width=\"400px\" height=\"400px\" src=\"https:\/\/www.homehost.com.br\/blog\/\"&gt;&lt;\/iframe&gt;<br>            &lt;p&gt;&lt;a href=\"https:\/\/www.homehost.com.br\/blog\/\"&gt;Site do blog da Home Host&lt;\/a&gt;&lt;\/p&gt;<br>        &lt;\/div&gt;<br>        &lt;br&gt;<br>        &lt;div&gt;<br>            &lt;h2&gt;Minha primeira tabela&lt;\/h2&gt;<br>            &lt;p&gt;Minha tabela contendo as tags de t\u00edtulo&lt;\/p&gt;<br>            &lt;table&gt;<br>                &lt;tr&gt;<br>                    &lt;th&gt;tag&lt;\/th&gt;<br>                    &lt;th&gt;descri\u00e7\u00e3o&lt;\/th&gt;<br>                    &lt;th&gt;exemplo&lt;\/th&gt;<br>                &lt;\/tr&gt;<br>                &lt;tr&gt;<br>                    &lt;td&gt;h1&lt;\/td&gt;<br>                    &lt;td&gt;T\u00edtulo 1&lt;\/td&gt;<br>                    &lt;td&gt;&lt;h1&gt;exemplo&lt;\/h1&gt;&lt;\/td&gt;<br>                &lt;\/tr&gt;<br>                &lt;tr&gt;<br>                    &lt;td&gt;h2&lt;\/td&gt;<br>                    &lt;td&gt;T\u00edtulo 2&lt;\/td&gt;<br>                    &lt;td&gt;&lt;h2&gt;exemplo&lt;\/h2&gt;&lt;\/td&gt;<br>                &lt;\/tr&gt;<br>                &lt;tr&gt;<br>                    &lt;td&gt;h3&lt;\/td&gt;<br>                    &lt;td&gt;T\u00edtulo 3&lt;\/td&gt;<br>                    &lt;td&gt;&lt;h3&gt;exemplo&lt;\/h3&gt;&lt;\/td&gt;<br>                &lt;\/tr&gt;<br>                &lt;tr&gt;<br>                    &lt;td&gt;h4&lt;\/td&gt;<br>                    &lt;td&gt;T\u00edtulo 4&lt;\/td&gt;<br>                    &lt;td&gt;&lt;h4&gt;exemplo&lt;\/h4&gt;&lt;\/td&gt;<br>                &lt;\/tr&gt;<br>                &lt;tr&gt;<br>                    &lt;td&gt;h5&lt;\/td&gt;<br>                    &lt;td&gt;T\u00edtulo 5&lt;\/td&gt;<br>                    &lt;td&gt;&lt;h5&gt;exemplo&lt;\/h5&gt;&lt;\/td&gt;<br>                &lt;\/tr&gt;<br>                &lt;tr&gt;<br>                    &lt;td&gt;h6&lt;\/td&gt;<br>                    &lt;td&gt;T\u00edtulo 6&lt;\/td&gt;<br>                    &lt;td&gt;&lt;h6&gt;exemplo&lt;\/h6&gt;&lt;\/td&gt;<br>                &lt;\/tr&gt;<br>            &lt;\/table&gt;<br>        &lt;\/div&gt;<br>    &lt;\/section&gt;<br>    &lt;section id=\"contato\"&gt;<br>        &lt;h2&gt;Entre em contato&lt;\/h2&gt;<br>        &lt;p&gt;Preencha o formul\u00e1rio abaixo para poder entrar em contato!&lt;\/p&gt;<br>        &lt;form method=\"get\"&gt;<br>            &lt;div&gt;<br>                &lt;span&gt;Nome:&lt;\/span&gt;<br>                &lt;input type=\"text\" name=\"nome\"&gt;<br>            &lt;\/div&gt;<br>            &lt;div&gt;<br>                &lt;span&gt;Email:&lt;\/span&gt;<br>                &lt;input type=\"email\" name=\"email\"&gt;<br>            &lt;\/div&gt;<br>            &lt;div&gt;<br>                &lt;span&gt;Mensagem:&lt;\/span&gt;<br>                &lt;textarea&gt;&lt;\/textarea&gt;<br>            &lt;\/div&gt;<br>            &lt;div&gt;<br>                &lt;input type=\"submit\" value=\"enviar\"&gt;<br>            &lt;\/div&gt;<br>        &lt;\/form&gt;<br>    &lt;\/section&gt;<br><br>    &lt;footer&gt;<br>        &lt;p&gt;Todos os direitos reservados&lt;\/p&gt;<br>    &lt;\/footer&gt;<br><br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/pre>\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/tabler-icons.min.css\">\n\n<style>\n  .cta-box {\n    margin: 1.5rem 0;\n    background: linear-gradient(135deg, #0C447C 0%, #185FA5 100%);\n    border-radius: 16px;\n    padding: 28px;\n    display: flex;\n    align-items: center;\n    gap: 22px;\n    flex-wrap: wrap;\n  }\n  .cta-icon {\n    width: 56px; height: 56px;\n    background: rgba(255,255,255,0.14);\n    border-radius: 12px;\n    display: flex; align-items: center; justify-content: center;\n    flex-shrink: 0;\n  }\n  .cta-icon i { font-size: 28px; color: #fff; }\n  .cta-content { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }\n  .cta-title { font-weight: 600; color: #fff; line-height: 1.3; font-size: 1.15rem; }\n  .cta-text { color: #C5DDF4; line-height: 1.55; }\n  .cta-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }\n  .cta-perk {\n    display: inline-flex; align-items: center; gap: 5px;\n    background: rgba(255,255,255,0.12);\n    color: #E6F1FB;\n    border-radius: 99px;\n    padding: 3px 10px;\n    font-size: .85rem;\n  }\n  .cta-perk i { font-size: 13px; }\n  .cta-btn {\n    display: inline-flex; align-items: center; gap: 8px;\n    background: #fff;\n    color: #0C447C !important;\n    border-radius: 8px;\n    padding: 13px 22px;\n    font-weight: 600;\n    text-decoration: none !important;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n  .cta-btn:hover { background: #E6F1FB; }\n  .cta-btn i { font-size: 17px; }\n<\/style>\n\n<div class=\"cta-box\">\n  <div class=\"cta-icon\"><i class=\"ti ti-rocket\"><\/i><\/div>\n  <div class=\"cta-content\">\n    <span class=\"cta-title\">Aprendeu HTML? Coloque sua p\u00e1gina no ar<\/span>\n    <span class=\"cta-text\">A melhor forma de fixar o que aprendeu \u00e9 praticar com seu site publicado de verdade. Com a hospedagem da HomeHost, voc\u00ea sobe seus arquivos HTML e v\u00ea sua p\u00e1gina acess\u00edvel na internet.<\/span>\n    <div class=\"cta-perks\">\n      <span class=\"cta-perk\"><i class=\"ti ti-files\"><\/i> Gerenciador de arquivos<\/span>\n      <span class=\"cta-perk\"><i class=\"ti ti-lock\"><\/i> SSL gr\u00e1tis<\/span>\n      <span class=\"cta-perk\"><i class=\"ti ti-headset\"><\/i> Suporte humano<\/span>\n    <\/div>\n  <\/div>\n  <a class=\"cta-btn\" href=\"https:\/\/www.homehost.com.br\/hospedagem-de-sites\/\" target=\"_blank\">\n    <i class=\"ti ti-arrow-right\"><\/i> Ver planos\n  <\/a>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><a name=\"top08\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dicas_para_avancar_seus_estudos_em_HTML_basico_e_desenvolvimento_web\"><\/span>Dicas para avan\u00e7ar seus estudos em HTML b\u00e1sico e desenvolvimento web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo, voc\u00ea j\u00e1 pode aprender bastante a respeito do HTML. Iniciamos com explica\u00e7\u00f5es te\u00f3rica e, posteriormente, aliamos a exemplos pr\u00e1ticos. Portanto, passamos por todo o conte\u00fado b\u00e1sico do HTML. Dessa forma, conclu\u00edmos ent\u00e3o este artigo deixando algumas recomenda\u00e7\u00f5es de estudo, assim como dicas e sugest\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizando todo este artigo, voc\u00ea j\u00e1 estar\u00e1 apto a compreender bem um c\u00f3digo HTML. Portanto, voc\u00ea tamb\u00e9m poder\u00e1 dar inicio \u00e0 cria\u00e7\u00e3o de p\u00e1ginas HTML simples. A partir desse momento, recomendamos que se aperfei\u00e7oe compreendendo mais sobre cada tag HTML. Tamb\u00e9m \u00e9 recomendado que voc\u00ea pratique todos os c\u00f3digos que estudou at\u00e9 agora.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso, deixamos algumas sugest\u00f5es de publica\u00e7\u00f5es do nosso blog que podem auxiliar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">O que \u00e9 HTML? Entenda de forma descomplicada<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5: suas novidades e atualiza\u00e7\u00f5es<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/comentarios-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Coment\u00e1rios HTML: aprenda a comentar seu c\u00f3digo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">As tags do HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/doctype-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Doctype HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Links HTML: saiba o que s\u00e3o e como utilizar no seu site<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/formulario-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Formul\u00e1rio HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/desenvolvedores\/checkbox-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML checkbox<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tabela HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tabela de cores HTML: aplicando cores nas tags HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Espa\u00e7o HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/caracteres-especiais-acentos-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Caracteres especiais do HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/iframe-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">Iframe HTML<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m dos artigos acima voc\u00ea ainda pode encontrar diversos outros artigos que podem auxiliar a avan\u00e7ar nos estudos sobre HTML. Portanto, tamb\u00e9m recomendamos os seguintes sites para avan\u00e7ar nos estudos sobre desenvolvimento web:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C Schools<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pt.khanacademy.org\/computing\/computer-programming\/html-css\" target=\"_blank\" rel=\"noopener noreferrer\">Khan Academy<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.freecodecamp.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Free Code Camp<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Mas n\u00e3o deixe de ficar atento ao nosso blog. Sempre publicamos novos artigos com conte\u00fado atualizado e inovador! Tamb\u00e9m recomendamos que voc\u00ea adquira um nome de <a href=\"https:\/\/www.homehost.com.br\/blog\/dominio\/3-passos-para-comprar-dominio-na-homehost\/\" target=\"_blank\" rel=\"noopener noreferrer\">dom\u00ednio<\/a> e um plano de <a href=\"https:\/\/www.homehost.com.br\/blog\/internet\/hospedagem-de-site-o-que-e\/\" target=\"_blank\" rel=\"noopener noreferrer\">hospedagem<\/a>, para poder praticar e colocar suas p\u00e1ginas online! A <a href=\"https:\/\/www.homehost.com.br\" target=\"_blank\" rel=\"noopener noreferrer\">HomeHost<\/a> oferece diversos planos de qualidade, seguran\u00e7a e velocidade!<\/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<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/tabler-icons.min.css\">\n\n<style>\n  .faq-section { margin: 1.5rem 0; }\n  .faq-item { border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: #fff; }\n  .faq-item[open] { border-color: #d1d5db; }\n  .faq-question { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 500; color: #111827; list-style: none; }\n  .faq-question::-webkit-details-marker { display: none; }\n  .faq-q-icon { width: 30px; height: 30px; background: #E6F1FB; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n  .faq-q-icon i { color: #185FA5; font-size: 17px; }\n  .faq-chevron { margin-left: auto; color: #9ca3af; transition: transform .2s; flex-shrink: 0; }\n  .faq-item[open] .faq-chevron { transform: rotate(180deg); }\n  .faq-answer { padding: 0 18px 16px 60px; color: #4b5563; line-height: 1.6; }\n  .faq-answer strong { color: #111827; }\n  .faq-answer code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-family: monospace; }\n<\/style>\n\n<div class=\"faq-section\">\n\n  <details class=\"faq-item\">\n    <summary class=\"faq-question\">\n      <span class=\"faq-q-icon\"><i class=\"ti ti-help\"><\/i><\/span>\n      O HTML \u00e9 uma linguagem de programa\u00e7\u00e3o?\n      <i class=\"ti ti-chevron-down faq-chevron\"><\/i>\n    <\/summary>\n    <div class=\"faq-answer\">\n      N\u00e3o. O HTML \u00e9 uma <strong>linguagem de marca\u00e7\u00e3o<\/strong>, usada para estruturar e organizar o conte\u00fado de uma p\u00e1gina. Diferente de linguagens de programa\u00e7\u00e3o como o JavaScript, ele n\u00e3o cria funcionalidades ou l\u00f3gica \u2014 apenas define a estrutura do que ser\u00e1 exibido.\n    <\/div>\n  <\/details>\n\n  <details class=\"faq-item\">\n    <summary class=\"faq-question\">\n      <span class=\"faq-q-icon\"><i class=\"ti ti-help\"><\/i><\/span>\n      O que significa HTML?\n      <i class=\"ti ti-chevron-down faq-chevron\"><\/i>\n    <\/summary>\n    <div class=\"faq-answer\">\n      HTML \u00e9 a sigla de <strong>HyperText Markup Language<\/strong> (Linguagem de Marca\u00e7\u00e3o de Hipertexto). \u00c9 a linguagem padr\u00e3o para criar e estruturar p\u00e1ginas na web, atualmente na vers\u00e3o HTML5.\n    <\/div>\n  <\/details>\n\n  <details class=\"faq-item\">\n    <summary class=\"faq-question\">\n      <span class=\"faq-q-icon\"><i class=\"ti ti-help\"><\/i><\/span>\n      Qual a diferen\u00e7a entre HTML, CSS e JavaScript?\n      <i class=\"ti ti-chevron-down faq-chevron\"><\/i>\n    <\/summary>\n    <div class=\"faq-answer\">\n      S\u00e3o os tr\u00eas pilares do front-end. O <strong>HTML<\/strong> estrutura o conte\u00fado, o <strong>CSS<\/strong> cuida da apar\u00eancia (cores, fontes, layout) e o <strong>JavaScript<\/strong> adiciona interatividade e comportamento \u00e0 p\u00e1gina.\n    <\/div>\n  <\/details>\n\n  <details class=\"faq-item\">\n    <summary class=\"faq-question\">\n      <span class=\"faq-q-icon\"><i class=\"ti ti-help\"><\/i><\/span>\n      Qual a diferen\u00e7a entre tag e elemento no HTML?\n      <i class=\"ti ti-chevron-down faq-chevron\"><\/i>\n    <\/summary>\n    <div class=\"faq-answer\">\n      A <strong>tag<\/strong> \u00e9 a marca\u00e7\u00e3o em si, escrita entre os sinais <code>&lt; &gt;<\/code>, como <code>&lt;p&gt;<\/code>. O <strong>elemento<\/strong> \u00e9 o conjunto completo: a tag de abertura, o conte\u00fado e a tag de fechamento, como <code>&lt;p&gt;texto&lt;\/p&gt;<\/code>.\n    <\/div>\n  <\/details>\n\n  <details class=\"faq-item\">\n    <summary class=\"faq-question\">\n      <span class=\"faq-q-icon\"><i class=\"ti ti-help\"><\/i><\/span>\n      Qual a diferen\u00e7a entre classe e ID no HTML?\n      <i class=\"ti ti-chevron-down faq-chevron\"><\/i>\n    <\/summary>\n    <div class=\"faq-answer\">\n      A <strong>classe<\/strong> (atributo <code>class<\/code>) pode ser usada em v\u00e1rios elementos e um mesmo elemento pode ter v\u00e1rias. J\u00e1 o <strong>ID<\/strong> (atributo <code>id<\/code>) \u00e9 \u00fanico \u2014 deve identificar um s\u00f3 elemento na p\u00e1gina. No CSS, classes s\u00e3o chamadas com <code>.<\/code> e IDs com <code>#<\/code>.\n    <\/div>\n  <\/details>\n\n  <details class=\"faq-item\">\n    <summary class=\"faq-question\">\n      <span class=\"faq-q-icon\"><i class=\"ti ti-help\"><\/i><\/span>\n      Preciso de programas pagos para escrever HTML?\n      <i class=\"ti ti-chevron-down faq-chevron\"><\/i>\n    <\/summary>\n    <div class=\"faq-answer\">\n      N\u00e3o. Basta um editor de texto simples, como o Bloco de Notas. Para mais conforto, h\u00e1 editores gratuitos como o Visual Studio Code, o Notepad++ e o Sublime Text, al\u00e9m de ferramentas online como o CodePen para testar seu c\u00f3digo direto no navegador.\n    <\/div>\n  <\/details>\n\n  <details class=\"faq-item\">\n    <summary class=\"faq-question\">\n      <span class=\"faq-q-icon\"><i class=\"ti ti-help\"><\/i><\/span>\n      Quanto tempo leva para aprender HTML?\n      <i class=\"ti ti-chevron-down faq-chevron\"><\/i>\n    <\/summary>\n    <div class=\"faq-answer\">\n      O b\u00e1sico do HTML pode ser aprendido em poucos dias de pr\u00e1tica. Como tem uma sintaxe simples e leg\u00edvel, \u00e9 uma das primeiras coisas que se aprende no desenvolvimento web. O dom\u00ednio completo vem com a pr\u00e1tica e ao combin\u00e1-lo com CSS e JavaScript.\n    <\/div>\n  <\/details>\n\n  <details class=\"faq-item\">\n    <summary class=\"faq-question\">\n      <span class=\"faq-q-icon\"><i class=\"ti ti-help\"><\/i><\/span>\n      Como vejo o resultado do meu c\u00f3digo HTML?\n      <i class=\"ti ti-chevron-down faq-chevron\"><\/i>\n    <\/summary>\n    <div class=\"faq-answer\">\n      Salve o arquivo com a extens\u00e3o <code>.html<\/code> e abra-o em qualquer navegador (Chrome, Firefox, Edge etc.). O navegador interpreta o c\u00f3digo e mostra a p\u00e1gina renderizada. Para public\u00e1-la na internet, voc\u00ea precisa envi\u00e1-la para uma hospedagem.\n    <\/div>\n  <\/details>\n\n<\/div>\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"O HTML \u00e9 uma linguagem de programa\u00e7\u00e3o?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"N\u00e3o. O HTML \u00e9 uma linguagem de marca\u00e7\u00e3o, usada para estruturar e organizar o conte\u00fado de uma p\u00e1gina. Diferente de linguagens de programa\u00e7\u00e3o como o JavaScript, ele n\u00e3o cria funcionalidades ou l\u00f3gica \u2014 apenas define a estrutura do que ser\u00e1 exibido.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"O que significa HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"HTML \u00e9 a sigla de HyperText Markup Language (Linguagem de Marca\u00e7\u00e3o de Hipertexto). \u00c9 a linguagem padr\u00e3o para criar e estruturar p\u00e1ginas na web, atualmente na vers\u00e3o HTML5.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Qual a diferen\u00e7a entre HTML, CSS e JavaScript?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"S\u00e3o os tr\u00eas pilares do front-end. O HTML estrutura o conte\u00fado, o CSS cuida da apar\u00eancia (cores, fontes, layout) e o JavaScript adiciona interatividade e comportamento \u00e0 p\u00e1gina.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Qual a diferen\u00e7a entre tag e elemento no HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"A tag \u00e9 a marca\u00e7\u00e3o em si, escrita entre os sinais de menor e maior, como <p>. O elemento \u00e9 o conjunto completo: a tag de abertura, o conte\u00fado e a tag de fechamento, como <p>texto<\/p>.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Qual a diferen\u00e7a entre classe e ID no HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"A classe (atributo class) pode ser usada em v\u00e1rios elementos e um mesmo elemento pode ter v\u00e1rias. J\u00e1 o ID (atributo id) \u00e9 \u00fanico \u2014 deve identificar um s\u00f3 elemento na p\u00e1gina. No CSS, classes s\u00e3o chamadas com ponto e IDs com cerquilha.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Preciso de programas pagos para escrever HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"N\u00e3o. Basta um editor de texto simples, como o Bloco de Notas. Para mais conforto, h\u00e1 editores gratuitos como o Visual Studio Code, o Notepad++ e o Sublime Text, al\u00e9m de ferramentas online como o CodePen para testar seu c\u00f3digo direto no navegador.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Quanto tempo leva para aprender HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"O b\u00e1sico do HTML pode ser aprendido em poucos dias de pr\u00e1tica. Como tem uma sintaxe simples e leg\u00edvel, \u00e9 uma das primeiras coisas que se aprende no desenvolvimento web. O dom\u00ednio completo vem com a pr\u00e1tica e ao combin\u00e1-lo com CSS e JavaScript.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Como vejo o resultado do meu c\u00f3digo HTML?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Salve o arquivo com a extens\u00e3o .html e abra-o em qualquer navegador (Chrome, Firefox, Edge etc.). O navegador interpreta o c\u00f3digo e mostra a p\u00e1gina renderizada. Para public\u00e1-la na internet, voc\u00ea precisa envi\u00e1-la para uma hospedagem.\"\n      }\n    }\n  ]\n}\n<\/script>\n\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Como criar uma p\u00e1gina com HTML b\u00e1sico\",\n  \"description\": \"Passo a passo para criar uma p\u00e1gina web completa usando apenas HTML b\u00e1sico, com cabe\u00e7alho, se\u00e7\u00f5es de conte\u00fado, tabela, formul\u00e1rio e rodap\u00e9.\",\n  \"totalTime\": \"PT30M\",\n  \"tool\": [\n    {\n      \"@type\": \"HowToTool\",\n      \"name\": \"Editor de texto (Bloco de Notas, VS Code, Sublime Text ou Notepad++)\"\n    },\n    {\n      \"@type\": \"HowToTool\",\n      \"name\": \"Navegador web\"\n    }\n  ],\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Crie a p\u00e1gina e a estrutura b\u00e1sica\",\n      \"text\": \"Crie um arquivo com a extens\u00e3o .html (por exemplo, index.html) e monte a estrutura b\u00e1sica do HTML, incluindo o atributo lang=\\\"pt-br\\\" na tag <html> e um t\u00edtulo dentro da tag <title>.\",\n      \"url\": \"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top07\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Crie o cabe\u00e7alho\",\n      \"text\": \"Dentro do <body>, adicione um <header> com um t\u00edtulo (<h1>), uma descri\u00e7\u00e3o (<p>) e um menu de navega\u00e7\u00e3o (<nav>) em forma de lista n\u00e3o ordenada (<ul>).\",\n      \"url\": \"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top07\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Crie a primeira se\u00e7\u00e3o com artigos\",\n      \"text\": \"Adicione uma divis\u00e3o <main> com o conte\u00fado principal. Dentro dela, crie uma <section> contendo dois <article> com t\u00edtulos, par\u00e1grafos e uma imagem.\",\n      \"url\": \"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top07\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Crie a segunda se\u00e7\u00e3o com iframe e tabela\",\n      \"text\": \"Crie uma nova <section> utilizando um <iframe> para incorporar conte\u00fado de outra p\u00e1gina e uma <table> com linhas e c\u00e9lulas para exibir as tags de t\u00edtulo.\",\n      \"url\": \"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top07\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Crie a se\u00e7\u00e3o de contato com formul\u00e1rio\",\n      \"text\": \"Adicione uma <section> com um <form> de contato, contendo campos de nome e e-mail (<input>), uma \u00e1rea de mensagem (<textarea>) e um bot\u00e3o de envio.\",\n      \"url\": \"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top07\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Crie o rodap\u00e9\",\n      \"text\": \"Finalize a estrutura adicionando um <footer> com uma mensagem, como os direitos reservados da p\u00e1gina.\",\n      \"url\": \"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top07\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"name\": \"Fa\u00e7a os ajustes finais no menu\",\n      \"text\": \"Atualize o menu do cabe\u00e7alho transformando os itens da lista em links que apontam para os IDs de cada se\u00e7\u00e3o, permitindo a navega\u00e7\u00e3o interna pela p\u00e1gina ao clicar.\",\n      \"url\": \"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#top07\"\n    }\n  ]\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea pretende criar um site, aprender o HTML b\u00e1sico \u00e9 uma das melhores coisas que voc\u00ea pode fazer! Independentemente de pretender trabalhar com WordPress, web designer ou desenvolvimento web, conhecer o b\u00e1sico do HTML \u00e9 essencial. Esse conhecimento permite compreender como funciona uma p\u00e1gina web e seus elementos. Dessa forma, voc\u00ea pode criar seus [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":4028,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[161,3,4,213,203,229,20,6,164],"tags":[160,252,2621,3306,2739,3307],"class_list":["post-4027","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-construtor-de-sites","category-criar-sites","category-desenvolvedores","category-frontpage","category-internet","category-outros","category-php","category-tutoriais","category-wordpress-tutoriais","tag-criar-um-site","tag-desenvolvimento","tag-html","tag-html5","tag-tutorial","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost<\/title>\n<meta name=\"description\" content=\"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost\" \/>\n<meta property=\"og:description\" content=\"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\" \/>\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=\"2019-08-05T20:47:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-18T12:29:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1122\" \/>\n\t<meta property=\"og:image:height\" content=\"440\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\",\"name\":\"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png\",\"datePublished\":\"2019-08-05T20:47:23+00:00\",\"dateModified\":\"2026-06-18T12:29:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png\",\"width\":1122,\"height\":440,\"caption\":\"HTML B\u00e1sico: Uma introdu\u00e7\u00e3o ao mundo do Desenvolvimento Web HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML\"}]},{\"@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":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost","description":"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","og_locale":"pt_BR","og_type":"article","og_title":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost","og_description":"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2019-08-05T20:47:23+00:00","article_modified_time":"2026-06-18T12:29:26+00:00","og_image":[{"width":1122,"height":440,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.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":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/","name":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png","datePublished":"2019-08-05T20:47:23+00:00","dateModified":"2026-06-18T12:29:26+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"HTML b\u00e1sico: uma introdu\u00e7\u00e3o ao mundo do HTML com tudo que voc\u00ea precisa conhecer para come\u00e7ar no mundo do desenvolvimento web com o HTML!","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/08\/html_b\u00e1sico.png","width":1122,"height":440,"caption":"HTML B\u00e1sico: Uma introdu\u00e7\u00e3o ao mundo do Desenvolvimento Web HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML B\u00e1sico: iniciando no desenvolvimento web com HTML"}]},{"@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\/2019\/08\/html_b\u00e1sico.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4027","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=4027"}],"version-history":[{"count":30,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4027\/revisions"}],"predecessor-version":[{"id":16064,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/4027\/revisions\/16064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/4028"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}