<p> O elemento Parágrafo

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
pChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Veja também