<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 permitidoConteú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>
,<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.
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 com navegadores
BCD tables only load in the browser