---
title: p
slug: Web/HTML/Element/p
tags:
  - HTML
  - HTML Elemente
  - HTML Referenz
translation_of: Web/HTML/Element/p
---
<h2 id="Übersicht">Übersicht</h2>

<p>Das <strong>&lt;p&gt;</strong>-Element erzeugt einen Absatz, den zusammenhängenden Abschnitt eines längeren Textes. In HTML kann <code>&lt;p&gt;</code> jedoch für jedwede Art von zu gruppierendem, zusammenhängendem Inhalt genutzt werden, zum Beispiel Bilder oder Formularfelder.</p>

<p><code>&lt;p&gt;</code> ist eines der am häufigsten benutzen HTML-Elemente.</p>

<p>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</p>

<p><code>&lt;p&gt;</code> ist ein <a href="/en-US/docs/Web/HTML/Block-level_elements">Blockelement</a>; als solches wird es automatisch beendet, sobald ein anderes Blockelement vor seinem eigenen schließenden &lt;/p&gt; erscheint.</p>

<h2 id="Attribute">Attribute</h2>

<p>Dieses Element unterstützt lediglich die <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</p>

<div class="note">
<p><strong>Hinweis:</strong> Das <code>align</code>-Attribut sollte nicht mehr benutzt werden.</p>
</div>

<h2 id="Beispiel">Beispiel</h2>

<h3 id="HTML">HTML</h3>

<pre>&lt;p&gt;
Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.
Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.
&lt;/p&gt;

&lt;p&gt;
Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.
Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.
&lt;/p&gt;
</pre>

<h3 id="Ergebnis">Ergebnis</h3>

<p>Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.</p>

<p>Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.</p>

<h2 id="Absätze_gestalten">Absätze gestalten</h2>

<p>Zwei Absätze werden üblicherweise durch einen leeren Zwischenraum voneinander getrennt. {{glossary("CSS")}} ermöglicht jedoch vielfältige Gestaltungsmöglichkeiten, etwa den Einzug der ersten Zeile:</p>

<h3 id="HTML_2">HTML</h3>

<pre class="brush: html">&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;In very old writing, paragraphs were separated with a
special character: ¶, the &lt;i&gt;pilcrow&lt;/i&gt;. Nowadays, this
is considered claustrophobic and hard to read.&lt;/p&gt;

&lt;p&gt;How hard to read? See for yourself:
  &lt;button data-toggle-text="Oh no! Switch back!"&gt;Use pilcrow for paragraphs&lt;/button&gt;
&lt;/p&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p {
  margin: 0;
  text-indent: 3ch;
}

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

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) {
  document.querySelectorAll('p').forEach(function (paragraph) {
    paragraph.classList.toggle('pilcrow');
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample('Styling_paragraphs')}}</p>

<h2 id="Barrierefreiheit">Barrierefreiheit</h2>

<p>Das Aufteilen eines Dokuments in mehrere Absätze erleichtert das Verständnis des Inhalts für alle Nutzergruppen erheblich.</p>

<p>Bildschirmleseprogramme und ähnliche Hilfsmittel verfügen darüber hinaus über Bedienelemente, mit denen Absätze übersprungen werden können. Dies erlaubt blinden Nutzern das schnelle Überfliegen eines Textes, ähnlich wie die Leerzeilen sehenden Nutzern Orientierungspunkte bieten.</p>

<p>Leere <code>&lt;p&gt;</code>-Elemente und auch mehrere aufeinanderfolgende <code>&lt;br&gt;</code>-Zeilenumbrüche, deren einziger Nutzen das Vergrößeren des visuellen Abstandes ist, führen bei Bildschirmleseprogrammen oft zu einer verwirrenden Ausgabe: Es werden Absätze angekündigt, die eigentlich gar nicht vorhanden sind.</p>

<p>Auf die Dauer kann dieses Verhalten frustrierend sein. Abstände sollten deshalb ausschließlich mit {{glossary("CSS")}} erzeugt werden. CSS ermöglicht zudem eine wesentlich feinere Kontrolle der Maße.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{HTMLElement("hr")}}</li>
 <li>{{HTMLElement("br")}}</li>
</ul>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Keine Änderung.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td><code>align</code>-Attribut ist überflüssig.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Erste Definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilät">Browserkompatibilät</h2>



<p>{{Compat("html.elements.p")}}</p>