p

Übersicht

Das <p>-Element erzeugt einen Absatz, den zusammenhängenden Abschnitt eines längeren Textes. In HTML kann <p> jedoch für jedwede Art von zu gruppierendem, zusammenhängendem Inhalt genutzt werden, zum Beispiel Bilder oder Formularfelder.

<p> ist eines der am häufigsten benutzen HTML-Elemente.

<p> ist ein Blockelement; als solches wird es automatisch beendet, sobald ein anderes Blockelement vor seinem eigenen schließenden </p> erscheint.

Attribute

Dieses Element unterstützt lediglich die globalen Attribute.

Hinweis: Das align-Attribut sollte nicht mehr benutzt werden.

Beispiel

HTML

<p>
Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.
Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.
</p>

<p>
Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.
Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.
</p>

Ergebnis

Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.

Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.

Absätze gestalten

Zwei Absätze werden üblicherweise durch einen leeren Zwischenraum voneinander getrennt. CSS ermöglicht jedoch vielfältige Gestaltungsmöglichkeiten, etwa den Einzug der ersten Zeile:

HTML

<p>Separating paragraphs with blank lines is easiest
for readers to scan, but they can also be separated
by indenting their first lines. This is often used
to take up less space, such as to save paper in print.</p>

<p>Writing that is intended to be edited, such as school
papers and rough drafts, uses both blank lines and
indentation for separation. In finished works, combining
both is considered redundant and amateurish.</p>

<p>In very old writing, paragraphs were separated with a
special character: ¶, the <i>pilcrow</i>. Nowadays, this
is considered claustrophobic and hard to read.</p>

<p>How hard to read? See for yourself:
  <button data-toggle-text="Oh no! Switch back!">Use pilcrow for paragraphs</button>
</p>

CSS

p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
   text-indent: 0;
   display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}

JavaScript

document.querySelector('button').addEventListener('click', function (event) {
  document.querySelectorAll('p').forEach(function (paragraph) {
    paragraph.classList.toggle('pilcrow');
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});

Result

Barrierefreiheit

Das Aufteilen eines Dokuments in mehrere Absätze erleichtert das Verständnis des Inhalts für alle Nutzergruppen erheblich.

Bildschirmleseprogramme und ähnliche Hilfsmittel verfügen darüber hinaus über Bedienelemente, mit denen Absätze übersprungen werden können. Dies erlaubt blinden Nutzern das schnelle Überfliegen eines Textes, ähnlich wie die Leerzeilen sehenden Nutzern Orientierungspunkte bieten.

Leere <p>-Elemente und auch mehrere aufeinanderfolgende <br>-Zeilenumbrüche, deren einziger Nutzen das Vergrößeren des visuellen Abstandes ist, führen bei Bildschirmleseprogrammen oft zu einer verwirrenden Ausgabe: Es werden Absätze angekündigt, die eigentlich gar nicht vorhanden sind.

Auf die Dauer kann dieses Verhalten frustrierend sein. Abstände sollten deshalb ausschließlich mit CSS erzeugt werden. CSS ermöglicht zudem eine wesentlich feinere Kontrolle der Maße.

Siehe auch

Spezifikationen

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von '<p>' in dieser Spezifikation.
Lebender Standard Keine Änderung.
HTML5
Die Definition von '<p>' in dieser Spezifikation.
Empfehlung align-Attribut ist überflüssig.
HTML 4.01 Specification
Die Definition von '<p>' in dieser Spezifikation.
Empfehlung Erste Definition.

Browserkompatibilät

BCD tables only load in the browser