{"id":2608,"date":"2019-03-23T00:00:00","date_gmt":"2019-03-23T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2019\/03\/23\/html\/"},"modified":"2019-03-23T00:00:00","modified_gmt":"2019-03-23T00:00:00","slug":"html","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/html\/","title":{"rendered":"O que \u00e9 HTML e qual sua funcionalidade?"},"content":{"rendered":"\n<p>As p\u00e1ginas web (sejam sites, blogs ou <a href=\"https:\/\/rockcontent.com\/br\/blog\/landing-page\/\">landing pages<\/a>) s\u00e3o ferramentas de divulga\u00e7\u00e3o de informa\u00e7\u00e3o com as mais variadas finalidades: desde&nbsp;<strong>difundir conhecimento<\/strong>&nbsp;at\u00e9 gerar&nbsp;<strong>oportunidades de neg\u00f3cio<\/strong>. Seja qual for o intuito, todas elas t\u00eam em comum a linguagem com a qual s\u00e3o constru\u00eddas: o&nbsp;<strong>HTML<\/strong>.<\/p>\n\n\n\n<p>Como veremos, n\u00e3o se trata de uma <a href=\"https:\/\/rockcontent.com\/br\/blog\/linguagem-de-programacao\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"linguagem de programa\u00e7\u00e3o (abre numa nova aba)\">linguagem de programa\u00e7\u00e3o<\/a> e \u00e9 bastante simples de entender. Continue a leitura e veja como&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/rockcontent.com\/br\/blog\/como-criar-um-site\/\" target=\"_blank\">construir uma p\u00e1gina web<\/a>&nbsp;\u00e9 mais f\u00e1cil do que parece!<\/p>\n\n\n\n<p>Confira os assuntos que vamos tratar neste post:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#que\">O que \u00e9 e para que serve o HTML?<\/a><\/li><li><a href=\"#quais\">Quais s\u00e3o os principais elementos do HTML?<\/a><\/li><li><a href=\"#como\">Como \u00e9 a estrutura b\u00e1sica de um documento do tipo?<\/a><\/li><li><a href=\"#primeiro\">Como criar o seu primeiro c\u00f3digo em HTML?<\/a><\/li><li><a href=\"#rela\u00e7\u00e3o\">Qual \u00e9 a rela\u00e7\u00e3o entre HTML, CSS e JavaScript?<\/a><\/li><\/ul>\n\n\n[rock-convert-cta id=&#8221;35337&#8243;]\n\n\n\n<a id=\"que\">&nbsp;<\/a> <h2 class=\"wp-block-heading\">O que \u00e9 e para que serve o HTML?<\/h2>\n\n\n\n<p>HTML \u00e9 a sigla em ingl\u00eas para&nbsp;<strong>Hypertext Markup Language<\/strong>, que traduzimos para o portugu\u00eas como linguagem de marca\u00e7\u00e3o de hipertexto. <\/p>\n\n\n\n<p>Apesar dos nomes complicados, o HTML nada mais \u00e9 que uma linguagem usada para criar p\u00e1ginas web por meio de&nbsp;<strong>marcadores<\/strong>&nbsp;(<strong>tags<\/strong>) e&nbsp;<strong>atributos<\/strong>, que definem como o conte\u00fado deve ser apresentado em um navegador web.<\/p>\n\n\n\n<p>Mas voc\u00ea deve estar se perguntando: o que \u00e9 um&nbsp;<strong>hipertexto<\/strong>? Esse conceito faz refer\u00eancia a um texto com blocos interconectados contendo palavras, imagens, sons, tabelas e outros elementos. Al\u00e9m disso, eles podem ter caminhos que apontam para outros hipertextos, caminhos esses conhecidos como hiperliga\u00e7\u00f5es, hyperlinks ou apenas links.<\/p>\n\n\n\n<p>A cria\u00e7\u00e3o do HTML \u00e9 atribu\u00edda a&nbsp;<strong>Tim Berners-Lee<\/strong>, o inventor da&nbsp;<strong>World Wide Web<\/strong>. <\/p>\n\n\n\n<p>A ideia era criar um ambiente em que cientistas pudessem&nbsp;<strong>divulgar suas pesquisas <\/strong>para que seus colegas pudessem consult\u00e1-las com facilidade. Berners-Lee acabou criando o HTML como&nbsp;<strong>linguagem padr\u00e3o<\/strong>&nbsp;para elaborar esses documentos.<\/p>\n\n\n\n<p>Desde a sua implementa\u00e7\u00e3o, no in\u00edcio dos anos 1990, o HTML passou por diversas melhorias e hoje \u00e9 o&nbsp;<strong>alicerce<\/strong>&nbsp;de blogs,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/rockcontent.com\/br\/blog\/e-commerce-guia\/\" target=\"_blank\">e-commerces<\/a>,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/rockcontent.com\/br\/blog\/tudo-sobre-redes-sociais\/\" target=\"_blank\">redes sociais<\/a>&nbsp;e todo o tipo de p\u00e1gina acess\u00edvel de um navegador web.<\/p>\n\n\n\n<biblioteca><strong>Confira tamb\u00e9m estes conte\u00fados:<\/strong><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/css\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">Entenda o que \u00e9 CSS e quais as suas fun\u00e7\u00f5es na internet<\/a><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/captcha\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">Captcha: saiba o que \u00e9 e como coloc\u00e1-lo no site do seu neg\u00f3cio<\/a><br>\n   <a href=\"https:\/\/rockcontent.com\/br\/blog\/wireframes\/\" target=\"_blank&quot;\" rel=\"noopener noreferrer\">Wireframe: quais os tipos e as principais ferramentas de cria\u00e7\u00e3o<\/a><\/biblioteca>\n\n\n\n<a id=\"quais\">&nbsp;<\/a><h2 class=\"wp-block-heading\">Quais s\u00e3o os principais elementos do HTML?<\/h2>\n\n\n\n<p>Agora que voc\u00ea j\u00e1 sabe o que \u00e9 o HTML, vamos ver os principais marcadores que definem a fun\u00e7\u00e3o dos elementos que fazem parte da p\u00e1gina.<\/p>\n\n\n\n<p>Mas antes precisamos lembrar que essas tags s\u00e3o identificadas com um sinal de menor que (&lt;), seguido pelo nome da tag e um sinal de maior que (&gt;). A maior parte das tags precisa ser fechada, o que representamos com uma barra (\/) entre o sinal \u201c&lt;\u201c e o nome da tag.<\/p>\n\n\n\n<p>Tudo ficar\u00e1 mais claro com os exemplos a seguir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Par\u00e1grafo (&lt;p&gt;)<\/h3>\n\n\n\n<p>A tag &lt;p&gt; deve ser aberta e fechada para definir um par\u00e1grafo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>Este \u00e9 um par\u00e1grafo em HTML.&lt;\/p><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cabe\u00e7alho (&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, &lt;h6&gt;)<\/strong><\/h3>\n\n\n\n<p>As&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/rockcontent.com\/br\/blog\/o-que-sao-heading-tags\/\" target=\"_blank\">heading tags<\/a>, ou tags de cabe\u00e7alho, ajudam a criar uma hierarquia entre as partes do texto, separando-o em se\u00e7\u00f5es. O &lt;h1&gt; \u00e9 o cabe\u00e7alho de maior relev\u00e2ncia, seguido pelo &lt;h2&gt;, &lt;h3&gt; e assim sucessivamente at\u00e9 o &lt;h6&gt;, de menor import\u00e2ncia.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1>T\u00edtulo principal&lt;\/h1>\n&lt;p>Par\u00e1grafo de introdu\u00e7\u00e3o.&lt;\/p>\n&lt;h2>1. Primeiro intert\u00edtulo&lt;\/h2>\n&lt;p>Par\u00e1grafo da primeira se\u00e7\u00e3o.&lt;\/p>\n&lt;p>Mais um par\u00e1grafo da primeira se\u00e7\u00e3o.&lt;\/p>\n&lt;h2>2. Segundo intert\u00edtulo&lt;\/h2>\n&lt;p>Par\u00e1grafo da segunda se\u00e7\u00e3o.&lt;\/p>\n&lt;p>Mais um par\u00e1grafo da segunda se\u00e7\u00e3o.&lt;\/p>\n&lt;h2>3. Terceiro intert\u00edtulo&lt;\/h2>\n&lt;p>Par\u00e1grafo da terceira se\u00e7\u00e3o.&lt;\/p>\n&lt;h3>3.1. Intert\u00edtulo dentro da terceira se\u00e7\u00e3o&lt;\/h3>\n&lt;p>Par\u00e1grafo da se\u00e7\u00e3o 3.1.&lt;\/p>\n&lt;h3>3.2. Mais um intert\u00edtulo dentro da terceira se\u00e7\u00e3o&lt;\/h3>\n&lt;p>Par\u00e1grafo da se\u00e7\u00e3o 3.2.&lt;\/p><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Imagem (&lt;img&gt;)<\/h3>\n\n\n\n<p>A tag de imagem n\u00e3o precisa ser fechada, j\u00e1 que o seu conte\u00fado \u00e9 definido na pr\u00f3pria tag com o atributo \u201csrc\u201d.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2019\/09\/twitter-cards.png\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c2ncora (&lt;a&gt;)<\/h3>\n\n\n\n<p>A tag de \u00e2ncora define um link para outra p\u00e1gina. O atributo \u201chref\u201d determina o destino desse link.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/rockcontent.com\/br\/blog\/arquitetura-da-informacao\/\">Arquitetura da Informa\u00e7\u00e3o&lt;\/a><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Lista ordenada (&lt;ol&gt;)<\/h3>\n\n\n\n<p>Uma ordered list, ou lista ordenada, \u00e9 exibida com elementos numerados. Cada elemento deve ser marcado com a tag &lt;li&gt; (list item).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ol>\n\t&lt;li>SEO&lt;\/li>\n\t&lt;li>Links patrocinados&lt;\/li>\n\t&lt;li>Redes sociais&lt;\/li>\n&lt;\/ol><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Lista n\u00e3o ordenada (&lt;ul&gt;)<\/h3>\n\n\n\n<p>A tag unordered list, ou lista n\u00e3o ordenada, mostra os elementos como bulletpoints.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n\t&lt;li>Automa\u00e7\u00e3o de marketing&lt;\/li>\n\t&lt;li>Gera\u00e7\u00e3o de leads&lt;\/li>\n\t&lt;li>E-mail marketing&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tabela (&lt;table&gt;)<\/h3>\n\n\n\n<p>A tag de tabela exibe informa\u00e7\u00f5es no formato de linhas e colunas. Dentro da tag &lt;table&gt;, usamos as tags &lt;tr&gt; para representar as linhas, &lt;th&gt; para representar os cabe\u00e7alhos e &lt;td&gt; para representar cada c\u00e9lula.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table>\n\t&lt;tr>\n    \t&lt;th>Nome&lt;\/th>\n    \t&lt;th>Sobrenome&lt;\/th>\n  \t&lt;\/tr>\n\t&lt;tr>\n  \t\t&lt;td>Jonah&lt;\/td>\n    \t&lt;td>Berger&lt;\/td>\n  \t&lt;\/tr>\n  \t&lt;tr>\n  \t\t&lt;td>Ann&lt;\/td>\n    \t&lt;td>Handley&lt;\/td>\n  \t&lt;\/tr>\n  \t&lt;tr>\n    \t&lt;td>Neil&lt;\/td>\n    \t&lt;td>Patel&lt;\/td>\n  \t&lt;\/tr>\n&lt;\/table><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Coment\u00e1rio (&lt;!&#8211; &#8211;&gt;)<\/h3>\n\n\n\n<p>Usamos esta tag para escrever algum coment\u00e1rio que ajude no entendimento do c\u00f3digo. Tudo que estiver escrito entre os marcadores &lt;!&#8211; e &#8211;&gt; n\u00e3o ser\u00e1 mostrado ao usu\u00e1rio.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>O HTML \u00e9 fundamental para quem deseja criar um site na web.&lt;\/p> &lt;!-- Este \u00e9 um par\u00e1grafo em HTML --><\/code><\/pre>\n\n\n\n<a id=\"como\">&nbsp;<\/a><h2 class=\"wp-block-heading\">Como \u00e9 a estrutura b\u00e1sica de um documento do tipo?<\/h2>\n\n\n\n<p>Vimos diversos elementos, mas agora vamos saber como coloc\u00e1-los dentro de um c\u00f3digo HTML. Como qualquer padr\u00e3o da web, \u00e9 necess\u00e1rio seguir algumas regras para a constru\u00e7\u00e3o desses c\u00f3digos.<\/p>\n\n\n\n<p>Come\u00e7amos com a declara\u00e7\u00e3o &lt;!DOCTYPE html&gt;, para informar ao navegador web que o documento em quest\u00e3o \u00e9 um HMTL.<\/p>\n\n\n\n<p>Em seguida, abrimos a tag &lt;html&gt;, que precisaremos fechar no fim. Dentro dela, adicionamos &lt;head&gt;, que dever\u00e1 conter os metadados (dados sobre dados) da p\u00e1gina, como o t\u00edtulo que vai aparecer na aba do navegador (&lt;title&gt;), chamadas para arquivos externos e outras&nbsp;<a href=\"https:\/\/rockcontent.com\/br\/blog\/meta-tags\/\" rel=\"noreferrer noopener\" target=\"_blank\">meta tags<\/a>&nbsp;cruciais para um trabalho de&nbsp;<a href=\"https:\/\/rockcontent.com\/br\/blog\/o-que-e-seo\/\" rel=\"noreferrer noopener\" target=\"_blank\">SEO<\/a>.<\/p>\n\n\n\n<p>\u00c9 importante incluir a tag &lt;meta charset=&#8221;utf-8&#8243;&gt; para que o navegador exiba corretamente certos caracteres que utilizamos em portugu\u00eas, como acentos e cedilha.<\/p>\n\n\n\n<p>Por fim, abrimos a tag &lt;body&gt;, em que adicionamos a parte do documento HTML que cont\u00e9m os elementos vis\u00edveis para o usu\u00e1rio.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n\t&lt;head>\n\t\t&lt;meta charset=\"utf-8\">\n\t\t&lt;title>Minha primeira p\u00e1gina&lt;\/title>\n\t&lt;\/head>\n\t&lt;body>\n\t\t&lt;h1>Minha primeira p\u00e1gina&lt;\/h1>\n\t\t&lt;p>Meu primeiro par\u00e1grafo!&lt;\/p>\n\t&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<a id=\"primeiro\">&nbsp;<\/a><h2 class=\"wp-block-heading\">Como criar o seu primeiro c\u00f3digo em HTML?<\/h2>\n\n\n\n<p>Para criar um c\u00f3digo HTML, voc\u00ea s\u00f3 precisa de um&nbsp;<strong>editor<\/strong>&nbsp;de texto simples (o Bloco de Notas, por exemplo) e de um navegador web (Chrome, Opera, Firefox, Safari, etc.) para visualizar como vai ficar a sua p\u00e1gina. Desenvolvedores profissionais usam&nbsp;<strong>editores de c\u00f3digo<\/strong>&nbsp;mais especializados, mas podemos seguir inicialmente com um editor simples.<\/p>\n\n\n\n<p>O primeiro passo \u00e9 criar um novo arquivo e salv\u00e1-lo com a extens\u00e3o .html. Para este tutorial, podemos dar o nome de index.html.<\/p>\n\n\n\n<p>Depois, cole o c\u00f3digo que mostramos na se\u00e7\u00e3o anterior com a estrutura b\u00e1sica de um HTML e salve o arquivo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n\t&lt;head>\n\t\t&lt;meta charset=\"utf-8\">\n\t\t&lt;title>Minha primeira p\u00e1gina&lt;\/title>\n\t&lt;\/head>\n\t&lt;body>\n\t\t&lt;h1>Minha primeira p\u00e1gina&lt;\/h1>\n\t\t&lt;p>Meu primeiro par\u00e1grafo!&lt;\/p>\n\t&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>Agora \u00e9 s\u00f3 abrir o arquivo no seu browser preferido e pronto, voc\u00ea acabou de criar o seu primeiro c\u00f3digo HTML!<\/p>\n\n\n\n<a id=\"rela\u00e7\u00e3o\">&nbsp;<\/a><h2 class=\"wp-block-heading\">Qual \u00e9 a rela\u00e7\u00e3o entre HTML, CSS e JavaScript?<\/h2>\n\n\n\n<p>Entendemos que o HTML \u00e9 a estrutura de uma p\u00e1gina web, mas como formatar o estilo de seus elementos? Para configurarmos fontes, cores, alinhamento, enfim, a forma como os componentes HTML ser\u00e3o apresentados, utilizamos o&nbsp;<strong><a href=\"https:\/\/rockcontent.com\/br\/blog\/css\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"CSS (abre numa nova aba)\">CSS<\/a><\/strong>, sigla para&nbsp;<strong>Cascading Style Sheets<\/strong>, ou folhas de estilo em cascata.<\/p>\n\n\n\n<p>Apesar de ser poss\u00edvel descrever os estilos dentro do pr\u00f3prio c\u00f3digo HTML, \u00e9 recomend\u00e1vel que o HTML fa\u00e7a uma chamada a um ou mais arquivos CSS individuais. Assim, o c\u00f3digo fica mais organizado, j\u00e1 que isola a estrutura do estilo.<\/p>\n\n\n\n<p>O CSS se baseia em seletores e declara\u00e7\u00f5es com propriedades e valores. Ou seja, escolhemos os elementos HTML aos quais queremos aplicar os estilos e declaramos quais ser\u00e3o as propriedades desses componentes.<\/p>\n\n\n\n<p>Veja neste exemplo o seletor de par\u00e1grafo (p), com uma declara\u00e7\u00e3o que define a cor, a fam\u00edlia da fonte e o tamanho da fonte.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\n\tcolor: white;\n\tfont-family: verdana;\n\tfont-size: 15px;\n}<\/code><\/pre>\n\n\n\n<p>Existe ainda uma terceira camada para o desenvolvimento de p\u00e1ginas web, dedicada a criar comportamentos din\u00e2micos: o&nbsp;<strong><a href=\"https:\/\/rockcontent.com\/br\/blog\/javascript-e-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"JavaScript (abre numa nova aba)\">JavaScript<\/a><\/strong>. Essa, que de fato \u00e9 uma linguagem de programa\u00e7\u00e3o \u2014 n\u00e3o confundir com Java \u2014, permite dar mais interatividade \u00e0 p\u00e1gina e melhorar a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/rockcontent.com\/br\/blog\/experiencia-do-usuario\/\" target=\"_blank\">experi\u00eancia do usu\u00e1rio<\/a>.<\/p>\n\n\n\n<p>Com ele, conseguimos escolher o que acontece quando o visitante clica em determinada parte da p\u00e1gina, aperta determinada tecla, rola a p\u00e1gina e muito mais. As aplica\u00e7\u00f5es s\u00e3o in\u00fameras e dependem basicamente da&nbsp;<strong>criatividade<\/strong>&nbsp;de quem est\u00e1 desenvolvendo.<\/p>\n\n\n\n<p>Inclusive, o JavaScript \u00e9&nbsp;<strong>excelente para quem deseja aprender a programar<\/strong>, j\u00e1 que a sintaxe da linguagem \u00e9 bastante f\u00e1cil. Al\u00e9m disso, \u00e9 poss\u00edvel fazer testes imediatos, visualizando o resultado do seu c\u00f3digo diretamente no navegador web.<\/p>\n\n\n\n<p>Percebeu como o HTML \u00e9 mais simples do que aparenta? Ent\u00e3o continue os seus estudos, porque apesar da simplicidade, esse \u00e9 um assunto riqu\u00edssimo, com muitas outras tags e atributos que n\u00e3o caberiam em um s\u00f3 post.<\/p>\n\n\n\n<p>Gostou do artigo? Ent\u00e3o confira esta aplica\u00e7\u00e3o que pode ser \u00fatil para o seu dia a dia.&nbsp;<a href=\"https:\/\/rockcontent.com\/br\/blog\/assinatura-de-email-em-html\/\" rel=\"noreferrer noopener\" target=\"_blank\">Aprenda como criar a sua pr\u00f3pria assinatura de e-mail em HTML<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O HTML \u00e9 parte fundamental das normas da web, em conjunto com outras tecnologias como o CSS e o JavaScript. J\u00e1 que essa linguagem \u00e9 a base para a constru\u00e7\u00e3o de p\u00e1ginas, \u00e9 importante conhec\u00ea-la para criarmos o nosso pr\u00f3prio site na internet.<\/p>\n","protected":false},"author":1,"featured_media":20144,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML: o que \u00e9 e qual a sua funcionalidade<\/title>\n<meta name=\"description\" content=\"Entenda a aplica\u00e7\u00e3o do HTML e como constru\u00edmos um c\u00f3digo usando essa tecnologia fundamental para a 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:\/\/pingback.com\/br\/resources\/html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML: o que \u00e9 e qual a sua funcionalidade\" \/>\n<meta property=\"og:description\" content=\"Entenda a aplica\u00e7\u00e3o do HTML e como constru\u00edmos um c\u00f3digo usando essa tecnologia fundamental para a web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/br\/resources\/html\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-23T00:00:00+00:00\" \/>\n<meta name=\"author\" content=\"Pingback\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:site\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingback\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/html\/\",\"url\":\"https:\/\/pingback.com\/br\/resources\/html\/\",\"name\":\"HTML: o que \u00e9 e qual a sua funcionalidade\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/html\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2019-03-23T00:00:00+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\"},\"description\":\"Entenda a aplica\u00e7\u00e3o do HTML e como constru\u00edmos um c\u00f3digo usando essa tecnologia fundamental para a web.\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/br\/resources\/html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/html\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/br\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"O que \u00e9 HTML e qual sua funcionalidade?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/br\/resources\/\",\"name\":\"Pingback Blog\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\",\"name\":\"Pingback\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Pingback\"},\"description\":\"Pingback: Marketing for builders.\",\"sameAs\":[\"https:\/\/pingback.com\",\"https:\/\/www.instagram.com\/pingbackoficial\/\",\"https:\/\/www.linkedin.com\/company\/pingbackoficial\/\",\"https:\/\/x.com\/pingbackoficial\",\"https:\/\/www.youtube.com\/@pingbackoficial\"],\"url\":\"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML: o que \u00e9 e qual a sua funcionalidade","description":"Entenda a aplica\u00e7\u00e3o do HTML e como constru\u00edmos um c\u00f3digo usando essa tecnologia fundamental para a 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:\/\/pingback.com\/br\/resources\/html\/","og_locale":"pt_BR","og_type":"article","og_title":"HTML: o que \u00e9 e qual a sua funcionalidade","og_description":"Entenda a aplica\u00e7\u00e3o do HTML e como constru\u00edmos um c\u00f3digo usando essa tecnologia fundamental para a web.","og_url":"https:\/\/pingback.com\/br\/resources\/html\/","og_site_name":"Pingback","article_published_time":"2019-03-23T00:00:00+00:00","author":"Pingback","twitter_card":"summary_large_image","twitter_creator":"@pingbackoficial","twitter_site":"@pingbackoficial","twitter_misc":{"Escrito por":"Pingback","Est. tempo de leitura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/br\/resources\/html\/","url":"https:\/\/pingback.com\/br\/resources\/html\/","name":"HTML: o que \u00e9 e qual a sua funcionalidade","isPartOf":{"@id":"https:\/\/pingback.com\/br\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/br\/resources\/html\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/br\/resources\/html\/#primaryimage"},"thumbnailUrl":"","datePublished":"2019-03-23T00:00:00+00:00","author":{"@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66"},"description":"Entenda a aplica\u00e7\u00e3o do HTML e como constru\u00edmos um c\u00f3digo usando essa tecnologia fundamental para a web.","breadcrumb":{"@id":"https:\/\/pingback.com\/br\/resources\/html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/br\/resources\/html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/html\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/br\/resources\/html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/br\/resources\/"},{"@type":"ListItem","position":2,"name":"O que \u00e9 HTML e qual sua funcionalidade?"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/br\/resources\/#website","url":"https:\/\/pingback.com\/br\/resources\/","name":"Pingback Blog","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66","name":"Pingback","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Pingback"},"description":"Pingback: Marketing for builders.","sameAs":["https:\/\/pingback.com","https:\/\/www.instagram.com\/pingbackoficial\/","https:\/\/www.linkedin.com\/company\/pingbackoficial\/","https:\/\/x.com\/pingbackoficial","https:\/\/www.youtube.com\/@pingbackoficial"],"url":"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/2608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/comments?post=2608"}],"version-history":[{"count":0,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/2608\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/media?parent=2608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/categories?post=2608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/tags?post=2608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}