<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 July 2015.
Please take two minutes to fill out our short survey.
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>,<h2>,<h3>,<h4>,<h5>,<h6>,<header>,<hr>,<menu>,<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
Atributos
Este elemento inclui atributos globais.
Note: Obs.: O atributo
alignnas 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 |
|---|
| HTML # the-p-element |