<p>: Das Absatz-Element
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>
-HTML-Element repräsentiert einen Absatz. Absätze werden in visuellen Medien gewöhnlich als Textblöcke dargestellt, die durch Leerzeilen und/oder Einrückung der ersten Zeile von angrenzenden Blöcken getrennt sind. HTML-Absätze können jedoch jede strukturelle Gruppierung von verwandtem Inhalt sein, wie z. B. Bilder oder Formularfelder.
Absätze sind Block-Level-Elemente und werden insbesondere automatisch geschlossen, wenn ein anderes Block-Level-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 enthält 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 trägt dazu bei, eine Seite zugänglicher zu machen. Screenreader und andere unterstützende Technologien bieten Abkürzungen, um den Nutzern zu ermöglichen, zum nächsten oder vorherigen Absatz zu springen, sodass sie Inhalte überfliegen können, ähnlich wie visuelle Nutzer durch Leerraum navigieren.
Die Verwendung leerer <p>
-Elemente, um Platz zwischen Absätzen zu schaffen, ist problematisch für Personen, die mit Screenreader-Technologie navigieren. Screenreader können das Vorhandensein des Absatzes ankündigen, aber keinen enthaltenen Inhalt – da keiner vorhanden ist. Dies kann die Person, die den Screenreader verwendet, verwirren und frustrieren.
Wenn zusätzlicher Raum gewünscht ist, verwenden Sie CSS-Eigenschaften wie margin
, um den Effekt zu erzielen:
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
Formatierung von Absätzen
Standardmäßig trennen Browser Absätze mit einer einzigen Leerzeile. Alternative Trennmethoden, wie das Einrücken der ersten Zeile, 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 | Flussinhalt, greifbarer Inhalt. |
---|---|
Zulässiger Inhalt | Phrasierung von Inhalten. |
Tag-Auslassung |
Das Start-Tag ist erforderlich. Das End-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 weiteren <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.
|
Erlaubte Eltern | Jedes Element, das Flussinhalt akzeptiert. |
Implizite ARIA-Rolle | paragraph |
Zulässige ARIA-Rollen | Beliebig |
DOM-Schnittstelle | [`HTMLParagraphElement`](/de/docs/Web/API/HTMLParagraphElement) |
Spezifikationen
Specification |
---|
HTML # the-p-element |