{"id":3764,"date":"2023-06-27T08:36:31","date_gmt":"2023-06-27T11:36:31","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3764"},"modified":"2024-01-13T06:56:01","modified_gmt":"2024-01-13T09:56:01","slug":"espaco-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/","title":{"rendered":"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML"},"content":{"rendered":"<p>Voc\u00ea sabia que \u00e9 poss\u00edvel incluir espa\u00e7o HTML diretamente no seu <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">documento .html,<\/a> sem precisar utilizar o CSS?<\/p>\n<p>Atualmente, o CSS permite inserir diversos estilos, inclusive controlar o espa\u00e7amento entre qualquer elemento HTML. Por\u00e9m, muitas vezes, editar estilos no CSS \u00e9 algo que demanda maior tempo. Imagine que voc\u00ea queira apenas incluir um espa\u00e7o entre linhas no seu c\u00f3digo, para que perder tempo com linhas de c\u00f3digo de CSS, se tudo isso poderia ser feito apenas com o uso de uma <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noopener noreferrer\">tag<\/a> de <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/quebra-de-linha-html\/\">quebra de linha<\/a>?<\/p>\n<p>A maioria dos desenvolvedores tamb\u00e9m pode sentir dificuldades para incluir um espa\u00e7amento maior em algumas partes do texto, principalmente quando querem exemplificar um c\u00f3digo. Dessa forma, com t\u00e9cnicas de espa\u00e7o HTML, voc\u00ea consegue fazer isso rapidamente utilizando apenas uma entidade.<\/p>\n<p>Primeiramente, veja abaixo tudo que voc\u00ea precisa para dominar as t\u00e9cnicas de espa\u00e7o HTML:<\/p>\n<ul>\n<li><a href=\" https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/#topico01\">Espa\u00e7o com a tag HTML &lt;p&gt;<\/a><\/li>\n<li><a href=\" https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/#topico02\">Espa\u00e7o com a tag HTML &lt;br\/&gt;: quebra de linhas<\/a><\/li>\n<li><a href=\" https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/#topico03\">Mesclando o &lt;br&gt; com o &lt;p&gt;<\/a><\/li>\n<li><a href=\" https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/#topico04\">A tag &lt;pre&gt;<\/a><\/li>\n<li><a href=\" https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/#topico05\">O espa\u00e7o HTML e sua pr\u00e1tica<\/a><\/li>\n<li><a href=\" https:\/\/www.homehost.com.br\/blog\/criar-sites\/espaco-html\/#topico06\">Como gerar um espa\u00e7o entre linhas com CSS?<\/a><\/li>\n<\/ul>\n<p><a name=\"topico01\"><\/a><\/p>\n<h2>Espa\u00e7o com a tag HTML &lt;p&gt;<\/h2>\n<p>A <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/meta-tag\/\">tag <strong>&lt;p&gt;<\/strong> permite a inser\u00e7\u00e3o de par\u00e1grafos no conte\u00fado HTML<\/a>. Por si s\u00f3, o uso desta tag nos permite espa\u00e7ar um par\u00e1grafo do outro, mesmo que no c\u00f3digo eles estejam na mesma linha. Ou seja: ao fechar a tag com <strong>&lt;\/p&gt;<\/strong>, o HTML gera uma quebra de linha. Al\u00e9m disso, a tag <strong>&lt;p&gt;<\/strong> traz consigo as caracter\u00edsticas padr\u00e3o de margem superior e inferior no valor de <strong>1em<\/strong>, o que gera um espa\u00e7o maior entre essa tag e qualquer outro elemento.\u00a0Essa \u00e9 uma das t\u00e9cnicas <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-basico\/\">b\u00e1sicas de espa\u00e7o HTML<\/a>.<\/p>\n<p>Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;p&gt;minha linha de c\u00f3digo&lt;\/p&gt;&lt;p&gt;meu segundo par\u00e1grafo&lt;\/p&gt;<\/pre>\n<p>O resultado final ser\u00e1:<\/p>\n<p>minha linha de c\u00f3digo<\/p>\n<p>meu segundo par\u00e1grafo<\/p>\n<p>Portanto, com o simples uso correto desta tag, j\u00e1 podemos administrar bem o espa\u00e7o entre os conte\u00fados da <a href=\"https:\/\/www.homehost.com.br\/blog\/uncategorized\/html-redirect\/\">p\u00e1gina HTML<\/a>.<\/p>\n<h2>A entidade &amp;nbsp;<\/h2>\n<p>Digamos que dentro de um elemento voc\u00ea queira incluir um espa\u00e7o equivalente a apertar a tecla espa\u00e7o 4 vezes. Seria necess\u00e1rio ent\u00e3o incluir quatro espa\u00e7os entre os elementos, correto? Infelizmente o <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/caracteres-especiais-acentos-html\/\">c\u00f3digo HTML<\/a> l\u00ea apenas um espa\u00e7amento \u00fanico, portanto podemos incluir quantos espa\u00e7os quisermos e ainda assim o resultado ser\u00e1 como se s\u00f3 tivesse apertado a tecla espa\u00e7o uma \u00fanica vez. Vejamos o exemplo a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;p&gt;Home    Host.&lt;\/p&gt;<\/pre>\n<p>O resultado ser\u00e1:<\/p>\n<p>Home Host.<\/p>\n<p>Ent\u00e3o como resolver esse problema no HTML?<\/p>\n<p>O HTML permite o uso de entidades que representam s\u00edmbolos ou teclas. A entidade que representa a tecla do espa\u00e7o \u00e9 a <strong>&amp;nbsp;<\/strong> (non-breaking space). Portanto, para acrescentar espa\u00e7os entre nossos elementos, basta o acr\u00e9scimo do &amp;nbsp; dentro do nosso c\u00f3digo. Vamos agora refazer o c\u00f3digo anterior utilizando quatro vezes o c\u00f3digo referente a espa\u00e7amento:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;p&gt;Home&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Host.&lt;\/p&gt;<\/pre>\n<p>O resultado ser\u00e1:<\/p>\n<p>Home\u00a0\u00a0\u00a0\u00a0Host.<\/p>\n<p>Al\u00e9m desse c\u00f3digo, \u00e9 poss\u00edvel tamb\u00e9m utilizar outras formas que t\u00eam a mesma fun\u00e7\u00e3o e representam a mesma entidade. Existem ainda duas entidades pr\u00e9-estabelecidas que adicionam dois ou quatro espa\u00e7os: <strong>&amp;ensp;<\/strong> e <strong>&amp;emsp<\/strong>;. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;p&gt;Home&amp;nbsp;Host.&lt;\/p&gt;\n&lt;p&gt;Home\u00a0Host.&lt;\/p&gt;\n&lt;p&gt;Home&amp;ensp;Host.&lt;\/p&gt;\n&lt;p&gt;Home&amp;emsp;Host.&lt;\/p&gt;<\/pre>\n<p>O resultado ser\u00e1:<\/p>\n<p>Home\u00a0Host.<\/p>\n<p>Home\u00a0Host.<\/p>\n<p>Home\u2002Host.<\/p>\n<p>Home\u2003Host.<\/p>\n<p>Portanto, essa t\u00e9cnica facilita muito o trabalho do <a href=\"https:\/\/www.homehost.com.br\/blog\/empreendedorismo\/como-ser-desenvolvedor-de-software-e-ganhar-dinheiro\/\">desenvolvedor de software<\/a>, permitindo utilizar inclusive regras de tabula\u00e7\u00f5es, que s\u00e3o muito importantes para a escrita de c\u00f3digos.<\/p>\n<p>Podemos ver outras entidades do HTML atrav\u00e9s da <a href=\"https:\/\/www.w3schools.com\/html\/html_entities.asp\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o oficial da W3C<\/a>.<br \/>\n<a name=\"topico02\"><\/a><\/p>\n<h2>Espa\u00e7o com a tag HTML &lt;br\/&gt;: quebra de linhas<\/h2>\n<p>Anteriormente, vimos que entre um par\u00e1grafo e outro \u00e9 realizado a quebra de linha. Mas, e se quisermos acrescentar uma ou mais linhas a essa quebra? Basta utilizar a tag <strong>&lt;br\/&gt; <\/strong>(break). Com isso, podemos incluir quantas linhas quisermos entre os par\u00e1grafos. Este m\u00e9todo \u00e9 muito utilizado para gerar um espa\u00e7o diretamente no c\u00f3digo <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/doctype-html\/\">HTML sem precisar<\/a> estilizar no CSS. Desta forma o trabalho do desenvolvedor pode ser realizado em menos tempo, e nos permite quebra de linhas entre qualquer elemento, n\u00e3o apenas par\u00e1grafos, como por exemplo os <strong>&lt;span&gt;<\/strong>. Outra caracter\u00edstica importante da tag break \u00e9 que ela n\u00e3o possui caracter\u00edsticas de margem, portanto, atua diferentemente da quebra de linha da tag <strong>&lt;p&gt;<\/strong>. Dessa forma, podemos utilizar a tag break aliada \u00e0s tags de par\u00e1grafo de uma forma interessante, como veremos posteriormente.<\/p>\n<p>Vejamos ent\u00e3o o exemplo a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;p&gt;Como inserir uma&lt;br\/&gt;quebra de linha&lt;\/p&gt;<\/pre>\n<p>Dessa forma temos o seguinte resultado:<\/p>\n<p>Como inserir uma<br \/>\nquebra de linha<\/p>\n<p>Como explicado anteriormente, podemos aplicar quantos breaks quisermos, portanto, podemos criar um espa\u00e7amento maior. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;p&gt;Vamos inserir uma&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;quebra de tr\u00eas linhas.&lt;\/p&gt;<\/pre>\n<p>Com esse exemplo, chegamos ao seguinte resultado:<\/p>\n<p>Vamos inserir uma<\/p>\n<p>quebra de tr\u00eas linhas.<br \/>\n<a name=\"topico03\"><\/a><\/p>\n<h2>Mesclando o &lt;br\/&gt; com o &lt;p&gt;<\/h2>\n<p>Observe tamb\u00e9m que a tag <strong>&lt;br\/&gt;<\/strong> n\u00e3o gera um espa\u00e7o igual \u00e0 quebra de linha que \u00e9 gerado com o fechamento da tag <strong>&lt;p&gt;<\/strong>. Isso ocorre por que a tag <strong>&lt;p&gt;<\/strong>, por padr\u00e3o, possui uma margem superior e inferior de <strong>1em<\/strong> e a break n\u00e3o traz consigo esse padr\u00e3o de margem. Com isso, podemos\u00a0 inserir conte\u00fados como poemas e poesias com um padr\u00e3o visual mais adequado. Veja no exemplo a seguir, utilizando o poema &#8220;<em>No meio do caminho<\/em>&#8220;, de <strong>Drummond<\/strong>:<\/p>\n<div class=\"secrsf\">\n<pre class=\"lang:xhtml decode:true\">&lt;p&gt;No meio do caminho tinha uma pedra&lt;br\/&gt;\nTinha uma pedra no meio do caminho&lt;br\/&gt;\nTinha uma pedra&lt;br\/&gt;\nNo meio do caminho tinha uma pedra&lt;\/p&gt;\n&lt;p&gt;Nunca me esquecerei desse acontecimento&lt;br\/&gt;\nNa vida de minhas retinas t\u00e3o fatigadas&lt;br\/&gt;\nNunca me esquecerei que no meio do caminho&lt;br\/&gt;\nTinha uma pedra&lt;br\/&gt;\nTinha uma pedra no meio do caminho&lt;br\/&gt;\nNo meio do caminho tinha uma pedra.&lt;\/p&gt;<\/pre>\n<p>Veja como nesse exemplo o resultado fica mais bonito do que se utiliz\u00e1ssemos par\u00e1grafos entre cada frase:<\/p>\n<p>No meio do caminho tinha uma pedra<br \/>\nTinha uma pedra no meio do caminho<br \/>\nTinha uma pedra<br \/>\nNo meio do caminho tinha uma pedra<\/p>\n<p>Nunca me esquecerei desse acontecimento<br \/>\nNa vida de minhas retinas t\u00e3o fatigadas<br \/>\nNunca me esquecerei que no meio do caminho<br \/>\nTinha uma pedra<br \/>\nTinha uma pedra no meio do caminho<br \/>\nNo meio do caminho tinha uma pedra.<\/p>\n<p>Assim sendo, a utiliza\u00e7\u00e3o do break aliado \u00e0 tag par\u00e1grafo pode gerar \u00f3timos resultados de espa\u00e7o dentro do pr\u00f3prio <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/comentarios-html\/\">c\u00f3digo HTML<\/a>.<\/p>\n<\/div>\n<p><a name=\"topico04\"><\/a><\/p>\n<h2>A tag &lt;pre&gt;<\/h2>\n<p>Atrav\u00e9s da tag <strong>&lt;pre&gt;&lt;\/pre&gt;<\/strong> do HTML, podemos incluir um texto que ficar\u00e1 com a formata\u00e7\u00e3o original, ou seja, assumir\u00e1 todos os caracteres digitados. Com isso, todos os espa\u00e7os digitados no elemento ser\u00e3o inclu\u00eddos na renderiza\u00e7\u00e3o. Al\u00e9m disso, a tag <strong>&lt;pre&gt;<\/strong> traz consigo um valor de margem superior e inferior de <strong>1em<\/strong>, assim como a tag <strong>&lt;p&gt;<\/strong>. Vejamos ent\u00e3o o exemplo a seguir:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;pre&gt;Meu texto.    Ola\nMundo.&lt;\/pre&gt;<\/pre>\n<p>O resultado ser\u00e1:<\/p>\n<pre class=\"\">Meu texto.    Ola\nMundo<\/pre>\n<p>Portanto, podemos utilizar a tag <strong>&lt;pre&gt;<\/strong> para facilitar principalmente quando queremos utilizar tabula\u00e7\u00f5es, por exemplo: na escrita de c\u00f3digos.<br \/>\n<a name=\"topico05\"><\/a><\/p>\n<h2>O espa\u00e7o HTML e sua pr\u00e1tica<\/h2>\n<p>Conforme vimos nesse artigo, existem diversas formas de se utilizar t\u00e9cnicas de espa\u00e7amento atrav\u00e9s do pr\u00f3prio c\u00f3digo HTML. Dessa forma, como desenvolvedor, voc\u00ea consegue implementar diversas solu\u00e7\u00f5es que atrav\u00e9s do CSS poderia levar muito mais tempo. Por\u00e9m, recomendamos que utilize com uma certa modera\u00e7\u00e3o, e para situa\u00e7\u00f5es realmente necess\u00e1rias, pois isso implica num n\u00famero maior de bits no seu c\u00f3digo, portanto, mais tempo para renderiza\u00e7\u00e3o. Portanto, a depender da necessidade, vale mais a pena estilizar um elemento do que ficar utilizando quebras diversas vezes. Recomendamos tamb\u00e9m que voc\u00ea <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/doctype-html\/\" target=\"_blank\" rel=\"noopener\">crie um documento HTML<\/a> e utilize as t\u00e9cnicas explicadas anteriormente para praticar!<br \/>\n<a name=\"topico06\"><\/a><\/p>\n<h2>Como gerar um espa\u00e7o entre linhas com CSS?<\/h2>\n<p>Para finalizar, vale a pena entender tamb\u00e9m a propriedade line-height, propriedade do <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-css\/\">CSS que modifica o espa\u00e7o padr\u00e3o do HTML<\/a> sem precisar alterar as propriedades de margem, padding ou borda. Ou seja: essa propriedade \u00e9 capaz de alterar o espa\u00e7amento entre linhas. Com isso, podemos utilizar valores pr\u00e9-estabelecidos, valores em unidades de medidas (como px, em, cm), porcentagem ou um valor num\u00e9rico. Veja no exemplo a seguir, diferentes formas de utilizar a propriedade line-height.<\/p>\n<pre class=\"lang:xhtml decode:true \">div.a {\n\u00a0 line-height: normal;\n}\ndiv.b {\n\u00a0 line-height: 1.6;\n}\ndiv.c {\n\u00a0 line-height: 80%;\n}\ndiv.d {\n\u00a0 line-height: 20px;\n}<\/pre>\n<p>Al\u00e9m disso, voc\u00ea tamb\u00e9m pode acessar a <a href=\"https:\/\/www.w3schools.com\/cssref\/pr_dim_line-height.asp\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o oficial da W3C<\/a> para aprender outras caracter\u00edsticas dessa propriedade.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea sabia que \u00e9 poss\u00edvel incluir espa\u00e7o HTML diretamente no seu documento .html, sem precisar utilizar o CSS? Atualmente, o CSS permite inserir diversos estilos, inclusive controlar o espa\u00e7amento entre qualquer elemento HTML. Por\u00e9m, muitas vezes, editar estilos no CSS \u00e9 algo que demanda maior tempo. Imagine que voc\u00ea queira apenas incluir um espa\u00e7o entre [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3765,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,4,6],"tags":[2624,252,2959,2621],"class_list":["post-3764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criar-sites","category-desenvolvedores","category-tutoriais","tag-css","tag-desenvolvimento","tag-espaco","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML | Homehost<\/title>\n<meta name=\"description\" content=\"Como incluir espa\u00e7o HTML diretamente sem o uso do CSS. Entenda as principais fun\u00e7\u00f5es para incluir espa\u00e7amento no c\u00f3digo da sua p\u00e1gina!\" \/>\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\/espaco-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML | Homehost\" \/>\n<meta property=\"og:description\" content=\"Como incluir espa\u00e7o HTML diretamente sem o uso do CSS. Entenda as principais fun\u00e7\u00f5es para incluir espa\u00e7amento no c\u00f3digo da sua p\u00e1gina!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-27T11:36:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-13T09:56:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/espaco_html.png\" \/>\n\t<meta property=\"og:image:width\" content=\"877\" \/>\n\t<meta property=\"og:image:height\" content=\"314\" \/>\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=\"7 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\/espaco-html\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/\",\"name\":\"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/espaco_html.png\",\"datePublished\":\"2023-06-27T11:36:31+00:00\",\"dateModified\":\"2024-01-13T09:56:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"Como incluir espa\u00e7o HTML diretamente sem o uso do CSS. Entenda as principais fun\u00e7\u00f5es para incluir espa\u00e7amento no c\u00f3digo da sua p\u00e1gina!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/espaco_html.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/espaco_html.png\",\"width\":877,\"height\":314,\"caption\":\"Espa\u00e7o HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no 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":"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML | Homehost","description":"Como incluir espa\u00e7o HTML diretamente sem o uso do CSS. Entenda as principais fun\u00e7\u00f5es para incluir espa\u00e7amento no c\u00f3digo da sua p\u00e1gina!","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\/espaco-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML | Homehost","og_description":"Como incluir espa\u00e7o HTML diretamente sem o uso do CSS. Entenda as principais fun\u00e7\u00f5es para incluir espa\u00e7amento no c\u00f3digo da sua p\u00e1gina!","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-06-27T11:36:31+00:00","article_modified_time":"2024-01-13T09:56:01+00:00","og_image":[{"width":877,"height":314,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/espaco_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":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/","name":"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/espaco_html.png","datePublished":"2023-06-27T11:36:31+00:00","dateModified":"2024-01-13T09:56:01+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"Como incluir espa\u00e7o HTML diretamente sem o uso do CSS. Entenda as principais fun\u00e7\u00f5es para incluir espa\u00e7amento no c\u00f3digo da sua p\u00e1gina!","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/espaco_html.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/espaco_html.png","width":877,"height":314,"caption":"Espa\u00e7o HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no 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\/espaco_html.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3764","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=3764"}],"version-history":[{"count":12,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3764\/revisions"}],"predecessor-version":[{"id":13170,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3764\/revisions\/13170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/3765"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}