<p>: Das Absatzelement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <p>-Element von HTML repräsentiert einen Absatz. In visuellen Medien werden Absätze normalerweise als Textblöcke dargestellt, die durch Leerzeilen und/oder Einrückungen der ersten Zeile von benachbarten Blöcken getrennt sind. HTML-Absätze können jedoch jede strukturelle Gruppierung verwandter Inhalte sein, wie Bilder oder Formularfelder.

Absätze sind Block-Elemente und schließen sich bemerkenswerterweise automatisch, wenn ein anderes Block-Element vor dem schließenden </p>-Tag geparst wird. Siehe "Tag-Auslassung" unten.

Probieren Sie es aus

<p>
  Geckos are a group of usually small, usually nocturnal lizards. They are found
  on every continent except Antarctica.
</p>

<p>
  Some species live in houses where they hunt insects attracted by artificial
  light.
</p>
p {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #999;
}

Attribute

Dieses Element umfasst nur die globalen Attribute.

Hinweis: Das align-Attribut bei <p>-Tags ist veraltet und sollte nicht verwendet werden.

Barrierefreiheit

Das Aufteilen von Inhalten in Absätze trägt dazu bei, eine Seite zugänglicher zu machen. Bildschirmlesegeräte und andere unterstützende Technologien bieten Abkürzungen, mit denen Benutzer direkt zum nächsten oder vorherigen Absatz springen können, sodass sie Inhalte überfliegen können, ähnlich wie visuelle Benutzer durch Leerraum navigieren können.

Die Verwendung leerer <p>-Elemente, um Abstand zwischen Absätzen zu schaffen, ist problematisch für Personen, die mit Bildschirmlesetechnologie navigieren. Bildschirmleser können das Vorhandensein des Absatzes ankündigen, aber nicht die darin enthaltenen Inhalte, da keine vorhanden sind. Dies kann die Person, die den Bildschirmleser benutzt, verwirren und frustrieren.

Wenn zusätzlicher Raum gewünscht ist, verwenden Sie CSS-Eigenschaften wie margin, um den Effekt zu erzielen:

css
p {
  margin-bottom: 2em; /* increase white space after a paragraph */
}

Beispiele

HTML

html
<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>
<p>
  This is the second paragraph. This is the second paragraph. This is the second
  paragraph. This is the second paragraph.
</p>

Ergebnis

Stilierung von Absätzen

Standardmäßig trennen Browser Absätze mit einer einzelnen Leerzeile. Alternative Trennmethoden, wie die Einrückung der ersten Zeile, können mit CSS erreicht werden:

HTML

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

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

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

JavaScript

js
document.querySelector("button").addEventListener("click", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });

  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fluss-Inhalt, greifbarer Inhalt.
Zulässiger Inhalt Phrasierungs-Inhalt.
Tag-Auslassung Das öffnende Tag ist erforderlich. Das schließende Tag kann weggelassen werden, wenn das <p>-Element unmittelbar gefolgt wird von einem <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, h1, h2, h3, h4, h5, h6, <header>, <hgroup>, <hr>, <main>, <menu>, <nav>, <ol>, <pre>, <search>, <section>, <table>, <ul> oder einem anderen <p>-Element oder wenn es keine weiteren Inhalte im Elternelement gibt und das Elternelement kein <a>, <audio>, <del>, <ins>, <map>, <noscript> oder <video>-Element, oder ein autonomes benutzerdefiniertes Element ist.
Zulässige Eltern Jedes Element, das Fluss-Inhalt akzeptiert.
Implizite ARIA-Rolle paragraph
Zulässige ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLParagraphElement`](/de/docs/Web/API/HTMLParagraphElement)

Spezifikationen

Specification
HTML
# the-p-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch