Überschriften, Absätze und Texte

Überschriften, Absätze und Texte sind neben dem Layout der zentrale Bestandteil einer HTML-Seite. Hierfür gibt es in HTML verschiedene Elemente, welche für die Strukturierung oder auch für die Hervorhebung von Textstellen verwendet werden.

Zuerst sollten wir jedoch den Unterschied zwischen den sogenannten Block- und Inline-Elementen klären. Block-Elemente benötigen immer die vollständige Breite des Bereichs (bei unseren ersten Beispielen bedeutet dies, dass die Elemente immer die komplette Breite des Fensters benötigen). Dies kann natürlich mittels CSS verändert werden. Inline-Elemente benötigen hingegen von der Breite immer nur so viel Platz wie dessen Inhalt. Block-Elemente werden dadurch immer dann eingesetzt, wenn es um Blöcke, Bereiche oder Absätze geht. Inline-Elemente werden hingegen oft für Schriftformatierungen oder ähnliches verwendet. Dadurch, dass Block-Elemente standardmäßig die komplette Breite des Fensters einnehmen, könnte man sagen, dass Block-Elemente einen Zeilenumbruch erzeugen. Dies ist bei den Inline-Elementen natürlich nicht der Fall.

Alle Code-Beispiele stellen, sofern nicht anders angegeben, ab diesem Thema lediglich den Bereich zwischen den body-Tags dar.

Überschriften

Überschriften dienen dazu, Seiten und Abschnitte zu betiteln und zu unterteilen. Um Überschriften in HTML zu definieren, gibt es die zweiteiligen Elemente h1, h2, h3, h4, h5 und h6. Zwischen Start- und End-Tag wird die jeweilige Überschrift notiert. Die Elemente verfügen alle standardmäßig über unterschiedliche Schriftgrößen, wovon h1 die größte Schrift hat und h6 die kleinste. Die Größe kann und sollte mittels CSS verändert werden.

<h1>Überschrift h1</h1>
<h2>Überschrift h2</h2>
<h3>Überschrift h3</h3>
<h4>Überschrift h4</h4>
<h5>Überschrift h5</h5>
<h6>Überschrift h6</h6>

Neben der Größe werden die verschiedenen Überschriften-Elemente hauptsächlich zur Gliederung in verschiedene Ebenen eingesetzt. Dabei stellt h1 die oberste bzw. erste Ebene dar. Deshalb ist es gängig, dass h1 leidglich einmal pro Seite verwendet wird, da jedes Buch ja auch nur einen Titel hat. Ein Buch und somit auch eine Website kann jedoch mehrere Untertitel (h2), "Unter-Untertitel" (h3), etc. haben. Hier ein Beispiel für eine solche Gliederung:

<h1>Programme</h1>
<h2>Browser</h2>
<h3>Microsoft Internet Explorer</h3>
<h3>Mozilla Firefox</h3>
<h3>Google Chrome</h3>
<h2>E-Mail-Clients</h2>
<h3>Microsoft Outlook</h3>
<h3>Mozilla Thunderbird</h3>
<h2>FTP-Clients</h2>
<h3>FileZilla</h3>

Absätze

Absätze sind der zentrale Bestandteil, wenn es um Texte geht. Mit dem p-Element können Sie Absätze in HTML definieren. Das p-Element ist zweiteilig und der Text des Absatzes wird zwischen den Tags notiert. Im Beispiel wird Ihnen auffallen, dass zwischen den Absätzen mehr Abstand ist, als zwischen den einzelnen Zeilen. Auch dies kommt von den Voreinstellungen der Browser. Später können wir über CSS diese Abstände anpassen. Der Buchstabe p steht für paragraph.

<p>Absatz 1: ...</p>
<p>Absatz 2: ...</p>
<p>Absatz 3: ...</p>

Zeilenumbrüche

Um eine Zeile manuell umzubrechen, gibt es das leere Element br. br (Abkürzung für break) kann innerhalb von Absätzen aber auch außerhalb verwendet werden. Um in einem Text eine Leerzeile zu erzeugen, benötigen wir zwei br-Elemente, da wir mit einem br-Element lediglich einen Umbruch erzeugen.

<p>
	Hier steht Text ...
	<br /><br />
	Hier steht noch mehr Text ...
	<br />
	Und noch mehr Text ...
</p>

Schriftauszeichnungen

Als Schriftauszeichnung wird die Hervorhebung (fachsprachlich auch Auszeichnung) einzelner Teile eines Textes bezeichnet. Schriftauszeichnungen sind nützlich, da dadurch wichtige Informationen (z. B. Schlagwörter) in den „Vordergrund“ gerückt werden können (zumeist durch Fettdruck) und im Gegenzug dazu, jedoch auch unwichtige oder nebensächliche Informationen in den „Hintergrund“ gerückt werden können (z. B. durch kursiven Text). Die Verwendung von einfachen Schriftauszeichnungen ist komplett ohne CSS in reinem HTML realisierbar. Hervorhebungen von Textbestandteilen sollten zwar verwendet werden, jedoch sollte man damit auch sparsam umgehen. Ein Text, bei welchem die Hälfte oder mehr in fetter Schrift geschrieben ist, wirkt schnell aggressiv und unfreundlich.

Um auf Textbestandteile Schriftauszeichnungen mittels HTML anzuwenden, gibt es die zweiteiligen Elemente b, i, u und s. Zwischen dem jeweiligen Start- und End-Tag wird der zu hervorhebende Text notiert. Mit dem b-Element können Sie Texte fett hervorheben (Fettdruck) und mit dem i-Element können Sie kursiven Text erzeugen. Das u-Element versieht den Text mit einem Unterstrich (Linie unterhalb des Textes). Genutzt werden sollte das Element laut HTML5-Spezifikation, um (chinesische) Eigennamen oder falsch geschriebene Wörter hervorzuheben. Das u-Element wird daher selten verwendet, vor allem auch deshalb, da Benutzer einen Text mit Unterstrich zumeist als Link interpretieren. Mit dem Element s können wir einen Text durchstreichen. Die HTML5-Spezifikation beschreibt, dass dieses Element genutzt werden soll, um nicht mehr aktuelle Informationen (die aber nicht von der Seite entfernt werden) als „falsch“ bzw. „nicht mehr gültig“ zu markieren.

<b>fetter Text</b>
<br />
<i>kursiver Text</i>
<br />
<u>unterstrichener Text</u>
<br />
<s>durchgestrichener Text</s>

Präformatierter Text

Als präformatierter Text wird Text bezeichnet, welcher auf eine bestimmte Art und Weise vorformatiert ist. Bei einem präformatierten Text wird der Text im Browser so angezeigt wie dieser im Editor eingegeben wurde.

So ist Ihnen bestimmt schon aufgefallen, dass wenn Sie in Ihrem Editor innerhalb eines Textes einen Zeilenumbruch notieren, dieser im Browser nicht erscheint. Die Anzeige ist also so, als hätten wir keinen Zeilenumbruch in der Datei notiert. Dies ist vom Regelwerk von HTML so vorgeschrieben, weshalb wir für die Erzeugung eines Zeilenumbruches das br-Element benötigen. Aber warum ist das so? Stellen Sie sich vor, Sie schreiben einen längeren Text und notieren diesen in Ihrer HTML-Datei, die Zeilenumbrüche sollen aber vom Browser automatisch erstellt werden (z. B. auch abhängig von der Fenstergröße). In diesem Fall müssten Sie also Ihren ganzen Text in eine Zeile schreiben, was natürlich völlig unübersichtlich wäre.

Neben den Zeilenumbrüchen gibt es in HTML aber noch ein anderes Problem: Mehrere Leerzeichen oder Tabs werden immer nur als ein einziges Leerzeichen angezeigt. Auch dies ist von den HTML-Regeln festgelegt und hierfür gibt es ebenfalls einen Grund. Dabei beziehen wir uns nochmal auf unser vorheriges Beispiel. Nachdem wir nun eingesehen haben, dass es keinen Sinn macht, einen ganzen Text in eine Zeile zu schreiben, brechen wir unseren Text im Editor um. Unser p-Element, welches den Text enthält, ist jedoch nicht das Wurzelelement und so sind das Element und der Text dementsprechend um einige Tabs oder Leerzeichen eingerückt. Dies machen wir ja, wie bereits am Anfang des Tutorials erwähnt, um einen strukturierten Code zu haben. Diese Einrückung des Textes hätte jetzt jedoch negative Auswirkung, wenn es die genannte Regelung in HTML nicht geben würde, sodass ungewollt mehrere Leerzeichen oder sogar Tabs angezeigt werden würden.

Doch was hat dies nun mit präformatiertem Text zu tun? Für einige Zwecke (z. B. Logfiles oder Programmier-/Codeausschnitte) ist es ungünstig, wenn der komplette Text überarbeitet werden müsste, sodass die dort vorhandenen Leerzeichen und Zeilenumbrüche auch tatsächlich so angezeigt werden. Dies gilt vor allem dann, wenn dieser „besondere Text“ später mittels einer serverseitigen Sprache (wie PHP) dynamisch erstellt oder aus einer Datei gelesen werden soll. Deshalb gibt es in HTML die Elemente pre und code. Innerhalb dieser werden alle Inhalte so angezeigt wie sie tatsächlich sind. pre ist ein Block-Element und wird für mehrzeiligen Text verwendet. code wird dagegen für einzeiligen Text verwendet, weshalb es ein Inline-Element ist und somit in den Textfluss mit eingebunden werden kann. Werden innerhalb des code-Elements Zeilenumbrüche notiert, werden diese nicht angezeigt (siehe Beispiel). Anders ist dies beim pre-Element.

<pre>Ein Code mit dem pre-Element
   von HTML</pre>
<code>Ein Code mit dem code-Element
   von HTML</code>

Akronyme

Ein Akronym ist eine Form von Abkürzung, bei welcher die ersten Buchstaben der einzelnen Wörter zur Bildung der Abkürzung genutzt werden. Akronyme werden gerne in Texten genutzt, sodass diese nicht zu lange werden und auch einfacher zu lesen sind. Mit dem HTML-Element abbr können wir Akronyme markieren und die dazugehörige ausgeschriebene Schreibweise hinterlegen. Die Definition bzw. Bedeutung des Akronyms wird im title-Attribut des abbr-Elements angegeben. Browser zeigen die Bedeutung der Akronyme beim Darüberfahren mit der Maus an.

<p>Auf dieser Seite gibt es Tutorials zu <abbr title="HyperText Markup Language">HTML</abbr> und <abbr title="Cascading Style Sheet">CSS</abbr>.</p>

Zitate

Um Zitate in HTML einzubetten, gibt es die Elemente q, blockquote und cite. Das q-Element wird für einzeilige Zitate verwendet, weshalb es ein Inline-Element ist und somit in den Textfluss eingebaut werden kann. Das Element blockquote ist ein Block-Element und wird somit für komplexere oder mehrzeilige Zitate verwendet. Innerhalb des Elements können Absätze (p-Element), aber auch Überschriften (h1-h6) und andere Elemente notiert werden. Dabei ist es geläufig, das Zitat nicht direkt im blockquote-Element, sondern in einem p-Element, zu platzieren.

Sowohl das q-Element, als auch das blockquote-Element, verfügen über das cite-Attribut, in welchem die Referenz in Form einer URL zu dem Zitat angegeben werden kann. Dieses wird zwar nicht angezeigt, kann jedoch von Webcrawlern oder anderen computergesteuerten Systemen verwendet werden. Das cite-Element dient ähnlich wie das cite-Attribut zur Angabe der Referenz des Zitats oder allgemein gesagt des Werks (z. B. bei Verwendung mit einem Bild). Innerhalb des Elements kann ein Text aber auch eine URL (z. B. auch in Verbindung mit einem Link) notiert werden.

Browser zeigen ein Zitat mit dem q-Element normalerweise in doppelten Anführungszeichen an. blockquote-Elemente werden zumeist mit einem Abstand von 40px zur linken und rechten Seite angezeigt. Der Inhalt von cite-Elementen wird dagegen kursiv dargestellt.

Hier nun das Beispiel mit Verwendung eines q- und cite-Elements innerhalb eines kurzen Textes:

<p>Das Zitat <q>Dies ist ein kleiner Schritt für einen Menschen, aber ein gewaltiger Sprung für die Menschheit.</q> kommt von <cite>Neil Armstrong, Apollo 11</cite>.</p>

Und hier das zweite Beispiel, welches das blockquote-Element nutzt:

<blockquote>
	<p>Dies ist ein kleiner Schritt für einen Menschen, aber ein gewaltiger Sprung für die Menschheit.</p>
	<cite>- Neil Armstrong, Apollo 11</cite>
</blockquote>

Trennlinien

Um eine Trennlinie (horizontal) per HTML zu erstellen, gibt es das leere Element hr (horizontal rule). Das hr-Element ist ein Blockelement und wird zur Trennung von verschiedenen Inhalten genutzt, welche nichts miteinander zu tun haben.

<p>Hier steht Text ...</p>
<hr />
<p>Hier steht noch mehr Text ...</p>