<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:
p {
margin-bottom: 2em; /* increase white space after a paragraph */
}
Beispiele
>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
<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", (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> |