<p> O elemento Parágrafo

O elemento HTML <p> representa um parágrafo. Em mídias visuais, parágrafos são representados como blocos indentados de texto com a primeira letra avançada e separados por linhas em branco. Já em HTML, parágrafos são usados para agrupar conteúdos relacionados de qualquer tipo, como imagens e campos de um formulário.

Parágrafos são Elementos block-level, e fecharão automaticamente caso outro Elemento block-level inicie antes da tag de fechamento </p>. Veja "Omissão de tag" abaixo.

Atributos

Este elemento inclui atributos globais.

Obs.: O atributo align nas tags <p> está obsoleto e não deve ser usado.

Exemplo

HTML

<p>Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.
  Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.</p>

<p>Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.
   Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.</p>

Resultado

Estilizando Parágrafos

HTML

<p>Parágrafos separados por linhas em branco são mais legíveis. Porém,
também podemos distinguir parágrafos indentando suas primeiras linhas.
Uma abordagem que ocupa menos espaço e é usada para economizar
papel quando impresso.</p>

<p>Em textos que serão editados, como trabalhos escolares e rascunhos,
usamos tanto as linhas em branco quanto a indentação para
distinguirmos cada parágrafo. Já em publicações, usar ambas
é considerado redundante e amadoresco.</p>

<p>Em textos arcaicos usava-se o caractere especial: ¶,
o <i>caldeirão</i>, para separar parágrafos. Atualmente, esta abordagem
é considerada claustrofóbica e ilegível.</p>

<p>Será mesmo que é ilegível? Clique para visualizar:
  <button data-toggle-text="Que horrível! Mudar de volta!">Usar caldeirão nos parágrafos</button>
</p>

CSS

p {
  margin: 0;
  text-indent: 3ch;
}

p.caldeirao {
   text-indent: 0;
   display: inline;
}
p.caldeirao + p.caldeirao::before {
  content: " ¶ ";
}

JavaScript

document.querySelector('button').addEventListener('click', function (event) {
  document.querySelectorAll('p').forEach(function (paragraph) {
    paragraph.classList.toggle('caldeirao');
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});

Result

Considerações acerca da Acessibilidade

Subdividir um conteúdo em parágrafos torna um texto mais acessível. Leitores de tela e outras tecnologias assistivas providenciam atalhos que permitem a navegação entre parágrafos. Possibilitando, então, uma leitura rápida do texto.

Utilizar elementos <p> vazios para adicionar linhas em branco entre parágrafos é uma abordagem problemática para os que dependem das tecnologias leitoras de tela. O leitor anunciará a existência de um parágrafo, mas não lerá nenhum conteúdo, pois não há. Isso confunde e frustra os que dependem dos leitures de tela.

Se desejas mais espaço, use CSS propriedades como margin para recriar o efeito:

p {
  margin-bottom: 2em; // aumenta o espaço em branco após um parágrafo
}

Especificações

Specification Status Comment
HTML Living Standard
The definition of '<p>' in that specification.
Padrão em tempo real Nenhuma alteração desde a última w3c HTML5
HTML5
The definition of '<p>' in that specification.
Recomendação Atributo align está obsoleto
HTML 4.01 Specification
The definition of '<p>' in that specification.
Recomendação Definição inicial

Compatibilidade dos navegadores

BCD tables only load in the browser

Veja também