{"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":"2026-09-11T19:33:24","modified_gmt":"2026-09-11T22:33:24","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":"\n<p class=\"wp-block-paragraph\">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\n\n\n<p class=\"wp-block-paragraph\">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\n\n\n<p class=\"wp-block-paragraph\">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\n\n\n<p class=\"wp-block-paragraph\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#Espaco_com_a_tag_HTML\" title=\"Espa\u00e7o com a tag HTML &lt;p&gt;\">Espa\u00e7o com a tag HTML &lt;p&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#A_entidade\" title=\"A entidade &amp;nbsp;\">A entidade &amp;nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#Espaco_com_a_tag_HTML_quebra_de_linhas\" title=\"Espa\u00e7o com a tag HTML &lt;br\/&gt;: quebra de linhas\">Espa\u00e7o com a tag HTML &lt;br\/&gt;: quebra de linhas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#Mesclando_o_com_o\" title=\"Mesclando o &lt;br\/&gt; com o &lt;p&gt;\">Mesclando o &lt;br\/&gt; com o &lt;p&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#A_tag\" title=\"A tag &lt;pre&gt;\">A tag &lt;pre&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#O_espaco_HTML_e_sua_pratica\" title=\"O espa\u00e7o HTML e sua pr\u00e1tica\">O espa\u00e7o HTML e sua pr\u00e1tica<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#Como_gerar_um_espaco_entre_linhas_com_CSS\" title=\"Como gerar um espa\u00e7o entre linhas com CSS?\">Como gerar um espa\u00e7o entre linhas com CSS?<\/a><\/li><\/ul><\/nav><\/div>\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Espaco_com_a_tag_HTML\"><\/span>Espa\u00e7o com a tag HTML &lt;p&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A tag &lt;p> permite a inser\u00e7\u00e3o de par\u00e1grafos no conte\u00fado HTML. 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 <code>&lt;\/p><\/code>, o HTML gera uma quebra de linha. Al\u00e9m disso, a tag <code>&lt;p><\/code> traz consigo as caracter\u00edsticas padr\u00e3o de margem superior e inferior no valor de <code>1em<\/code>, o que gera um espa\u00e7o maior entre essa tag e qualquer outro elemento.\u00a0Essa \u00e9 uma das t\u00e9cnicas b\u00e1sicas de espa\u00e7o HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;minha linha de c\u00f3digo&lt;\/p&gt;&lt;p&gt;meu segundo par\u00e1grafo&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado final ser\u00e1:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">minha linha de c\u00f3digo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">meu segundo par\u00e1grafo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_entidade\"><\/span>A entidade &amp;nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 tiv\u00e9ssemos apertado a tecla espa\u00e7o uma \u00fanica vez. Vejamos o exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Home    Host.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado ser\u00e1:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Home Host.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ent\u00e3o, como resolver esse problema no HTML?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O HTML permite o uso de entidades que representam s\u00edmbolos ou teclas. A entidade que representa a tecla do espa\u00e7o \u00e9 a <code>&amp;nbsp;<\/code> (non-breaking space). Portanto, para acrescentar espa\u00e7os entre nossos elementos, basta o acr\u00e9scimo do <code>&amp;nbsp;<\/code> dentro do nosso c\u00f3digo. Vamos agora refazer o c\u00f3digo anterior utilizando quatro vezes o c\u00f3digo referente ao espa\u00e7amento:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Home&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Host.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado ser\u00e1:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Home&nbsp;&nbsp;&nbsp;&nbsp;Host.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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: <code>&amp;ensp;<\/code> e <code>&amp;emsp<\/code>;. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Home&amp;nbsp;Host.&lt;\/p&gt;\n&lt;p&gt;Home&nbsp;Host.&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;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado ser\u00e1:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Home&nbsp;Host.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Home&nbsp;Host.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Home\u2002Host.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Home\u2003Host.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\n\n\n<p class=\"wp-block-paragraph\">O <code>&amp;nbsp;<\/code> \u00e9 uma entidade HTML, e existem muitas outras \u2014 para s\u00edmbolos, acentos e matem\u00e1tica. Veja a tabela de <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/caracteres-especiais-acentos-html\/\">caracteres especiais<\/a>.<br> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Espaco_com_a_tag_HTML_quebra_de_linhas\"><\/span>Espa\u00e7o com a tag HTML &lt;br\/&gt;: quebra de linhas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Anteriormente, vimos que entre um par\u00e1grafo e outro \u00e9 realizada a quebra de linha. Mas, e se quisermos acrescentar uma ou mais linhas a essa quebra? Basta utilizar a tag <code>&lt;br\/><\/code><strong> <\/strong>(break). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 HTML sem precisar 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 <code>&lt;span><\/code>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 <code>&lt;p><\/code>. Dessa forma, podemos utilizar a tag break aliada \u00e0s tags de par\u00e1grafo de uma forma interessante, como veremos posteriormente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vejamos ent\u00e3o o exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Como inserir uma&lt;br\/&gt;quebra de linha&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, temos o seguinte resultado:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Como inserir uma<br>\nquebra de linha<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Como explicado anteriormente, podemos aplicar quantos breaks quisermos; portanto, podemos criar um espa\u00e7amento maior. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Vamos inserir uma&lt;br\/&gt;&lt;br\/&gt;&lt;br\/&gt;quebra de tr\u00eas linhas.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Com esse exemplo, chegamos ao seguinte resultado:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos inserir uma<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">quebra de tr\u00eas linhas.<br>\n<a name=\"topico03\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mesclando_o_com_o\"><\/span>Mesclando o &lt;br\/&gt; com o &lt;p&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Observe tamb\u00e9m que a tag <code>&lt;br\/><\/code> n\u00e3o gera um espa\u00e7o igual \u00e0 quebra de linha gerada com o fechamento da tag <code>&lt;p><\/code>. Isso ocorre porque a tag <code>&lt;p><\/code>, por padr\u00e3o, possui uma margem superior e inferior de <code>1em<\/code>, 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\n\n\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\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_tag\"><\/span>A tag &lt;pre&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Por meio das tags <code>&lt;pre><\/code> e <code>&lt;\/pre><\/code> 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 <code>&lt;pre><\/code> traz consigo um valor de margem superior e inferior de <code>1em<\/code>, assim como a tag <code>&lt;p><\/code>. Vejamos ent\u00e3o o exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;pre&gt;Meu texto.    Ola\nMundo.&lt;\/pre&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado ser\u00e1:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Meu texto.    Ola\nMundo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto, podemos utilizar a tag <code>&lt;pre><\/code> para facilitar, principalmente quando queremos utilizar tabula\u00e7\u00f5es, por exemplo: na escrita de c\u00f3digos.<br> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_espaco_HTML_e_sua_pratica\"><\/span>O espa\u00e7o HTML e sua pr\u00e1tica<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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, por meio do CSS, poderiam levar muito mais tempo. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_gerar_um_espaco_entre_linhas_com_CSS\"><\/span>Como gerar um espa\u00e7o entre linhas com CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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\n\n\n<pre class=\"wp-block-code\"><code>div.a {\n&nbsp; line-height: normal;\n}\ndiv.b {\n&nbsp; line-height: 1.6;\n}\ndiv.c {\n&nbsp; line-height: 80%;\n}\ndiv.d {\n&nbsp; line-height: 20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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 v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\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=\"2026-09-11T22:33:24+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\":\"Article\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/espaco-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/espaco-html\\\/\"},\"author\":{\"name\":\"Rafael Marques\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"headline\":\"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML\",\"datePublished\":\"2023-06-27T11:36:31+00:00\",\"dateModified\":\"2026-09-11T22:33:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/espaco-html\\\/\"},\"wordCount\":1278,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\"},\"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\",\"keywords\":[\"css\",\"desenvolvimento\",\"espa\u00e7o\",\"html\"],\"articleSection\":[\"Criar sites\",\"Desenvolvedores\",\"Tutoriais\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/tutoriais\\\/espaco-html\\\/#respond\"]}]},{\"@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\":\"2026-09-11T22:33:24+00:00\",\"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\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#organization\",\"name\":\"Homehost\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/logo-detalhes.png\",\"contentUrl\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/logo-detalhes.png\",\"width\":150,\"height\":48,\"caption\":\"Homehost\"},\"image\":{\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Homehost\\\/\",\"https:\\\/\\\/x.com\\\/Homehost\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.homehost.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/rafamarquesrmb\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/rafamarquesrmb\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"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":"2026-09-11T22:33:24+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":"Article","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#article","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/"},"author":{"name":"Rafael Marques","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"headline":"Espa\u00e7o HTML: como incluir espa\u00e7os diretamente no HTML","datePublished":"2023-06-27T11:36:31+00:00","dateModified":"2026-09-11T22:33:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/"},"wordCount":1278,"commentCount":0,"publisher":{"@id":"https:\/\/www.homehost.com.br\/blog\/#organization"},"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","keywords":["css","desenvolvimento","espa\u00e7o","html"],"articleSection":["Criar sites","Desenvolvedores","Tutoriais"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/espaco-html\/#respond"]}]},{"@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":"2026-09-11T22:33:24+00:00","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","publisher":{"@id":"https:\/\/www.homehost.com.br\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.homehost.com.br\/blog\/#organization","name":"Homehost","url":"https:\/\/www.homehost.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2022\/10\/logo-detalhes.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2022\/10\/logo-detalhes.png","width":150,"height":48,"caption":"Homehost"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Homehost\/","https:\/\/x.com\/Homehost"]},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/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":15,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3764\/revisions"}],"predecessor-version":[{"id":18074,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3764\/revisions\/18074"}],"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}]}}