HTML Básico – Parágrafos

Bacana, estamos avançando com nossos elementos de hipertexto (HTML) e agora vamos falar sobre parágrafos.

Obviamente, os parágrafos são usados para publicar textos nas nossas páginas HTML, mas, como vimos sobre aninhamento, podemos ter diversos outros elementos dentro de um parágrafo.

Já vimos também que os parágrafos são definidos com a tag <p> – uma das mais básicas para publicação de textos nas páginas da web.

Aqui está um exemplo:

<p>Isso é um parágrafo.</p>
<p>Isso é um outro parágrafo.</p>

Nota: Os navegadores tem o que chamamos de folhas de estilo integradas que aplica um CSS (nativo), que no caso dos parágrafos, adicionar margens acima e abaixo.

Fechamento do Parágrafo

Na versão anterior (HTML4) a gente podia apenas usar a tag de abertura de um parágrafo e a maioria dos navegadores exibiria-os corretamente.

Mas, atualmente, pode-se ter resultados inesperados ou até erros.

Veja como poderíamos fazer antes:

<p>Isso é um parágrafo.
<p>Aqui vai outro parágrafo...

O código que você está vendo acima deve até funcionar na maioria dos navegadores, mas por padrões e boas práticas de codificação, recomenda-se a abertura e fechamento.

Quebras de linhas

Sempre tem aquelas pessoas que querem quebrar/pular linhas no texto e usam os parágrafos para fazer isso.

No entanto, lembre que eu falei que os navegadores, por padrão, inserem espaços (margens) em cima e embaixo do conteúdo com os parágrafos.

Portanto, se você quer apenas quebrar linha, sem espaços, deve usar a tag <br> – que é um elemento vazio, da seguinte forma:

<p>Essa é a primeira linha, <br> essa é a segunda linha do mesmo parágrafo</p> 
<p>Esse é um outro parágrafo</p>

Nota: Não use parágrafos vazios <p></p> para adicionar espaços entre os elementos, mas use CSS para especificar espaçamentos entre os mesmos.

Criando Linhas Horizontais

Outro recurso que podem usar, são as linhas horizontais definidas pela tag <hr>.

Você pode usar essas linhas para separar seções, conteúdos, elementos em suas páginas da web.

Assim como a tag <br>de quebra de linha, a tag <hr> é do tipo vazia, como podemos ver a seguir:

<p>Isso é um parágrafo</p>
<hr>
<p>Aqui vai outro parágrafo</p>

Resultado:

Isso é um parágrafo

---

Aqui vai outro parágrafo

Espaços em Branco

Geralmente os espaços em branco são ignorados pelo navegador ou quando no máximo interpretados como espaço único.

Portanto, quando você aperta a tecla de espaço ou tab no teclado, mesmo que várias vezes e que no código você veja todo aquele espaço, será mostrado um espaço único.

Para deixar mais claro, aqui vão dois exemplos de parágrafos que mostrarão apenas uma única linha, sem espaços extras:

<p>Isso é um parágrafo      aqui tem    espaços extras e você                  pode ver no código...<p>
<p>Mas não serão exibidos
       mesmo que você quebre as linhas
       diretamente no código-fonte</p>

Agora, se você precisa de espaços extras, deverá usar um breve comando  (exatamente assim) e a tag <br> para quebrar linhas em seus documentos HTML.

Aqui está um exemplo disso:

<p>Esse é um parágrafo com multiplos &nbsp;&nbsp;&nbsp;&nbsp; espaços</p>
<p>Esse é um parágrafo com várias<br>quebras de<br>linhas</p>

Textos Pré-Formatados

Um recurso bem interessante do HTML é usar a tag <pre> que exibe espaços, tabulações, quebras de linhas, etc, exatamente como definido no código HTML.

Isso é muito útil em casos onde você teria vários espaços ( ) e várias quebras de linhas (<br>), como, por exemplo, você teria em uma poema.

O código abaixo mostraria exatamente como está disposto no código:

<pre>
    Aqui estão três coisas que não consigo largar
    Minha cama, meu PC
    E meu celular!
</pre>

Resultado:

    Aqui estão três coisas que não consigo largar
    Minha cama, meu PC
    E meu celular!

Obs: O texto dentro de tags <pre>geralmente são renderizados pelos navegadores com fontes moespaçadas ou de largura fixa, como Courier, mas é personalizável com CSS

Navegação

<< HTML Básico – CabeçalhosHTML Básico – Links >>