path: root/files/pt-br/web/html/element/p/index.html

---
title: <p> O elemento Parágrafo
slug: Web/HTML/Element/p
translation_of: Web/HTML/Element/p
---
<p><span class="seoSummary">O <strong>elemento HTML</strong> <strong> <code>&lt;p&gt;</code></strong> 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.<br>
 <br>
 Parágrafos são <a href="/pt-BR/docs/Web/HTML/Elementos_block-level">Elementos block-level</a>, e fecharão automaticamente caso outro <a href="/pt-BR/docs/Web/HTML/Elementos_block-level">Elemento block-level</a> inicie antes da tag de fechamento <code>&lt;/p&gt;</code>. Veja "Omissão de tag" abaixo.</span></p>

<ul class="htmlelt">
 <li><dfn><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo">Categorias de conteúdo</a></dfn><br>
  <a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_de_fluxo">Conteúdos de fluxo</a>, conteúdos palpáveis.</li>
 <li><dfn>Conteúdo permitido</dfn><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conte%C3%BAdo_fraseado">Conteúdo frasal</a>.</li>
 <li><dfn>Omissão de tag</dfn> A tag de abertura é obrigatória. A tag de fechamento pode ser omitida caso o elemento {{HTMLElement("p")}} seja imediatamente sucedido pelos elementos {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}, ou por outro elemento {{HTMLElement("p")}}, ou, caso não haja mais conteúdo no elemento pai e o elemento pai não for um elemento {{HTMLElement("a")}}.</li>
 <li><dfn>Elementos pai permitidos</dfn> Qualquer elemento que aceite <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conte%C3%BAdo_de_fluxo">conteúdo de fluxo</a>.</li>
 <li><dfn>Interface DOM</dfn> {{domxref("HTMLParagraphElement")}}</li>
</ul>

<h2 id="Atributos" name="Atributos">Atributos</h2>

<p>Este elemento inclui <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>

<div class="note">
<p><strong>Obs.:</strong> O atributo <code>align</code> nas tags <code>&lt;p&gt;</code> está obsoleto e não deve ser usado.</p>
</div>

<h2 id="Exemplo" name="Exemplo">Exemplo</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample('Exemplo')}}</p>

<h2 id="Estilizando_Parágrafos" name="Estilizando_Parágrafos">Estilizando Parágrafos</h2>

<h3 id="HTML_2">HTML</h3>

<pre class="brush: html">&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

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

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

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p {
  margin: 0;
  text-indent: 3ch;
}

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

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: 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;
});</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample('Estilizando_Parágrafos')}}</p>

<h2 id="Considerações_acerca_da_Acessibilidade" name="Considerações_acerca_da_Acessibilidade">Considerações acerca da Acessibilidade</h2>

<p>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.<br>
 <br>
 Utilizar elementos <code>&lt;p&gt;</code> 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.</p>

<p>Se desejas mais espaço, use {{glossary("CSS")}} propriedades como {{cssxref("margin")}} para recriar o efeito:</p>

<pre class="brush: css">p {
  margin-bottom: 2em; // aumenta o espaço em branco após um parágrafo
}
</pre>

<h2 id="Especificações" name="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Nenhuma alteração desde a última w3c {{SpecName("HTML5 W3C")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Atributo <code>align</code> está obsoleto</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_dos_navegadores" name="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>

<div class="hidden">
<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um <em>pull request</em>.</p>
</div>

<div></div>

<div>{{Compat("html.elements.p")}}</div>

<h2 id="Veja_também" name="Veja_também">Veja também</h2>

<ul>
 <li>{{HTMLElement("hr")}}</li>
 <li>{{HTMLElement("br")}}</li>
</ul>