Tag HTML <p>
Il tag <p> definisce un paragrafo di testo. Descrizione del tag, attributi ed esempi di utilizzo.
Il tag HTML <p> è un elemento a livello di blocco che definisce un paragrafo di testo in una pagina web. In quanto elemento a livello di blocco, inizia su una nuova riga e occupa tutta la larghezza del contenitore genitore.
Questa pagina spiega come scrivere paragrafi, la spaziatura predefinita che i browser applicano, quando non bisogna usare il <p> e come stilizzare i paragrafi con CSS.
Questo tag semantico è comunemente utilizzato per strutturare il contenuto testuale, come articoli, post di blog o descrizioni di prodotti. È possibile inserire tag inline come <strong> o <em> all'interno di un <p> per enfatizzare o formattare parole o frasi specifiche nel paragrafo.
Strutturare correttamente il contenuto testuale con il tag <p> è importante per l'accessibilità e l'usabilità. Gli screen reader e altre tecnologie assistive si basano su tag semantici come <p> per interpretare e presentare accuratamente il contenuto agli utenti.
Sintassi
Il tag <p> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<p>) e quello di chiusura (</p>). Se il tag di chiusura viene omesso, si considera che la fine del paragrafo coincida con l'inizio del successivo elemento a livello di blocco.
Gli spazi tra il tag di apertura <p> e il suo contenuto vengono ignorati dal browser. Per impostare un rientro, usa la proprietà CSS text-indent .
Il tag <p> non può contenere tabelle e altri elementi a livello di blocco.
Esempio del tag HTML <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Spaziatura predefinita dei paragrafi (il modello a scatola)
I browser non rendono i paragrafi uno adiacente all'altro senza spazio. Per impostazione predefinita, applicano un margin superiore e inferiore di circa 1em a ogni elemento <p>, il che crea lo spazio visibile tra i paragrafi. Lo stile predefinito dello user-agent è all'incirca:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
}Ecco perché due paragrafi adiacenti sono distanziati anche quando non scrivi alcun CSS. Se vuoi che i paragrafi siano più vicini (o vuoi rimuovere completamente lo spazio), reimposta tu stesso il margin:
<!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>Un reset comune è margin: 0 su p, aggiungendo poi la spaziatura con margin-bottom soltanto. Questo evita che il primo paragrafo spinga verso il basso il suo contenitore con un margin superiore indesiderato.
Quando NON usare <p>
Un elemento <p> può contenere solo contenuto di fraseggio — testo ed elementi inline come <strong>, <em>, <a>, <span> o <img>. Non può contenere elementi a livello di blocco.
Se annidi un elemento a livello di blocco all'interno di un <p>, il browser chiude automaticamente il paragrafo prima di quell'elemento senza emettere alcun avviso. Questo è uno degli errori più comuni per i principianti, perché la pagina continua a essere visualizzata ma il DOM non corrisponde a ciò che hai scritto. Evita di inserire questi elementi all'interno di un <p>:
<div>(usa il tag<div>come contenitore attorno ai paragrafi)- Liste come
<ul>,<ol>,<li> - Intestazioni (
<h1>–<h6>) - Tabelle (
<table>) - Un altro
<p>(i paragrafi non possono essere annidati)
<!-- 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>Per raggruppare contenuto a livello di blocco, racchiudi i tuoi paragrafi in un <div> e non viceversa. Per raggruppare contenuto inline, usa il tag <span>.
Utilizzo con CSS
Per allineare il testo in un paragrafo, invece dell'attributo obsoleto align, usa la proprietà CSS text-align.
Esempio del tag HTML <p> usato con la proprietà 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>Interruzioni di riga all'interno di un paragrafo
Per andare a capo all'interno di un paragrafo senza iniziarne uno nuovo, usa il tag <br>. A differenza di un nuovo <p>, un <br> non aggiunge il margin predefinito del paragrafo — sposta semplicemente il testo seguente alla riga successiva.
Esempio del tag HTML <p> usato con il 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>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| align | left, right, center, justify | Definisce l'allineamento del testo. Deprecato — non supportato in HTML5; usa invece la proprietà CSS text-align |
Il tag <p> supporta anche gli Attributi Globali e gli Attributi di Evento.
Come stilizzare un 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>