Tag HTML <p>
A tag <p> define um parágrafo de texto. Descrição da tag, atributos e exemplos de uso.
A tag HTML <p> é um elemento de nível de bloco que define um parágrafo de texto em uma página web. Como elemento de nível de bloco, ela começa em uma nova linha e ocupa toda a largura do seu contêiner pai.
Esta página explica como escrever parágrafos, o espaçamento padrão que os navegadores aplicam a eles, quando você não deve usar um <p>, e como estilizar parágrafos com CSS.
Esta tag semântica é comumente usada para estruturar conteúdo de texto, como artigos, postagens de blog ou descrições de produtos. Você pode colocar tags inline como <strong> ou <em> dentro de um <p> para enfatizar ou formatar palavras ou frases específicas dentro do parágrafo.
Estruturar corretamente o conteúdo de texto com a tag <p> é importante para acessibilidade e usabilidade. Leitores de tela e outras tecnologias assistivas dependem de tags semânticas como <p> para interpretar e apresentar o conteúdo aos usuários com precisão.
Sintaxe
A tag <p> vem em pares. O conteúdo é escrito entre as tags de abertura (<p>) e fechamento (</p>). Se a tag de fechamento for omitida, considera-se que o fim do parágrafo coincide com o início do próximo elemento de nível de bloco.
Espaços entre a tag de abertura <p> e seu conteúdo são ignorados pelo navegador. Para definir um recuo, use a propriedade CSS text-indent .
A tag <p> não pode conter tabelas nem outros elementos de nível de bloco.
Exemplo da tag HTML <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Espaçamento padrão de parágrafos (o modelo de caixa)
Os navegadores não renderizam parágrafos colados uns aos outros. Por padrão, eles aplicam uma margem superior e inferior de aproximadamente 1em a cada elemento <p>, o que cria o espaço visível entre os parágrafos. O estilo padrão do agente de usuário é, aproximadamente:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
}É por isso que dois parágrafos adjacentes ficam separados mesmo quando você não escreve nenhum CSS. Se você quiser que os parágrafos fiquem mais próximos (ou remover o espaço completamente), redefina a margem você mesmo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin-top: 0;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<p>This paragraph has a smaller gap below it.</p>
<p>And this one sits closer to the paragraph above.</p>
</body>
</html>Um reset comum é usar margin: 0 em p e depois adicionar o espaçamento de volta apenas com margin-bottom. Isso evita que o primeiro parágrafo empurre seu contêiner para baixo com uma margem superior indesejada.
Quando NÃO usar <p>
Um elemento <p> pode conter apenas conteúdo de fraseamento — texto e elementos inline como <strong>, <em>, <a>, <span> ou <img>. Ele não pode conter elementos de nível de bloco.
Se você aninhar um elemento de nível de bloco dentro de um <p>, o navegador silenciosamente fecha o parágrafo automaticamente antes desse elemento. Este é um dos erros mais comuns de iniciantes, porque a página ainda é renderizada, mas o DOM não é o que você escreveu. Evite colocar estes dentro de um <p>:
<div>(use a tag<div>como um invólucro ao redor dos parágrafos)- Listas como
<ul>,<ol>,<li> - Títulos (
<h1>–<h6>) - Tabelas (
<table>) - Outro
<p>(parágrafos não podem ser aninhados)
<!-- WRONG: the <p> is auto-closed before the <div>,
so the second sentence ends up outside the paragraph -->
<p>
First sentence.
<div>Block content</div>
Second sentence.
</p>Para agrupar conteúdo de nível de bloco, envolva seus parágrafos em um <div>, e não o contrário. Para agrupar conteúdo inline, use a tag <span>.
Usando CSS
Para alinhar texto em um parágrafo, em vez do atributo obsoleto align, use a propriedade CSS text-align.
Exemplo da tag HTML <p> usada com a propriedade CSS text-align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.paragraph {
text-align: center;
}
</style>
</head>
<body>
<h1>Title of the document</h1>
<div class="paragraph">
<p>The text alignment to the center is set with CSS property text-align</p>
</div>
</body>
</html>Quebras de linha dentro de um parágrafo
Para quebrar uma linha dentro de um parágrafo sem iniciar um novo, use a tag <br>. Ao contrário de um novo <p>, um <br> não adiciona a margem padrão de parágrafo — ele apenas move o texto seguinte para a próxima linha.
Exemplo da tag HTML <p> usada com a tag <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. <br /> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| align | left, right, center, justify | Define o alinhamento do texto. Obsoleto — não suportado no HTML5; use a propriedade CSS text-align em seu lugar |
A tag <p> também suporta os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: blue;
font-size: 18px;
text-align: justify;
}
</style>
</head>
<body>
<p>This paragraph is styled with CSS.</p>
</body>
</html>