<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.
- 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 |
Compatibilidade com navegadores
Loading…