<p>

Zuletzt aktualisiert am 30. Januar 2026

Jeder Text auf einer Webseite braucht Struktur, und das <p>-Element (Paragraph) ist dafür dein wichtigstes Werkzeug. Es definiert einen Textabsatz, genau wie in einem Buch oder Artikel. Du wirst <p> in praktisch jeder HTML-Datei finden, denn ohne Absätze wäre der gesamte Text ein einziger zusammenhängender Block. Auf dieser Seite lernst du, wie das Element funktioniert, was du hineinschreiben darfst und welche typischen Stolperfallen es gibt.

Grundlagen

Stell dir <p> wie einen Absatz in einem Buch vor: Jeder Absatz beginnt auf einer neuen Zeile, und zwischen zwei Absätzen ist ein sichtbarer Abstand. Der Browser kümmert sich automatisch darum: Du brauchst kein extra CSS, um die Grundstruktur zu bekommen. Wichtig zu wissen: <p> ist ziemlich streng, was seinen Inhalt angeht. Du darfst darin nur Text und Inline-Elemente verwenden, aber keine Block-Elemente verschachteln.

• <p> ist ein Block-Element: Es beginnt auf einer neuen Zeile und nimmt die volle Breite ein
• Browser fügen standardmäßig Margins oben und unten hinzu (typisch ca. 16px), sodass Absätze automatisch Abstand zueinander haben
• Es darf keine anderen Block-Elemente enthalten: keine <div>, <h1>-<h6> oder andere <p>. Wenn der Browser ein Block-Element in einem <p> findet, schließt er das <p> automatisch davor
• Nur Inline-Elemente wie <strong>, <em>, <a> oder <span> und normaler Text sind als Inhalt erlaubt

Syntax

<p>Dies ist ein Absatz.</p>

Beispiele

Mehrere Absätze

So wie du in einem Buch mehrere Absätze schreibst, um Gedanken zu gliedern, nutzt du in HTML mehrere <p>-Elemente. Der Browser fügt automatisch Abstand zwischen ihnen ein:

<p>Dies ist der erste Absatz. Er enthält einleitenden Text.</p>
<p>Dies ist der zweite Absatz. Browser fügen automatisch
   Abstand zwischen den Absätzen ein.</p>
<p>Und dies ist der dritte Absatz.</p>

Absatz mit Inline-Elementen

Innerhalb eines Absatzes kannst du Text mit Inline-Elementen formatieren, zum Beispiel fett, kursiv oder als Link. Diese Elemente unterbrechen den Textfluss nicht, sondern werden einfach inline dargestellt:

<p>
  Dieses Wort ist <strong>fett</strong>,
  dieses <em>kursiv</em> und
  <a href="https://mitmario.dev">dies ist ein Link</a>.
</p>

Barrierefreiheit

Absätze spielen eine wichtige Rolle für die Textstruktur, die Screenreader kommunizieren. Screenreader-Nutzer können absatzweise durch den Text navigieren, was das Lesen langer Texte deutlich erleichtert. Jedes <p> signalisiert dem Screenreader: “Hier beginnt ein neuer Gedanke.”

Achte darauf, dass deine Absätze nicht zu lang werden. Das gilt für alle Nutzer, aber besonders für Menschen, die sich den Text vorlesen lassen. Kurze, klar strukturierte Absätze sind leichter zu verarbeiten als ein einziger riesiger Textblock.

Verwende keine leeren <p>-Elemente für Abstände. Screenreader lesen sie als “leerer Absatz” vor, was den Lesefluss stört. Nutze stattdessen CSS margin oder padding, um visuelle Abstände zu erzeugen.

Häufige Fehler

• Block-Elemente verschachteln: Wenn du <p><div>...</div></p> schreibst, passiert etwas Unerwartetes: Der Browser erkennt, dass ein <div> nicht in ein <p> gehört, und schließt das <p> automatisch vor dem <div>. Du bekommst also drei Elemente statt einem. Das kann dein Layout und CSS durcheinanderbringen, ohne dass du eine Fehlermeldung siehst.

• Leere Absätze für Abstände: <p>&nbsp;</p> oder leere <p>-Tags nur für Abstände zu verwenden, ist schlechte Praxis. Screenreader lesen das als “leerer Absatz” vor, was verwirrend ist. Wenn du Abstände brauchst, verwende CSS margin oder padding: Dafür ist CSS gemacht.

• Zeilenumbrüche statt Absätze: Verwende nicht mehrere <br>-Tags hintereinander, um Absätze zu simulieren. <br> ist für einzelne Zeilenumbrüche innerhalb eines Absatzes gedacht (z.B. in einer Adresse oder einem Gedicht). Für echte Absätze nutze immer separate <p>-Elemente.

Browser-Kompatibilität

Das p-Element wird von allen Browsern vollständig unterstützt. Es ist eines der ältesten HTML-Elemente und existiert seit der allerersten HTML-Version.

Email-Kompatibilität

Das p-Element wird in den meisten Email-Clients unterstützt, allerdings interpretiert Outlook Margins und Padding teilweise anders.

Verwandte Elemente