1. Tecnologia Web para desenvolvedores
  2. HTML: Linguagem de Marcação de Hipertexto
  3. Referência HTML
  4. Elementos HTML
  5. <p>

Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.

View in English Always switch to English

<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 ⁨julho de 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

Veja também

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

AltStyle によって変換されたページ (->オリジナル) /