{"id":3740,"date":"2019-07-17T00:18:31","date_gmt":"2019-07-17T00:18:31","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3740"},"modified":"2024-01-13T07:26:13","modified_gmt":"2024-01-13T10:26:13","slug":"tags-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/","title":{"rendered":"Tags HTML: as principais tags para criar sua p\u00e1gina HTML"},"content":{"rendered":"<p>Neste artigo, vamos estudar algumas das mais importantes tags que o HTML utiliza em sua estrutura. Para come\u00e7ar \u00e9 importante entender que o HTML \u00e9 uma linguagem de marca\u00e7\u00e3o de hipertexto, e tem como principal fun\u00e7\u00e3o marcar e definir a estrutura de uma p\u00e1gina na web. Saiba mais sobre HTML <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\">nesse artigo<\/a>. Para esse tutorial, utilizaremos como base o <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html5\/\">HTML5<\/a>, a vers\u00e3o mais recente do HTML.<\/p>\n<p>Assim sendo, neste artigo voc\u00ea vai encontrar:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#topico01\">O que s\u00e3o tags HTML?<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#topico02\">Estrutura b\u00e1sica de um documento HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#topico03\">Tags de coment\u00e1rios em HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#topico04\">Tags HTML estruturais<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#topico05\">A tags HTML de conte\u00fado<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#topico06\">Tags de estilos e scripts<\/a><\/li>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#topico07\">Crie sua p\u00e1gina em HTML<\/a><\/li>\n<\/ul>\n<p><a name=\"topico01\"><\/a><\/p>\n<h2>O que s\u00e3o tags HTML?<\/h2>\n<p>As tags 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<p>A principal caracter\u00edstica das tags \u00e9 estarem sempre dentro dos sinais de chevron (sinal de &#8220;maior que&#8221; e &#8220;menor que&#8221;), ou seja: <strong>&lt; &gt;<\/strong>.<\/p>\n<p>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 <strong>&lt;tag&gt;<\/strong> <strong>&lt;\/tag&gt;<\/strong>, j\u00e1 as que n\u00e3o precisam de fechamento possuem como estrutura <strong>&lt;tag\/&gt;<\/strong>.<\/p>\n<p>Al\u00e9m disso, uma mesma tag pode receber um ou mais atributos, que possuir\u00e1 um valor que modifica sua estrutura ou funcionalidade.<\/p>\n<h3>Atributos<\/h3>\n<p>Os atributos s\u00e3o usados para personalizar as tags, modificando sua estrutura ou funcionalidade. Igualmente, os atributos s\u00e3o utilizados para atribuir uma classe ou id a um elemento.<\/p>\n<p>A maioria das tags tem seus pr\u00f3prios atributos. Contudo, existem alguns atributos gen\u00e9ricos que podem ser <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-css\/\">utilizados na maioria das tags HTML<\/a>, vamos estud\u00e1-los:<\/p>\n<ul>\n<li><strong>class=&#8221;<\/strong>&#8230;<strong>&#8220;<\/strong> &#8211; Atribui uma classe ao elemento (uma classe pode ser utilizada para um ou mais elementos);<\/li>\n<li><strong>id=&#8221;&#8230;<\/strong><strong>&#8220;<\/strong> &#8211; Atribui um id ao elemento (um id deve ser \u00fanico, ou seja atribu\u00eddo a um \u00fanico elemento);<\/li>\n<li><strong>style=&#8221;&#8230;&#8221;<\/strong> &#8211; Permite incluir elementos CSS (estilos) dentro da tag;<\/li>\n<li><strong>lang=&#8221;&#8230;&#8221;<\/strong> &#8211; Define o idioma principal do elemento;<\/li>\n<li><strong>title=&#8221;&#8230;&#8221;<\/strong> &#8211; Define o t\u00edtulo do elemento;<\/li>\n<li><strong>alt=&#8221;&#8230;&#8221;<\/strong> &#8211; Define um texto alternativo e, por isso, \u00e9 muito utilizado em imagens, auxilia nas pr\u00e1ticas de SEO;<\/li>\n<li><strong>hidden<\/strong> &#8211; Oculta o elemento;<\/li>\n<li><strong>align=&#8221;&#8230;&#8221;<\/strong> &#8211; Permite definir o padr\u00e3o de alinhamento desse elemento, como por exemplo: right, center, left e justify;<\/li>\n<li><strong>width=&#8221;&#8230;&#8221;<\/strong> &#8211; Define uma largura para o elemento;<\/li>\n<li><strong>height=&#8221;&#8230;&#8221;<\/strong> &#8211; Define uma altura para o elemento.<\/li>\n<\/ul>\n<p>Essas s\u00e3o os principais atributos, por\u00e9m existem diversos outros que devem ser estudados e podem ser utilizados no seu c\u00f3digo.<br \/>\n<a name=\"topico02\"><\/a><\/p>\n<h2>Estrutura b\u00e1sica de um documento HTML<\/h2>\n<p>Um documento <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-basico\/\">HTML recebe algumas tags que formam a sua estrutura b\u00e1sica<\/a>. No HTML5, o documento padr\u00e3o recebe a seguinte estrutura:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;T\u00edtulo da p\u00e1gina&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<p>Em primeiro lugar, vamos agora entender para que serve cada uma dessas tags:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/doctype-html\/\"><strong>&lt;!DOCTYPE html&gt; <\/strong>&#8211; A tag !DOCTYPE informa ao navegador a vers\u00e3o do HTML<\/a> que est\u00e1 sendo utilizada no documento. Por exemplo: no HTML5, basta incluir !DOCTYPE html, e assim o navegador j\u00e1 saber\u00e1 que se trata de um documento na vers\u00e3o HTML5;<\/li>\n<li><strong>&lt;html&gt;&lt;\/html&gt;<\/strong> &#8211; Esta tag \u00e9 o elemento b\u00e1sico da estrutura do HTML. Assim sendo, ela conter\u00e1 todos os elementos do seu documento. Todo documento HTML deve iniciar e finalizar com essa tag;<\/li>\n<li><strong>&lt;head&gt;&lt;\/head&gt;\u00a0<\/strong>&#8211; Essa tag delimita o cabe\u00e7alho do documento. N\u00e3o possui nenhum valor vis\u00edvel, por\u00e9m \u00e9 capaz de transmitir ao navegador diversas informa\u00e7\u00f5es muito \u00fateis e essenciais a uma boa apresenta\u00e7\u00e3o do seu documento HTML;<\/li>\n<li><strong>&lt;title&gt;&lt;\/title&gt;\u00a0<\/strong>&#8211; Essa tag define o t\u00edtulo da sua p\u00e1gina, o nome que aparecer\u00e1 na sua aba, janela ou guia. Por esta raz\u00e3o, a tag &gt;title&gt; \u00e9 de grande import\u00e2ncia para o SEO;<\/li>\n<li><strong>&lt;meta\/&gt; <\/strong>&#8211; Essa tag permite inserir metadados ao seu documento, no caso acima, a informa\u00e7\u00e3o\u00a0<strong>charset=&#8221;UTF-8&#8243;<\/strong>, que garante a compatibilidade do c\u00f3digo com os caracteres de padr\u00e3o latino americano;<\/li>\n<li><strong>&lt;body&gt;&lt;\/body&gt;\u00a0<\/strong>&#8211; Finalmente, a tag que representa o corpo do documento. Em s\u00edntese, \u00e9 nessa tag que todos os elementos vis\u00edveis do seu site devem ser inseridos.<\/li>\n<\/ul>\n<p>Agora que j\u00e1 conhecemos as tags <a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html-redirect\/\">HTML que formam a estrutura b\u00e1sica de uma p\u00e1gina<\/a>, podemos ent\u00e3o estudar as diversas tags que contemplar\u00e3o o documento.<br \/>\n<a name=\"topico03\"><\/a><\/p>\n<h2>Tags de coment\u00e1rios em HTML<\/h2>\n<p>Dentro de um documento, muitas vezes precisamos fazer coment\u00e1rios, para facilitar no desenvolvimento. Com isso, o c\u00f3digo fica mais organizado e podemos deixar anota\u00e7\u00f5es importantes para poss\u00edveis mudan\u00e7as, ou apenas para orientar o c\u00f3digo. Dessa forma, na tag de coment\u00e1rios (que \u00e9 aberta com <strong>&lt;!&#8211;<\/strong> e fechada com <strong>&#8211;&gt;\u00a0<\/strong>), todos elementos inclu\u00eddos dentro dela ser\u00e3o apenas coment\u00e1rios, ou seja, n\u00e3o ser\u00e3o vis\u00edveis no navegador.<\/p>\n<p>ex:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;!-- Meu coment\u00e1rio em HTML --&gt;\n&lt;p&gt;Ol\u00e1 Mundo&lt;\/p&gt; &lt;!-- aqui \u00e9 o meu paragrafo--&gt;<\/pre>\n<p>Como resultado final no navegador, teremos:<\/p>\n<p>Ol\u00e1 Mundo<\/p>\n<p>Repare que todo conte\u00fado das tags de coment\u00e1rio n\u00e3o aparecer\u00e1, sendo restrito apenas a quem estiver lendo o seu c\u00f3digo HTML. Pratique utilizar os coment\u00e1rios em seu c\u00f3digo, isso \u00e9 uma boa pr\u00e1tica e muito recomendada dentro do mundo do desenvolvimento.<br \/>\n<a name=\"topico04\"><\/a><\/p>\n<h2>Tags HTML estruturais<\/h2>\n<p>As tags abaixo s\u00e3o utilizadas nos documentos em <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5<\/a>, e t\u00eam fun\u00e7\u00e3o estrutural no seu c\u00f3digo. Portanto, essas tags t\u00eam grande import\u00e2ncia na quest\u00e3o sem\u00e2ntica da sua p\u00e1gina, saber utiliz\u00e1-las pode adequar o seu c\u00f3digo para uma melhor visualiza\u00e7\u00e3o por parte do navegador e do usu\u00e1rio, al\u00e9m de proporcionar uma otimiza\u00e7\u00e3o para os processos de <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/seo-marketing-20-dicas-subir-no-google\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a>.<\/p>\n<ul>\n<li><strong>&lt;header&gt;&lt;\/header&gt;<\/strong> &#8211; Essas tags definem um cabe\u00e7alho. Portanto, todo conte\u00fado que estiver dentro dela faz parte de um cabe\u00e7alho, podendo ser utilizado dentro de outras sess\u00f5es. N\u00e3o confundir com as tags &lt;head&gt;;<\/li>\n<li><strong>&lt;main&gt;&lt;\/main&gt;<\/strong> &#8211; Essas tags representam o conte\u00fado principal do seu corpo, ou seja, o conte\u00fado relacionado diretamente com o t\u00f3pico central da p\u00e1gina ou com a funcionalidade central da aplica\u00e7\u00e3o;<\/li>\n<li><strong>&lt;footer&gt;&lt;\/footer&gt;<\/strong> &#8211; Essas tags definem um rodap\u00e9 para a p\u00e1gina, geralmente utilizadas no final da p\u00e1gina;<\/li>\n<li><strong>&lt;section&gt;&lt;\/section&gt;\u00a0<\/strong>&#8211; Essas tags definem uma sess\u00e3o para sua p\u00e1gina;<\/li>\n<li><strong>&lt;article&gt;&lt;\/article&gt;\u00a0<\/strong>&#8211; Essas tags definem um artigo da sua p\u00e1gina. Nesse sentido, s\u00e3o utilizadas para separar o conte\u00fado da sua p\u00e1gina. Muito utilizado principalmente por blogs ou p\u00e1ginas de conte\u00fado;<\/li>\n<li><strong>&lt;aside&gt;&lt;\/aside&gt;\u00a0<\/strong>&#8211; Essas tags representam uma se\u00e7\u00e3o de uma p\u00e1gina cujo conte\u00fado \u00e9 tangencialmente relacionado ao conte\u00fado do seu entorno, que poderia ser considerado separado do conte\u00fado;<\/li>\n<li><strong>&lt;nav&gt;&lt;\/nav&gt;\u00a0<\/strong>&#8211; Essa tag define um conte\u00fado de navega\u00e7\u00e3o. Portanto, \u00e9 muito utilizado em conjunto com listas e na cria\u00e7\u00e3o de menus;<\/li>\n<li><strong>&lt;div&gt;&lt;\/div&gt;\u00a0<\/strong>&#8211; Define uma divis\u00e3o da p\u00e1gina. Desta forma, funciona como um container para conte\u00fado de fluxo. Uma vez que n\u00e3o possui um valor sem\u00e2ntico, \u00e9 muito utilizado para organizar melhor o conte\u00fado. Anteriormente ao HTML5, era utilizado no lugar das categorias acima.<\/li>\n<\/ul>\n<p><a name=\"topico05\"><\/a><\/p>\n<h2>A tags HTML de conte\u00fado<\/h2>\n<p>Agora que voc\u00ea j\u00e1 conhece as principais tags estruturais, pode organizar o seu conte\u00fado de forma adequada. Assim sendo, vamos listar as principais tags para incluir conte\u00fado \u00e0 p\u00e1gina, como t\u00edtulos, par\u00e1grafos, imagens, links, etc.<\/p>\n<h3>Tags HTML de t\u00edtulo<\/h3>\n<p>As tags de t\u00edtulo possuem valor sem\u00e2ntico, variando entre seis n\u00edveis hier\u00e1rquicos. <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/erros-comuns-de-seo\/\">Para fins de otimiza\u00e7\u00e3o SEO<\/a> \u00e9 importante entender como funcionam, e fazer uma utiliza\u00e7\u00e3o adequada. Para definir t\u00edtulos, utilizamos as tags:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;h1&gt;&lt;\/h1&gt; - T\u00edtulo de maior valor hier\u00e1rquico\n&lt;h2&gt;&lt;\/h2&gt;\n&lt;h3&gt;&lt;\/h3&gt;\n&lt;h4&gt;&lt;\/h4&gt;\n&lt;h5&gt;&lt;\/h5&gt;\n&lt;h6&gt;&lt;\/h6&gt;\u00a0- T\u00edtulo de menor valor hier\u00e1rquico<\/pre>\n<p>Conforme dito anteriormente, a distribui\u00e7\u00e3o de t\u00edtulo interferem no otimiza\u00e7\u00e3o do <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/seo-marketing-20-dicas-subir-no-google\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a> de uma p\u00e1gina.\u00a0 Com isso, uma p\u00e1gina contendo apenas h1 n\u00e3o seria bem vista pelos mecanismos de busca. Portanto, \u00e9 importante dividir os t\u00edtulos deixando o h1 apenas para o t\u00edtulo principal, h2 ou h3 para t\u00edtulos das se\u00e7\u00f5es e h4 a h6 para subt\u00edtulos ou t\u00edtulos que possuam baixo valor hier\u00e1rquico em rela\u00e7\u00e3o aos demais.<\/p>\n<h3>Tags HTML de texto<\/h3>\n<p>As tags de texto definem textos, estilos de fonte, par\u00e1grafos, spans, <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/quebra-de-linha-html\/\">quebras de linhas<\/a>, etc. Vamos conhec\u00ea-las:<\/p>\n<ul>\n<li><strong>&lt;p&gt;&lt;\/p&gt;\u00a0<\/strong>&#8211; Principal tag de texto, comp\u00f5e um par\u00e1grafo;<\/li>\n<li><strong>&lt;span&gt;&lt;\/span&gt;<\/strong> &#8211; Apesar de ter uma funcionalidade e caracter\u00edsticas parecidas com os par\u00e1grafos, costumam ser utilizadas apenas para pequenas informa\u00e7\u00f5es, como legendas de um formul\u00e1rio, legendas de uma imagem, etc. Tamb\u00e9m pode ser utilizada para formar um container;<\/li>\n<li><strong>&lt;pre&gt;&lt;\/pre&gt;\u00a0<\/strong>&#8211; Tag utilizada para representar texto pr\u00e9-formatado. Muito utilizada para inserir c\u00f3digos;<\/li>\n<li><strong>&lt;b&gt;&lt;\/b&gt;<\/strong> &#8211; Transforma o conte\u00fado em <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/negrito-html\/\">negrito<\/a>;<\/li>\n<li><strong>&lt;i&gt;&lt;\/i&gt;<\/strong> &#8211; Transforma o conte\u00fado em it\u00e1lico;<\/li>\n<li><strong>&lt;br\/&gt;\u00a0<\/strong>&#8211; Essa tag n\u00e3o necessita de fechamento, ela executa a fun\u00e7\u00e3o de quebra de linha.<\/li>\n<li><strong>&lt;hr\/&gt;<\/strong> &#8211; Essa tag n\u00e3o necessita de fechamento, ela forma uma linha horizontal.<\/li>\n<\/ul>\n<h3>Tag de link HTML<\/h3>\n<p>A tag de <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">link HTML<\/a> \u00e9 respons\u00e1vel que faz a liga\u00e7\u00e3o entre um documento e outro, sendo ele da mesma p\u00e1gina ou de uma p\u00e1gina de outro dom\u00ednio. Esse elemento garantiu que o HTML se destacasse, e moldou a internet da forma que ela \u00e9 hoje! Portanto, \u00e9 o principal fundamento que forma a web.<\/p>\n<p>Para realizar um link, podemos chamar as tags <strong>&lt;a&gt;&lt;\/a&gt;<\/strong> com o atributo href. Por exemplo, caso voc\u00ea queira criar um link no seu texto que redirecione \u00e0 p\u00e1gina inicial do google:<\/p>\n<pre class=\"lang:xhtml decode:true\"><a href=\"https:\/\/www.homehost.com.br\/blog\/perguntas-frequentes\/como-faco-para-acessar-o-painel-de-controle\/\">&lt;p&gt;Para acessar<\/a> o Google, &lt;a href=\"https:\/\/www.google.com\"&gt;clique aqui.&lt;\/a&gt;&lt;\/p&gt;<\/pre>\n<p>Como resultado, teremos:<\/p>\n<p>Para acessar o Google, <a href=\"http:\/\/google.com\">clique aqui.<\/a><\/p>\n<h3>Tags HTML de multim\u00eddia<\/h3>\n<p>As tags de multim\u00eddia servem para incluir imagens, v\u00eddeos, \u00e1udios, iframes e outros tipos de conte\u00fado multim\u00eddia.<\/p>\n<h4><strong>&lt;img&gt;<\/strong><\/h4>\n<p>Essa tag n\u00e3o necessita de fechamento, serve para incluir uma imagem ao seu texto. A partir dessa tag, utilizamos o atributo src=&#8221;&#8221; onde deve ser digitado o local em que a imagem se encontra. Tamb\u00e9m \u00e9 muito utilizado em conjunto com o atributo alt para definir o texto alternativo da imagem.<\/p>\n<p>Por exemplo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;img src=\"imagens\/imagem1.jpg\" alt=\"imagem 1 da minha p\u00e1gina\"&gt;<\/pre>\n<h4><strong>&lt;video&gt;<\/strong>\u00a0e &lt;audio&gt;<\/h4>\n<p>Essa tag serve para indicar a inser\u00e7\u00e3o de um v\u00eddeo. Com isso, devemos colocar alguns atributos dentro da tag para poder ativar o controle, a principal dela \u00e9 o controls. Posteriormente, inclu\u00edmos a tag <strong>&lt;source&gt;<\/strong> com os atributos <strong>src<\/strong> e <strong>type<\/strong>, onde receber\u00e3o o local em que est\u00e1 o v\u00eddeo e o tipo do v\u00eddeo. \u00c9 recomendado utilizar mais de um tipo de source do mesmo v\u00eddeo, para garantir maior possibilidade de compatibilidade com o navegador. Finalmente, podemos incluir uma mensagem que ser\u00e1 renderizada apenas se o navegador do usu\u00e1rio n\u00e3o suportar a tag video.<\/p>\n<p>Diante disso, vejamos os exemplos a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;video controls&gt;\n  &lt;source src=\"video.mp4\" type=\"video\/mp4\"&gt;\n  &lt;source src=\"video.ogg\" type=\"video\/ogg\"&gt;\n  Seu navegador n\u00e3o possui suporte para V\u00eddeos.\n&lt;\/video&gt;<\/pre>\n<p>A tag <strong>&lt;audio&gt;<\/strong> funciona da mesma forma que a tag &lt;<strong>video&gt;<\/strong>, portanto, utilizamos a tag <strong>&lt;source&gt;<\/strong> dentro dela. Vejamos o exemplo a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;audio controls&gt;\n  &lt;source src=\"musica.ogg\" type=\"audio\/ogg\"&gt;\n  &lt;source src=\"musica.mp3\" type=\"audio\/mpeg\"&gt;\n  Seu navegador n\u00e3o possui suporte para \u00e1udio.\n&lt;\/audio&gt;<\/pre>\n<h4><strong>&lt;iframe&gt;<\/strong><\/h4>\n<p>Os iframes s\u00e3o muito utilizados na atualidade, servem para incluir recursos de uma outra p\u00e1gina nesta p\u00e1gina. Vale a pena conferir o exemplo da <a href=\"https:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_iframe\" target=\"_blank\" rel=\"noopener noreferrer\">W3C Schools<\/a>, pagina de tutorias pertencente ao grupo W3C, a organiza\u00e7\u00e3o atualmente respons\u00e1vel pelos padr\u00f5es da web.<\/p>\n<p>Portanto, para inserir um iframe, basta utilizar a tag com o atributo <strong>src<\/strong>. Al\u00e9m disso, \u00e9 poss\u00edvel incluir um texto dentro do elemento, caso o navegador do usu\u00e1rio n\u00e3o possua suporte para tal. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;iframe src=\"https:\/\/www.homehost.com.br\"&gt;\n  &lt;p&gt;Seu navegador n\u00e3o possui suporte para iFrames.&lt;\/p&gt;\n&lt;\/iframe&gt;<\/pre>\n<h3>Tags HTML de listas<\/h3>\n<p><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/4-motivos-para-criar-site-com-homehost\/\">Para poder criar<\/a> uma lista, podemos utilizar uma lista ordenada, a partir das tags <strong>&lt;ol&gt;&lt;\/ol&gt;<\/strong>, ou uma lista n\u00e3o ordenada, a partir das tags <strong>&lt;ul&gt;&lt;\/ul&gt;<\/strong>. Posteriormente, inclu\u00edmos dentro da lista os elementos da mesma, dentro das tags <strong>&lt;li&gt;&lt;\/li&gt;<\/strong>.<\/p>\n<p>Vejamos os exemplos a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;p&gt;Minha lista ordenada:&lt;\/p&gt;\n&lt;ol&gt;\n  &lt;li&gt;item 1&lt;\/li&gt;\n  &lt;li&gt;item 2&lt;\/li&gt;\n  &lt;li&gt;item 3&lt;\/li&gt;\n&lt;\/ol&gt;<\/pre>\n<pre class=\"lang:xhtml decode:true \">&lt;p&gt;Minha lista n\u00e3o ordenada:&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;<\/pre>\n<h3>Tags HTML de formul\u00e1rio<\/h3>\n<p>As tags de formul\u00e1rio s\u00e3o muito utilizadas para obter informa\u00e7\u00f5es do usu\u00e1rio, realizar cadastros, receber opini\u00f5es, entre outros. S\u00e3o important\u00edssimas para qualquer ramo do mercado.<\/p>\n<p>Para iniciar um formul\u00e1rio, incluimos as tags <strong>&lt;form&gt;<\/strong> e <strong>&lt;\/form&gt;<\/strong>. Posteriormente, devemos incluir o conte\u00fado do formul\u00e1rio. Digamos que, por exemplo, voc\u00ea queira incluir tr\u00eas campos, sendo dois para coletar informa\u00e7\u00f5es e um para receber uma mensagem. Desta forma, para criar os campos de preenchimento, dever\u00e1 utilizar a <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/\">tag <strong>&lt;input&gt;<\/strong><\/a>, enquanto para o campo referente \u00e0 mensagem, dever\u00e1 utilizar a tag <strong>&lt;<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/textarea-html\/\">textarea<\/a>&gt;<\/strong>.<\/p>\n<h4>A tag &lt;input&gt;<\/h4>\n<p>A tag <strong>&lt;input&gt;<\/strong> possui o atributo <strong>type<\/strong>, que varia entre diversos tipos (vamos explicar os principais deles abaixo). Tamb\u00e9m h\u00e1 o atributo <strong>placeholder<\/strong>, que \u00e9 um texto que <a href=\"https:\/\/www.homehost.com.br\/blog\/registro-de-dominios\/em-quanto-tempo-um-novo-dominio-registrado-fica-disponivel\/\">ficar\u00e1 dispon\u00edvel<\/a> enquanto nada for digitado nesse campo. Tamb\u00e9m \u00e9 importante definir um atributo <strong>name<\/strong> para cada input.<\/p>\n<ul>\n<li><strong>&lt;input type=&#8221;text&#8221;&gt;<\/strong> &#8211; Define um campo que receber\u00e1 qualquer caractere;<\/li>\n<li><strong>&lt;input type=&#8221;email&#8221;&gt;<\/strong> &#8211; Define um campo que receber\u00e1 caracteres e verificar\u00e1 se o mesmo consiste em um e-mail v\u00e1lido;<\/li>\n<li><strong>&lt;input type=&#8221;submit&#8221; value=&#8221;ENVIAR&#8221;&gt;<\/strong> &#8211; Define um bot\u00e3o que servir\u00e1 para o envio do formul\u00e1rio. Dentro dele, podemos atribuir o value, que ser\u00e1 o texto dentro do bot\u00e3o de envio.<\/li>\n<\/ul>\n<p>Existem outros tipos de <strong>&lt;inputs&gt;<\/strong> que podem ser estudados na <a href=\"https:\/\/www.w3schools.com\/tags\/tag_input.asp\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o dispon\u00edvel pela W3C<\/a>.<\/p>\n<h4>As tags &lt;textarea&gt;&lt;\/textarea&gt;<\/h4>\n<p>Assim como a tag <strong>&lt;input&gt;<\/strong>, essa tag define um campo para o formul\u00e1rio. Por\u00e9m, diferentemente, ela tem como principal caracter\u00edstica ser uma \u00e1rea de preenchimento de texto, ou seja, permite que o usu\u00e1rio escreva um texto ou uma mensagem no seu interior. Tamb\u00e9m traz op\u00e7\u00f5es para que o usu\u00e1rio redimensione seu tamanho (resize). Dessa forma, podemos incluir uma area de texto utilizando as tags\u00a0<strong>&lt;textarea&gt;<\/strong> e <strong>&lt;\/textarea&gt;<\/strong>.<br \/>\n<a name=\"topico06\"><\/a><\/p>\n<h2>Tags de estilos e scripts<\/h2>\n<p>Para podermos concluir esse tutorial, n\u00e3o poder\u00edamos deixar de citar as tags <strong>&lt;style&gt;<\/strong> e <strong>&lt;script&gt;<\/strong>.<\/p>\n<p>A tag\u00a0<strong>&lt;style&gt;<\/strong> e <strong>&lt;\/style&gt;<\/strong> deve ser inclu\u00edda no <strong>&lt;head&gt;<\/strong> do seu c\u00f3digo HTML. Dentro dessa tag, \u00e9 poss\u00edvel incluir todo o seu c\u00f3digo CSS, ou seja, seu c\u00f3digo de estilos.<\/p>\n<p>J\u00e1 a tag\u00a0<strong>&lt;script&gt;<\/strong> e <strong>&lt;\/script&gt;<\/strong> tem como objetivo incluir c\u00f3digos de scripts ao seu HTML, podendo ser inclu\u00edda em qualquer parte. Contudo, recomenda-se fortemente que seja inserida ap\u00f3s o <strong>&lt;footer&gt;<\/strong>. Dessa forma, podemos incluir nela um c\u00f3digo javascript.<br \/>\n<a name=\"topico07\"><\/a><\/p>\n<h2>Crie sua p\u00e1gina em HTML<\/h2>\n<p>Finalmente chegamos ao fim desse artigo. Por\u00e9m deixamos aqui um \u00f3timo exemplo para voc\u00ea poder estudar e treinar as diversas tags HTML. Crie um arquivo de texto e salve com a extens\u00e3o .html e comece a treinar agora mesmo!<\/p>\n<p>Segue nosso c\u00f3digo de exemplo contendo uma estrutura de uma p\u00e1gina em HTML.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;T\u00edtulo da p\u00e1gina&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;style&gt;\n        \/*AQUI VAI TODO NOSSO C\u00d3DIGO CSS*\/\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;header&gt;&lt;!--criando um cabe\u00e7alho para nossa p\u00e1gina com um menu--&gt;\n    &lt;h2&gt;Minha P\u00e1gina&lt;\/h2&gt;\n    &lt;nav&gt;&lt;!--vamos criar um menu utilizando listas--&gt;\n        &lt;ul&gt;\n            &lt;li&gt;Home&lt;\/li&gt;\n            &lt;li&gt;Meu menu&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/nav&gt;&lt;!--aqui finaliza o meu menu--&gt;\n&lt;\/header&gt;\n&lt;main&gt;    \n    &lt;section&gt;&lt;!--vamos criar a primeira section do meu documento--&gt;\n        &lt;article&gt;\n            &lt;h3&gt;Titulo do meu artigo&lt;\/h3&gt;\n            &lt;p&gt;Conteudo do meu artigo&lt;\/p&gt;\n            &lt;p&gt;Mais conte\u00fado para o meu artigo&lt;\/p&gt;\n            &lt;ol&gt;&lt;!--vamos criar uma lista ordenada--&gt;\n                &lt;li&gt;item 1&lt;\/li&gt;\n                &lt;li&gt;item 2&lt;\/li&gt;\n                &lt;li&gt;item 3&lt;\/li&gt;\n            &lt;\/ol&gt;\n        &lt;\/article&gt;&lt;!-- aqui finaliza meu primeiro artigo da section--&gt;\n        &lt;article&gt;\n            &lt;h3&gt;Titulo do meu segundo artigo&lt;\/h3&gt;\n            &lt;p&gt;Conteudo do meu segundo artigo&lt;\/p&gt;\n            &lt;p&gt;Mais conte\u00fado para o meu segundo artigo&lt;\/p&gt;        \n        &lt;\/article&gt;&lt;!--aqui finaliza meu segundo artigo da section--&gt;\n&lt;\/section&gt;&lt;!--aqui encerra a primeira section do meu documento--&gt;\n&lt;\/main&gt;&lt;!--aqui finaliza todo conte\u00fado principal do corpo da pagina--&gt;\n\n&lt;aside&gt;\n    &lt;h4&gt;Conte\u00fados relacionados&lt;\/h4&gt;\n    &lt;ul&gt;\n        &lt;li&gt;P\u00e1gina oficial da &lt;a href=\"https:\/\/www.homehost.com.br\/\"&gt;Home Host&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;item da lista&lt;\/li&gt;\n        &lt;li&gt;item da lista&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/aside&gt;\n\n&lt;footer&gt;\n    &lt;div&gt;&lt;!--criando uma divis\u00e3o para meu rodap\u00e9--&gt;\n        &lt;p&gt;Inscreva-se para receber noticias&lt;\/p&gt;\n        &lt;form method=\"post\"&gt;\n            &lt;input type=\"text\" name=\"nome\" placeholder=\"Digite seu Nome\"&gt;\n            &lt;input type=\"email\" name=\"email\" placeholder=\"Digite seu Email\"&gt;\n            &lt;input type=\"submit\" name=\"enviar\" value=\"Enviar\"&gt;\n        &lt;\/form&gt;\n    &lt;\/div&gt;\n    &lt;div&gt;&lt;!--criando outra para meu rodap\u00e9--&gt;\n        &lt;h3&gt;Minha primeira p\u00e1gina html&lt;\/h3&gt;\n        &lt;span&gt;Todos os direitos reservados&lt;\/span&gt;\n    &lt;\/div&gt;\n&lt;\/footer&gt;\n\n&lt;script&gt;\n    \/\/AQUI VAI NOSSO C\u00d3DIGO DE SCRIPT (JAVASCRIPT)\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Por fim, recomendamos tamb\u00e9m a leitura da documenta\u00e7\u00e3o da <a href=\"https:\/\/www.w3schools.com\/tags\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C<\/a>, contendo todas as tags e informa\u00e7\u00f5es sobre elas, para voc\u00eas utilizarem no seus c\u00f3digos. H\u00e1 ainda diversos recursos bastante usados, como por exemplo <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/links-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">links<\/a> e <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tabela-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tabelas<\/a>. N\u00e3o deixe de treinar e criar suas pr\u00f3prias p\u00e1ginas!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, vamos estudar algumas das mais importantes tags que o HTML utiliza em sua estrutura. Para come\u00e7ar \u00e9 importante entender que o HTML \u00e9 uma linguagem de marca\u00e7\u00e3o de hipertexto, e tem como principal fun\u00e7\u00e3o marcar e definir a estrutura de uma p\u00e1gina na web. Saiba mais sobre HTML nesse artigo. Para esse tutorial, [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3763,"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,229,6,42],"tags":[2624,2621,2920],"class_list":["post-3740","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-construtor-de-sites","category-criar-sites","category-desenvolvedores","category-outros","category-tutoriais","category-wordpress","tag-css","tag-html","tag-tags"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tags HTML: as principais tags para criar sua p\u00e1gina HTML | Homehost<\/title>\n<meta name=\"description\" content=\"As principais Tags utilizadas para a forma\u00e7\u00e3o de um documento HTML! Aprenda tudo que voc\u00ea precisa para criar a sua p\u00e1gina na web!\" \/>\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\/tags-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tags HTML: as principais tags para criar sua p\u00e1gina HTML | Homehost\" \/>\n<meta property=\"og:description\" content=\"As principais Tags utilizadas para a forma\u00e7\u00e3o de um documento HTML! Aprenda tudo que voc\u00ea precisa para criar a sua p\u00e1gina na web!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-17T00:18:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-13T10:26:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tag_html.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\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=\"12 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\/tags-html\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/\",\"name\":\"Tags HTML: as principais tags para criar sua p\u00e1gina HTML | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tag_html.png\",\"datePublished\":\"2019-07-17T00:18:31+00:00\",\"dateModified\":\"2024-01-13T10:26:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"As principais Tags utilizadas para a forma\u00e7\u00e3o de um documento HTML! Aprenda tudo que voc\u00ea precisa para criar a sua p\u00e1gina na web!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tag_html.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tag_html.png\",\"width\":1020,\"height\":256,\"caption\":\"Tags HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tags HTML: as principais tags para criar sua p\u00e1gina 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":"Tags HTML: as principais tags para criar sua p\u00e1gina HTML | Homehost","description":"As principais Tags utilizadas para a forma\u00e7\u00e3o de um documento HTML! Aprenda tudo que voc\u00ea precisa para criar a sua p\u00e1gina na web!","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\/tags-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Tags HTML: as principais tags para criar sua p\u00e1gina HTML | Homehost","og_description":"As principais Tags utilizadas para a forma\u00e7\u00e3o de um documento HTML! Aprenda tudo que voc\u00ea precisa para criar a sua p\u00e1gina na web!","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2019-07-17T00:18:31+00:00","article_modified_time":"2024-01-13T10:26:13+00:00","og_image":[{"width":1020,"height":256,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tag_html.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":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/","name":"Tags HTML: as principais tags para criar sua p\u00e1gina HTML | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tag_html.png","datePublished":"2019-07-17T00:18:31+00:00","dateModified":"2024-01-13T10:26:13+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"As principais Tags utilizadas para a forma\u00e7\u00e3o de um documento HTML! Aprenda tudo que voc\u00ea precisa para criar a sua p\u00e1gina na web!","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tag_html.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/tag_html.png","width":1020,"height":256,"caption":"Tags HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Tags HTML: as principais tags para criar sua p\u00e1gina 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\/07\/tag_html.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3740","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=3740"}],"version-history":[{"count":18,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3740\/revisions"}],"predecessor-version":[{"id":13185,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3740\/revisions\/13185"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/3763"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}