HTML <p>-Tag
Der <p>-Tag definiert einen Textabsatz. Tag-Beschreibung, Attribute und Verwendungsbeispiele.
Der HTML-<p>-Tag ist ein Block-Level-Element, das einen Textabsatz auf einer Webseite definiert. Als Block-Level-Element beginnt es in einer neuen Zeile und nimmt die volle Breite seines übergeordneten Containers ein.
Diese Seite erklärt, wie man Absätze schreibt, welchen Standard-Abstand Browser auf sie anwenden, wann man einen <p> nicht verwenden sollte und wie man Absätze mit CSS stylt.
Dieses semantische Tag wird häufig zur Strukturierung von Textinhalten verwendet, etwa in Artikeln, Blogbeiträgen oder Produktbeschreibungen. Innerhalb eines <p> lassen sich Inline-Tags wie <strong> oder <em> platzieren, um bestimmte Wörter oder Phrasen im Absatz hervorzuheben oder zu formatieren.
Eine ordnungsgemäße Strukturierung von Textinhalten mit dem <p>-Tag ist wichtig für Barrierefreiheit und Benutzerfreundlichkeit. Screenreader und andere Hilfstechnologien verlassen sich auf semantische Tags wie <p>, um Inhalte korrekt zu interpretieren und den Nutzern zu präsentieren.
Syntax
Der <p>-Tag kommt in Paaren. Der Inhalt wird zwischen dem öffnenden (<p>) und schließenden (</p>) Tag geschrieben. Wird das schließende Tag weggelassen, gilt das Ende des Absatzes als mit dem Beginn des nächsten Block-Level-Elements übereinstimmend.
Leerzeichen zwischen dem öffnenden <p>-Tag und seinem Inhalt werden vom Browser ignoriert. Um einen Einzug festzulegen, verwende die CSS-Eigenschaft text-indent.
Der <p>-Tag kann keine Tabellen und andere Block-Level-Elemente enthalten.
Beispiel des HTML-<p>-Tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Standard-Absatzabstand (das Box-Modell)
Browser rendern Absätze nicht direkt aneinander. Standardmäßig wenden sie einen oberen und unteren Außenabstand (margin) von etwa 1em auf jedes <p>-Element an, was den sichtbaren Abstand zwischen Absätzen erzeugt. Der Standard-User-Agent-Stil lautet ungefähr:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
}Deshalb sind zwei benachbarte Absätze voneinander getrennt, auch wenn kein CSS geschrieben wurde. Wenn Absätze enger zusammenliegen sollen (oder der Abstand ganz entfernt werden soll), kann der Außenabstand manuell zurückgesetzt werden:
<!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>Ein verbreiteter Reset ist margin: 0 für p, wobei der Abstand anschließend nur mit margin-bottom wieder hinzugefügt wird. Dadurch wird verhindert, dass der erste Absatz seinen Container durch einen unerwünschten oberen Außenabstand nach unten schiebt.
Wann <p> NICHT verwendet werden sollte
Ein <p>-Element darf nur Phrasing Content enthalten — Text und Inline-Elemente wie <strong>, <em>, <a>, <span> oder <img>. Es kann keine Block-Level-Elemente enthalten.
Wird ein Block-Level-Element in ein <p> eingebettet, schließt der Browser den Absatz still automatisch vor diesem Element. Dies ist einer der häufigsten Anfängerfehler, da die Seite zwar noch gerendert wird, das DOM jedoch nicht dem entspricht, was geschrieben wurde. Folgende Elemente sollten nicht innerhalb eines <p> stehen:
<div>(verwende stattdessen den<div>-Tag als Wrapper um Absätze herum)- Listen wie
<ul>,<ol>,<li> - Überschriften (
<h1>–<h6>) - Tabellen (
<table>) - Ein weiteres
<p>(Absätze können nicht verschachtelt werden)
<!-- 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>Um Block-Level-Inhalte zu gruppieren, sollte ein <div> um die Absätze herum verwendet werden und nicht umgekehrt. Zum Gruppieren von Inline-Inhalten verwendet man den <span>-Tag.
CSS verwenden
Um Text in einem Absatz auszurichten, sollte statt des veralteten align-Attributs die CSS-Eigenschaft text-align genutzt werden.
Beispiel des HTML-<p>-Tags mit der CSS-Eigenschaft 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>Zeilenumbrüche innerhalb eines Absatzes
Um eine Zeile innerhalb eines Absatzes zu umbrechen, ohne einen neuen zu beginnen, verwendet man den <br>-Tag. Im Gegensatz zu einem neuen <p> fügt ein <br> keinen Standard-Absatzabstand hinzu — er verschiebt den folgenden Text lediglich in die nächste Zeile.
Beispiel des HTML-<p>-Tags mit dem <br>-Tag:
<!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>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left, right, center, justify | Legt die Textausrichtung fest. Veraltet — wird in HTML5 nicht unterstützt; stattdessen die CSS-Eigenschaft text-align verwenden |
Der <p>-Tag unterstützt außerdem die globalen Attribute und die Ereignis-Attribute.
So wird ein HTML-<p>-Tag gestylt
<!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>