HTML p • Textabsatz

HTML p Tag: Absatzzeichen, Paragraf oder Pilcrow

HTML p kennzeichnet den Anfang eines Absatzes (paragraph) und erzeugt einen Zeilenumbruch und eine Absatzschaltung. Ein p-Element erzeugt das Äquivalent zum Absatz in Textverarbeitungsprogrammen wie Word, Pages und in Satzprogrammen wie Quark XPress.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Absatz / Paragraph

Absätze (paragraph oder Passus) bestehen meist aus mehreren Sätzen: Sie strukturieren den Text und halten Gedanken oder Themen zusammen. Ein neuer Absatz beginnt auf einer neuen Zeile und stellt eine kleine Pause, einen neuen Gedanken oder einen leichten Themenwechsel heraus. Der Fluss der Bilder und Texte im Dokument wird unterbrochen und auf der nächsten Zeile fortgesetzt.

HTML p ist ein Blockelement, aber innerhalb eines p-Elements dürfen nur Inline-Elemente wie strong, span und img verwendet werden. Blockelemente wie div, form oder table dürfen nicht innerhalb von p-Tags sitzen. In HTML5 muss das p-Element nicht geschlossen werden, wenn ein address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table oder ul folgt.

HTML p: font-size, font-family und margin

Der Inhalt von p-Tags wird – wenn keine CSS-Regeln vereinbart sind – von den grafischen Browsern in der Schriftgröße 1em (meistens 16 Pixel) in der Schrift Times New Roman gesetzt. Zeilenhöhe (meistens 18 Pixel) und Schriftfamilie (font-family) können ebenfalls nur über CSS geändert werden.

Jujubes lemon drops brownie brownie bear claw marshmallow sugar plum icing. Oat cake donut pudding halvah cookie soufflé cheesecake pie pie. Topping apple pie cheesecake.

Chocolate bar halvah liquorice gummi bears. Wafer cheesecake oat cake chupa chups lollipop biscuit. Cupcake halvah jelly sweet roll biscuit. Sugar plum danish pudding biscuit.

Lollipop pastry gummi bears apple pie chupa chups fruitcake macaroon. Marshmallow jelly marzipan lollipop jelly-o brownie.

Süßer Text von Cupcake Ipsum in Absätzen
<p>Jujubes lemon drops brownie brownie  …</p>
<p>Chocolate bar halvah liquorice gummi bears.… </p>
<p>Lollipop pastry gummi bears apple pie … </p>

Zeilenabstand in HTML p

Die Zeilenhöhe beträgt per Vorgabe 120% der Schriftgröße. HTML p-Elemente zeigen in allen Browsern einen deutlichen Abstand oder Durchschuss zwischen den Absätzen. Alle Browser weisen dem p-Element von Haus aus einen Abstand margin nach oben und unten zu. Die erste Zeile eines Absatzes weist einen höheren Durchschuss auf als die folgenden Zeilen des Absatzes und die letzte Zeile weist einen Abstand nach unten auf, so dass zwischen zwei Absätzen ein größerer Weißraum dargestellt wird. CSS margin regelt den Abstand zwischen zwei Absätzen und CSS line-height die Zeilenhöhe innerhalb eines Absatzes.

p { 
	line-height: 1.5;	// Zeilenhöhe innerhalb von p-Elementen
	margin-top: 0; 		// Abstand zwischen p-Elementen
	margin-bottom: 0; 
}

Wenn der Abstand zwischen p-Tags auf 0 gesetzt wird, kann der Beginn eines neuen Absatz z.B. über CSS text-indent herausgestellt werden. text-indent rückt jede erste Zeile eines Absatz ein. Eine weitere Technik zur optischen Trennung von Absätzen ist das HTML hr-Tag, eine schlichte Linie von 100% Breite, die ein Signal für einen leichten Themenwechsel darstellt.

Zeilenumbrüche in p-Elementen

Der Text in einem p-Element erstreckt sich immer über die gesamte Breite des Containers. Zeilenumbrüche im HTML-Markup innerhalb eines HTML p-Tags werden von den Browsern ignoriert. Ein HTML br-Tag erzwingt einen Zeilenumbruch ohne neuen Absatz – z.B. in Gedichten.

In dem abendlichen Garten
Wandelt des Alkaden Tochter;
Pauken- und Trommetenjubel
Klingt herunter von dem Schlosse.

»Lästig werden mir die Tänze
Und die süßen Schmeichelworte,
Und die Ritter, die so zierlich
Mich vergleichen mit der Sonne.«

Heinrich Heine, Donna Clara
In dem abendlichen Garten<br>
Wandelt des Alkaden Tochter;<br>
Pauken- und Trommetenjubel<br>
Klingt herunter von dem Schlosse.