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.
<p>Jujubes lemon drops brownie brownie …</p> <p>Chocolate bar halvah liquorice gummi bears.… </p> <p>Süßer Text von … </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.«
In dem abendlichen Garten<br> Wandelt des Alkaden Tochter;<br> Pauken- und Trommetenjubel<br> Klingt herunter von dem Schlosse.
In solchen Fällen kann anstelle des p-Elements auch ein pre-Elemente – vorformatierter Text – eingesetzt werden. Innerhalb von pre-Tags bricht der Text so um, wie er gesetzt wird, d.h. ein Zeilenumbruch im HTML-Code führt auch zu einem Zeilenumbruch in der Anzeige der Webseite.
