Como Inserir Espaços no HTML

As Entidades:  ,   e  

Insira Espaços Diretamente nos seus Documentos HTML sem o uso de CSS?

Aqui você terá um apanhado básico de como usar espaços do HTML de forma prática.

Parágrafos

O uso da tag <p> </p> por si só gera quebra de linhas entre sentenças criando parágrafos mesmo com sentenças escritas na mesma linha.

<p>Primeiro parágrafo.</p>
 
<p>Segundo parágrafo</p>
&nbsp;

Entidade &nbsp; (non-breaking space)

Para criar regras de tabulações, podemos utilizar  a entidade &nbsp;, &ensp; e &emsp;

Veja exemplos:

<p>Portal&nbsp;do&nbsp;Economaster</p>
<p>Portal do Economaster</p>
<p>Portal&ensp;do&ensp;Economaster</p>
<p>Portal&emsp;do&emsp;Economaster</p>
 

Usando os códigos acima, o documento HTML apresentará os efeitos abaixo:

Portal do Economaster

Portal do Economaster

Portal do Economaster

Portal do Economaster

No documento HTML mesmo se você apertar a tecla espaço 4 vezes, o navegador só contará o uso de um espaço entre sentenças de caracteres, Por isso o uso da entidade &nbsp; é uma verdadeira mão na roda.

Uma outra utilização para a entidade &nbsp; é o de criar espaços maiores entre parágrafos.

Veja exemplos:

<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
 

Primeiro parágrafo

Segundo parágrafo

Agora com a entidade &nbsp;:

<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
 

Primeiro parágrafo

Segundo parágrafo

É como se existisse um parágrafo oculto ou um espaçamento maior entre parágrafos. Mas essa não é a melhor forma.

Espaço com a tag <br/> (break)

A melhor forma de inserirmos linhas entre parágrafos é usando uma quebra de linhas (break lines).

Veja exemplo a seguir usando a tag <br/>

<p>Como quebrar linhas<br/>mesmo usando a tag de parágrafo</p>
 

Como fica do documento HTML:

Como quebrar linhas
mesmo usando a tag de parágrafo

Agora usando a tag <br/> para inserir linhas:

<p>Inserindo quebra de<br/><br/><br/><br/>quatro linhas</p>
 

Inserindo quebra de

quatro linhas

Usando <p> e <br/> em textos HTML

Existe uma pequena diferença entre os espaços criados no uso das tags <p> e <br/>.

Nas tags de parágrafos <p>, por padrão, existe uma margem em torno de 1em, enquanto que se usarmos uma quebra <br/> isso não existe, ou seja, com uma quebra de linha, apena criamos mais uma linha com espaçamento diferente daquela oriunda da criação de um novo parágrafo.

Vejamos o exemplo abaixo do poema Pontinho de vista, de Pedro Bandeira.

<p>Eu sou pequeno, me dizem,<br/>
e eu fico muito zangado.<br/>
Tenho de olhar todo mundo<br/>
com o queixo levantado.</p>
<p>Mas, se formiga falasse<br/>
e me visse lá do chão,<br/>
ia dizer, com certeza:<br/>
- Minha nossa, que grandão!</p>
 

Agora vejamos como o texto fica no documento HTML com as devidas marcações <p> e <br/>:

Eu sou pequeno, me dizem,
e eu fico muito zangado.
Tenho de olhar todo mundo
com o queixo levantado.

Mas, se formiga falasse
e me visse lá do chão,
ia dizer, com certeza:
– Minha nossa, que grandão!

Observe que o texto fica mais bonito visualmente e que a distância entre os parágrafos é diferente de uma quebra simples de linha.

Aliás, espero que tenha gostado desse Formatador e limpador de códigos de Tabelas HTML do MS Excel.

Certamente esses websites também podem te interessar:

• Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
• Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
• Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
• Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.
• Mortadela Show – Muito assunto divertido, guia do cubo mágico, curiosidades e muito mais.

Por fim, veja mais conteúdos do Web-ZoneWare, seu site de tecnologia na web a fim de encontrar o que precisa.

O post Como Inserir Espaços no HTML apareceu primeiro em Web-Zoneware.