<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.

* *Categorias de conteúdo*
Conteúdos de fluxo, conteúdos palpáveis.
* *Conteúdo permitido*Conteúdo frasal.
* *Omissão de tag* A tag de abertura é obrigatória. A tag de fechamento pode ser omitida caso o elemento `<p>` seja imediatamente sucedido pelos elementos `<address>`, `<article>`, `<aside>`, `<blockquote>`, `<div>`, `<dl>`, `<fieldset>`, `<footer>`, `<form>` (en-US), `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<header>`, `<hr>`, `<menu>` (en-US), `<nav>`, `<ol>`, `<pre>`, `<section>`, `<table>`, `<ul>`, ou por outro elemento `<p>`, ou, caso não haja mais conteúdo no elemento pai e o elemento pai não for um elemento `<a>`.
* *Elementos pai permitidos* Qualquer elemento que aceite conteúdo de fluxo.
* *Interface DOM* `HTMLParagraphElement` (en-US)
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 Standard # the-p-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<hr>`
* `<br>`