<p> HTML-Absatzelement - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<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.

In diesem Artikel

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>

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 Zulässiger Inhalt Tag-Auslassung Zulässige Eltern Implizierte ARIA-Rolle Zulässige ARIA-Rollen DOM-Schnittstelle

Fließender Inhalt, fühlbarer Inhalt.

Worterfassungsinhalt.

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.

Jedes Element, das fließenden Inhalt akzeptiert.

Absatz

Beliebig

[`HTMLParagraphElement`](/de/docs/Web/API/HTMLParagraphElement)

<hr>
<br>

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<p> HTML-Absatzelement

In diesem Artikel

Probieren Sie es aus

Attribute

Barrierefreiheit

Beispiele

HTML

Ergebnis

Absätze stylen

HTML

CSS

JavaScript

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN