CSS, HTML und Javascript mit {stil}

HTML p • Textabsatz

HTML p Tag: Absatzzeichen oder Pilcrow

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

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-Tags 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-Tag 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-Tags: font-size, font-family und margin

Der Inhalt von p-Tags wird – wenn keine CSS-Regeln vereinbart sind – von den meisten grafischen Browsern in der Schriftgröße 1 em (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 in Absätzen: Cupcake Ipsum
<p>Jujubes lemon drops brownie brownie  …</p>
<p>Chocolate bar halvah liquorice gummi bears.… </p>
<p>Lollipop pastry gummi bears apple pie … </p>

HTML p-Tags zeigen in allen Browsern einen Leerraum oder Durchschuss zwischen den Absätzen. Alle Browser weisen dem p-Tag 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.

	p { margin-top: 0; margin-bottom: 0; }

Zeilenumbrüche in p-Tags

Der Text in einem p-Tag 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.
pilcrow