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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
pChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung