Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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.

Abbreviations

Another fairly common element you'll meet when looking around the Web is <abbr> — this is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a title attribute.) Let's look at a couple of examples:

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

These will come out looking something like this (the expansion will appear in a tooltip when the term is hovered over):

We use HTML to structure our web documents.

I think Rev. Green did it in the kitchen with the chainsaw.

Note: There is another element, <acronym>, which basically does the same thing as <abbr>, and was intended specifically for acronyms rather than abbreviations. This however has fallen into disuse — it wasn't supported in browsers as well as <abbr>, and has such as similar function that it was considered pointless to have both. Just use <abbr> instead.

Active learning: marking up an abbreviation

For this simple active learning assignment, we'd like you to simply mark up an abbreviation. You can use our sample below, or replace it with one of your own. 

Marking up contact details

HTML has an element for marking up contact details — <address>. This simply wraps around your contact details, for example:

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

One thing to remember however is that the <address> element is meant for marking up the contact details of the person who wrote the HTML document, not any address. So the above would only be ok if Chris had written the document the markup appears on. Note that something like this would also be ok:

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

Superscript and subscript

You will occasionally need to use superscript and subscript when marking up items like dates, chemical formulae, and mathematical equations so they have the correct meaning. The <sup> and <sub> elements handle this job. For example:

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

The output of this code looks like so:

My birthday is on the 25th of May 2001.

Caffeine's chemical formula is C8H10N4O2.

If x2 is 9, x must equal 3 or -3.

Representing computer code

There are a number of elements available for marking up computer code using HTML:

  • <code>: For marking up generic pieces of computer code.
  • <pre>: For retaining whitespace (generally code blocks) — if you use indentation or excess whitespace inside your text, browsers will ignore it and you will not see it on your rendered page. If you wrap the text in <pre></pre> tags however, your whitespace will be rendered identically to how you see it in your text editor.
  • <var>: For specifically marking up variable names.
  • <kbd>: For marking up keyboard (and other types of) input entered into the computer.
  • <samp>: For marking up the output of a computer program.

Let's look at a few examples. You should try having a play with these (try grabbing a copy of our other-semantics.html sample file):

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

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <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>

The above code will look like so:

Marking up times and dates

HTML also provides the <time> element for marking up times and dates in a machine-readable format. For example:

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

Why is this useful? Well, there are many different ways that humans write down dates. The above date could be written as:

  • 20 January 2016
  • 20th January 2016
  • Jan 20 2016
  • 20/06/16
  • 06/20/16
  • The 20th of next month
  • 20e Janvier 2016
  • 2016年1月20日
  • And so on

But these different forms cannot be easily recognised by the computers — what if you wanted to automatically grab the dates of all events in a page and insert them into a calendar? The <time> element allows you to attach an unambiguous, machine-readable time/date for this purpose.

The basic example above just provides a simple machine readable date, but there are many other options that are possible, for example:

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>

Summary

That marks the end of our study of HTML text semantics. Bear in mind that what you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild, or at least might find interesting. To find way more HTML elements, you can take a look at our HTML element reference (the Inline text semantics section would be a great place to start.) In the next article we will look at the HTML elements you'd use to structure the different parts of an HTML document.

Schlagwörter des Dokuments und Mitwirkende

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