<p> O elemento Parágrafo

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

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

Exemplo

HTML

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

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

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

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

JavaScript

js
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:

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

Especificações

Specification
HTML
# the-p-element

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
p

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também