Das p-Element: Der Absatz
Das <p> ist das häufigste Element im sichtbaren Web, der Behälter für ganz normalen Fließtext. Einen ausführlichen Einstieg mit strong, em und br gibt es schon im Grundlagenkapitel Absätze und Text, hier auf der Referenzseite geht es um die Eigenheiten des Elements selbst.
Syntax
HTML-Code
<p>Jeder Gedanke bekommt seinen eigenen Absatz.</p>
<p>So bleibt der Text lesbar und die Struktur klar.</p>Was darf in ein p und was nicht?
In einen Absatz gehören Text und Inline-Elemente: Links, strong, em, code, Bilder. Keine Block-Elemente. Ein div, eine Liste oder gar ein weiterer Absatz im p sind ungültig. Und hier wird es interessant: Der Browser wirft dir dabei keinen Fehler, er beendet den Absatz einfach stillschweigend selbst.
Das hier schreibst du
<p>Meine Einkaufsliste:
<ul><li>Disketten</li></ul>
</p>Das hier macht der Browser tatsächlich daraus
<p>Meine Einkaufsliste:</p>
<ul><li>Disketten</li></ul>
<p></p>Das schließende p landet als leerer Absatz irgendwo, und wenn dein CSS auf den Absatz zielt, gehorcht plötzlich nur noch die erste Zeile. Solche Rätsel kosten gern mal einen Abend. Der Validator deckt sie in Sekunden auf.
Gut zu wissen
- Das schließende
</p>ist laut Spezifikation tatsächlich optional, weil der Browser Absätze selbst beendet. Trotzdem: immer mitschreiben. Expliziter Code ist lesbarer und erspart genau die Überraschungn von oben. - Leere Absätze als Abstandshalter sind ein Trick aus der Steinzeit. Abstände regelt CSS.
- Attribute hat das p keine eigenen, nur die globalen.
Der Klassiker: zusammenfallende Abstände
Absätze bringen von Haus aus Außenabstand mit, oben und unten je etwa eine Zeile. Treffen zwei Absätze aufeinander, addieren sich diese Abstände aber nicht, sondern überlappen: Der größere gewinnt. Dieses Verhalten heißt Margin Collapsing und verwirrt Anfänger regelmäßig, wenn margin-bottom: 40px scheinbar nichts bewirkt weil der Folgeabsatz sowieso schon Abstand mitbringt. Die Details stehen im Kapitel Abstände, das Kurzrezept: Abstände konsequent nur in eine Richtung vergeben, etwa immer nach untenn.
Was nicht in ein p darf
Ein Absatz darf nur Text- und Inline-Elemente enthalten. Listen, Überschriften, Tabellen oder weitere Absätze im p sind ungültig, und der Browser beendet den Absatz dann eigenmächtig an der Stelle wo das Blockelement beginnt:
<!-- so nicht: -->
<p>Meine Einkäufe: <ul><li>Milch</li></ul></p>
<!-- der Browser macht daraus: -->
<p>Meine Einkäufe: </p><ul><li>Milch</li></ul><p></p>Das Ergebnis sieht oft trotzdem richtig aus, im DOM steht aber etwas anderes als im Quelltext, und spätestens beim Stylen wundert man sich. Der Validator findet solche Stellen zuverlässigg.
Verwandt: Absätze und Text · div · Überschriften