Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<p> HTML-Absatzelement

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <p> HTML-Element stellt einen Absatz dar. Absätze werden in visuellen Medien normalerweise als Textblöcke dargestellt, die durch Leerzeilen und/oder Einrückung der ersten Zeile von angrenzenden Blöcken getrennt sind, aber HTML-Absätze können jede strukturelle Gruppierung von zusammengehörigem Inhalt sein, wie z.B. Bilder oder Formularfelder.

Absätze sind Block-Elemente und werden bemerkenswert automatisch geschlossen, wenn ein anderes Block-Element vor dem abschließenden </p>-Tag analysiert 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 #999999;
}

Attribute

Dieses Element umfasst nur die globalen Attribute.

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

Barrierefreiheit

Das Aufteilen von Inhalten in Absätze hilft, eine Seite barrierefreier zu machen. Screenreader und andere unterstützende Technologie bieten Abkürzungen, die es ihren Nutzern ermöglichen, zum nächsten oder vorherigen Absatz zu springen. Dadurch können sie Inhalte durchsuchen, ähnlich wie Leerzeichen es visuellen Nutzern ermöglichen, zwischen Inhalten zu springen.

Die Verwendung von leeren <p>-Elementen, um Platz zwischen Absätzen zu schaffen, ist problematisch für Menschen, die mit screenreader-gestützter Technologie navigieren. Screenreader könnten das Vorhandensein eines Absatzes ankündigen, aber keinen darin enthaltenen Inhalt — da keiner vorhanden ist. Dies kann die Person, die den Screenreader benutzt, verwirren und frustrieren.

Falls zusätzlicher Platz erwünscht ist, verwenden Sie CSS-Eigenschaften wie margin, um den Effekt zu erzeugen:

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

Absätze stylen

Standardmäßig trennen Browser Absätze mit einer einzigen Leerzeile. Alternative Trennmethoden, wie z.B. Erste-Zeile-Einrückungen, 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 Fließender Inhalt, fühlbarer Inhalt.
Zulässiger Inhalt Worterfassungsinhalt.
Tag-Auslassung Das Start-Tag ist erforderlich. Das End-Tag kann weggelassen werden, wenn das <p>-Element sofort 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 kein weiterer Inhalt im übergeordneten Element vorhanden ist und das übergeordnete Element kein <a>, <audio>, <del>, <ins>, <map>, <noscript> oder <video>-Element, oder ein autonomes benutzerdefiniertes Element ist.
Zulässige Eltern Jedes Element, das fließenden Inhalt akzeptiert.
Implizierte ARIA-Rolle Absatz
Zulässige ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLParagraphElement`](/de/docs/Web/API/HTMLParagraphElement)

Spezifikationen

Spezifikation
HTML
# the-p-element

Browser-Kompatibilität

Siehe auch