Es gibt viele weitere Elemente in HTML zum formatieren von Text, die wir nicht in unserem Artikel Einfache Textformatierung mit HTML abgedeckt haben. Die HTML-Elemente welche in diesem Artikel vorgestellt werden, werden nicht so oft benötigt. Es ist aber hilfreich diese zu kennen. Sie werden hier lernen wie man Zitate, Beschreibende Listen, Code und ähnliche Texte, sowie tiefer oder höher gestellte Zeichen ausgibt und noch mehr.

Vorwissen: Grundlegende HTML Kenntnisse, wie sie in den vorhergehenden Artikeln Lernen Sie HTML kennen und Einfache Textformatierung mit HTML abgedeckt werden.
Ziel: Kennenlernen von weniger bekannten HTML-Elementen, um Text anspruchsvoll zu formatieren.

<dl> - Beschreibungslisten

In Einführung in Textformatierung mit HTML haben wir Ihnen gezeigt, wie man einfache geordnete und ungeordnete Listen erstellt. Es gibt aber noch einen dritten Typ Listen, der nicht so oft Verwendung findet. Es handelt sich um Beschreibungslisten (engl.: "description lists"). Mit dem dl-Element lässt sich eine Liste von Begriffen (list term) lt erstellen, welchen eine Beschreibung (engl. "description") dd hinzugefügt wird. Diese Art von Liste ist z.B. in Wörterbüchern zu finden, wo es zu einem bestimmten Begriff eine längere Beschreibung gibt. Lassen Sie uns in einem Beispiel anschauen, wie so eine beschreibende Liste genau aufgebaut ist. Hier haben wir eine noch unformatierte Liste, welche wir in eine Beschreibungsliste umwandeln wollen:

Innerer Monolog
Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
Monolog
Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
Beiseitesprechen
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.

Beschreibungslisten werden vom <dl>;-Element eingeschlossen. Jeder Begriff ist in ein <dt>-Element eingebettet, während die dazugehörige Beschreibung danach in einem <dd>-Element hinzugefügt wird. Das sieht dann wie folgt aus:

<dl>
  <dt>Innerer Monolog</dt>
  <dd>Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.</dd>
  <dt>Monolog</dt>
  <dd>Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.</dd>
  <dt>Beiseitesprechen</dt>
  <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd>
</dl>

Browser stellen die Beschreibungen zu den Begriffen in den Beschreibungslisten normalerweise eingerückt dar. Hier auf MDN werden die Begriffe zusätzlich noch fett hervorgehoben.

Innerer Monolog
Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
Monolog
Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
Beiseitesprechen
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.

Es ist möglich mehrere Beschreibungen zu einem einzigen Begriff anzugeben:

Beiseitesprechen
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters.
Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.

Aktives Lernen: Eine Beschreibungsliste erstellen

Jetzt sind Sie dran: erstellen Sie eine Beschreibungsliste. Fügen Sie zu dem Text im Input-Feld unten die entsprechenden HTML-Elemente ein, so wie Sie es gerade gelernt haben. Im Output-Feld können Sie sehen, wie das Ergebnis im Browser angezeigt wird.

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

Zitate

Mit HTML lassen sich auch Zitate als solche Kennzeichnen. Sie können entweder Blockzitate verwenden oder aber im Fließtext direkt Zitate einbinden.

Hinweis: Zitat kann ins Englische sowohl als "quote" als auch als "citation" übersetzt werden. Beide englischen Wörter werden in HTML parallel genutzt, als "quote" für blockquote und q und die Abkürzung für "citation" cite.

<blockquote> - Blockzitate

Um ein Blockzitat (engl.: "blockquote") zu erstellen benutzen Sie das <blockquote>-Element. Damit können Sie auf Blockebene ein Zitat erstellen, welches z.B. einen ganzen Absatz, eine Liste oder ähnliches enthält. Sie können mit einer URL auf die Quelle des Zitates verlinken, nutzen Sie dafür das cite-Attribut. Als Beispiel zeigen wir ein Blockzitat von der MDN-Seite über das <blockquote>-Element:

<p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>

Um dies in ein Blockzitat zu verwandeln, machen wir einfach folgendes:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>
</blockquote>

Browsers werden ein Blockzitat standardmäßig einrücken, um es als Zitat zu kennezichnen. Hier auf MDN macht es das auch, aber der Stil wurde noch etwas mehr verändert:

Das HTML <blockquote> Element (oder HTML Block Quotation Element) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.

<q> - Inline Zitate

Inline Zitate (Zitat = engl.: "quote") funktionieren ganz ähnlich. Wir benutzen das <q>-Element, um diese zu kennzeichnen. Unser Beispiel unten enthält ein Zitat von der <q>-Seite:

<p>Das Zitat-Element — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"> indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.</q></p>

Browser werden ein Zitat als normalen Text, welcher in Anführungszeichen eingepackt ist, anzeigen:

Das Zitat-Element — <q>indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.

<cite> - Quellenangabe

Der Inhalt des cite-Attributs scheint hilfreich zu sein, leider ist es aber so das Browser, Bildschirmlesegeräte und dergleichen nicht viel damit machen können. Es gibt keinen Weg den Inhalt des cite-Attributs anzuzeigen, ohne eine eigene Lösung mittels JavaScript oder CSS zu schreiben. Wenn Sie die Quelle für den Leser zugägnlich machen wollen, dann benutzen Sie besser das <cite>-Element. Eigentlich sollte darin der Name der zitierten Quelle stehen - also der Name des Buches oder der Person - aber es gibt keinen Grund warum man nicht einen Link hier einfügen kann. Das sieht dann so aus:

<p>Auf der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote-Seite</cite></a> steht:
</p>

<blockquote cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote">
  <p>Das <strong>HTML <code>&lt;blockquote&gt;</code>-Element</strong> (oder <em>HTML Block
  Quotation Element</em>) indiziert, dass es sich bei dem eingeschlossenen Text um ein erweitertes Blockzitat handelt.</p>
</blockquote>

<p>Das <code>&lt;q&gt;</code>-Element — ist <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.
Das <code>&lt;q&gt;</code>-Element -- <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">
<cite>MDN q Seite</cite></a>.</p>

Die cite-Elemente werden standardmäßig in kursiver Schrift angezeigt. Sie können diesen Code auch auf GitHub als quotations.html Beispiel anschauen.

Aktives lernen: Wer hat das gesagt?

Es ist Zeit für eine weitere Übung! Bitte lösen Sie die folgenden Aufgaben:

  1. Ändern Sie den mittleren Absatz in ein Blockzitat, weches ein cite-Attribut besitzt.
  2. Ändern Sie einen Teil des dritten Absatzes in ein Inline Zitat, welches ebenfalls ein cite-Attribut besitzt.
  3. Fügen Sie jedem Link ein <cite>-Element hinzu.

Suchen Sie selbst online nach den richtigen Quellen für diese Zitate.

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

<abbr> - Abkürzungen

Ein weiteres Element, welches man öfters auf Webseiten findet ist <abbr>. Es wird genutzt, um Abkürzungen zu kennzeichnen und die volle Schreibweise der Abkürzung zur Verfügung zu stellen. Die volle Schreibweise wird in dem Element als title-Attribut angegeben. Hier ein paar Beispiele:

<p>Wir benutzen <abbr title="Hypertext Markup Language">HTML</abbr>, um ein Webdokument zu strukturieren.</p>

<p>Ich denke <abbr title="Doktor">Dr.</abbr> Green war in der Küche mit der Kettensäge.</p>

Dies wird wie folgt im Browser ausgegeben (der volle Text der Abkürzungen wird angezeigt, wenn der Mauszeiger darüber gefahren wird):

Wir nutzen HTML, um ein Webdokument zu strukturieren.

Ich denke Dr. Green war in der Küche mit der Kettensäge.

Hinweis: Es gibt ein weiteres Element, <acronym>, welches das selbe tut wie <abbr>, nur das es Acronyme kennzeichnen sollte. Es wird aber kaum genutzt und von Browsern wird es nicht so gut unterstüzt. Es ist also besser nur noch <abbr> zu nutzen.

Aktives lernen: Eine Abkürzung kennzeichnen

In dieser kleinen Lernübung, möchten wir, das Sie eine Abkürzung als solche Kennzeichnen. Sie können das Beispiel unten benutzen oder es durch ein eigenes ersetzen.

Kontaktdaten markieren

HTML hat ein Element, um Kontaktdaten zu markieren — <address>. Beispiel:

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

Eine Sache die man sich merken sollte ist, dass das <address>-Element dafür gedacht ist, die Kontaktdaten der Person zu markieren, welche den HTML-Code geschrieben hat, nicht irgendeine Adresse. Das obige Beispiel wäre nur ok, wenn Chris tatsächlich das Dokument geschrieben hat, in dem die Adresse zu finden ist. Das folgende wäre aber auch in Ordnung:

<address>
  <p>Webseite erstellt von <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

Hochstellen und tiefstellen von Text

Manchmal brauchen sie hochgestellten oder tiefgestellten Text. Für hochgestellten Text (engl.: superscript) gibt es das HTML-Element <sup>. Für tiefergestellten Text (engl.: subscript) gibt es das Element <sub>. Beispiel:

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Die chemische Formel von Koffein ist C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>Wenn x<sup>2</sup> gleich 9 ist, dann muss x gleich 3 oder -3 sein.</p>

Der Code wird wie folgt gerendert:

My birthday is on the 25th of May 2001.

Die chemische Formel von Koffein ist C8H10N4O2.

Wenn x2 gleich 9 ist, dann muss x gleich 3 oder -3 sein.

Computercode darstellen

Es gibt ein paar Elemente mit denen man Computercode darstellen kann:

  • <code>: Um normalen Computercode darzustellen.
  • <pre>: Um Leerzeichen mit darzustellen, welche im Code genutzt werden, um Codeblöcke voneinander abzugrenzen. Normalerweise würde der Browser mehr als 1 Leerzeichen ignorieren und zu einem einzigen zusammen fassen, wenn der Text in <pre></pre> Tags eingepackt ist, dann bleiben die Leerzeichen erhalten.
  • <var>: Um Variabelnamen zu markieren.
  • <kbd>: Um Tastatureingaben darzustellen.
  • <samp>: Um das Ergebnis eines Computerprogramms zu markieren.

Schauen wir uns ein paar Beispiele an. Hiermit können Sie ein wenig herum experimentieren (sie können auch diese Kopie davon herunterladen other-semantics.html):

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Au, hör auf mich zu drücken!!');
}</code></pre>

<p>Sie sollten nicht zu repräsentative Elemente benutzen, wie <code>&lt;font&gt;</code> und <code>&lt;center&gt;</code>.</p>

<p>In dem obigen JavaScript Beispiel, repräsentiert <var>para</var> ein p-Element.</p>


<p>Markieren Sie den ganzen Text mit <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

Der obige Code sollte im Browser folgendermaßen aussehen:

Zeit und Datum markieren

HTML stellt auch das <time> zur Verfügung, um Zeit und Datum so darzustellen, das auch Computer diese lesen können. Beispiel:

<time datetime="2016-01-20">20 Januar 2016</time>

Wieso ist das nützlich? Deswegen, weil Menschen auf viele verschiedene Weisen ein Datum wiedergeben. Das obige Datum könnte auch wie folgt geschrieben sein:

  • 20 Januar 2016
  • 20th Januar 2016
  • Jan 20 2016
  • 20/06/16
  • 06/20/16
  • The 20th of next month
  • 20e Janvier 2016
  • 2016年1月20日
  • Und so weiter

Ein Computer kann nicht so einfach erkennen, das immer das selber Datum gemeint ist. Wenn man also automatisch alle Datumsangaben von einer Webseite erfassen möchte, um diese zum Beispiel in einem Kalender zu nutzen, dann braucht man eine einheiltiche Schreibweise für den Computer. Mit dem <time>-Element können Sie an eine beliebige Datumsschreibweise, eine einfache, für den Computer lesbare Form anhängen.

Das grundlegende Beispiel oben zeigt ein einfaches, vom Computer lesbares Datum. Aber es gibt mehr verschiedene Optionen, zum Beispiel:

<!-- Jahr-Monat-Tag -->
<time datetime="2016-01-20">20 Januar 2016</time>
<!-- Nur Jahr und Monat -->
<time datetime="2016-01">January 2016</time>
<!-- Nur Monat und Tag -->
<time datetime="01-20">20 January</time>
<!-- Nur die Zeit, Stunden:Minuten -->
<time datetime="19:30">19:30</time>
<!-- Man kann auch Sekunden und Millisekunden angeben! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Datum und Uhrzeit -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Datum und Uhrzeit mit Zeitzone -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Januar 2016 ist 8.30pm in Frankreich</time>
<!-- Eine bestimmte Wochennummer angeben-->
<time datetime="2016-W04">Die vierte Woche im Jahr 2016</time>

Zusammenfassung

Dies ist alles, was Sie über Textstrukturierung in HTML wissen müssen. Es gibt ntürlich noch mehr HTML-Elemente für die Darstellung und Strukturierung von Texten, aber die gebräuchlisten haben wir nun in diesem Kurs abgedeckt. Falls Sie dennoch daran interessiert sind wirklich alle Elemente zur Textgestlaltung kennen zu lernen, dann schauen Sie in unserer HTML-Element Referenz nach, denn dort sind alle HTML-Elemente aufgelistet.
Im nächsten Artikel geht es darum, Struktur in unser ganzes HTML-Dokument zu bringen, wie man verschiedene Bereiche einer Webseite bestimmt und diese ausrichtet. Lesen Sie weiter!

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Shidigital
 Zuletzt aktualisiert von: Shidigital,