path: root/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html

---
title: Fortgeschrittene Textformatierung
slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
tags:
  - Abkürzungen
  - Beginner
  - Beschreibungslisten
  - Guide
  - HTML
  - Lernen
  - Textformatierung
  - Zitate
translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
original_slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">Es gibt viele weitere Elemente in HTML zum formatieren von Text, die wir nicht in unserem Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> 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.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorwissen:</th>
   <td>Grundlegende HTML Kenntnisse, wie sie in den vorhergehenden Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> abgedeckt werden.</td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>Kennenlernen von weniger bekannten HTML-Elementen, um Text anspruchsvoll zu formatieren.</td>
  </tr>
 </tbody>
</table>

<h2 id="&lt;dl>_-_Beschreibungslisten">&lt;dl&gt; - Beschreibungslisten</h2>

<p>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 <strong>Beschreibungslisten</strong> (engl.: "<strong>d</strong>escription <strong>l</strong>ists"). Mit dem <code>dl</code>-Element lässt sich eine Liste von Begriffen (<strong>l</strong>ist <strong>t</strong>erm) <code>lt</code> erstellen, welchen eine Beschreibung (engl. "<strong>d</strong>escription") <code>dd</code> 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:</p>

<pre>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.</pre>

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

<pre class="brush: html">&lt;dl&gt;
  &lt;dt&gt;Innerer Monolog&lt;/dt&gt;
  &lt;dd&gt;Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.&lt;/dd&gt;
  &lt;dt&gt;Monolog&lt;/dt&gt;
  &lt;dd&gt;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.&lt;/dd&gt;
  &lt;dt&gt;Beiseitesprechen&lt;/dt&gt;
  &lt;dd&gt;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.&lt;/dd&gt;
&lt;/dl&gt;</pre>

<p>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.</p>

<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>

<p>Es ist möglich mehrere Beschreibungen zu einem einzigen Begriff anzugeben:</p>

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

<h3 id="Aktives_Lernen_Eine_Beschreibungsliste_erstellen">Aktives Lernen: Eine Beschreibungsliste erstellen</h3>

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

<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-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 <em>Lösung anzeigen</em> klicken.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;Bacon
Das was die Welt im Inneren zusammen hält.
Eier
Das was den Kuchen im Inneren zusammen hält.
Kaffee
Das Getränk welches die Welt am laufen hält.
Eine bräunliche Farbe, desto dunkler umso stärker.
&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '&lt;dl&gt;\n  &lt;dt&gt;Bacon&lt;/dt&gt;\n  &lt;dd&gt;Das was die Welt im Inneren zusammen hält.&lt;/dd&gt;\n  &lt;dt&gt;Eier&lt;/dt&gt;\n  &lt;dd&gt;Das was den Kuchen im Inneren zusammen hält.&lt;/dd&gt;\n  &lt;dt&gt;Kaffee&lt;/dt&gt;\n  &lt;dd&gt;Das Getränk welches die Welt am laufen hält.
&lt;/dd&gt;\n  &lt;dd&gt;Eine bräunliche Farbe, desto dunkler umso stärker.&lt;/dd&gt;\n&lt;/dl&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_1', 700, 500) }}</p>

<h2 id="Zitate">Zitate</h2>

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

<div class="note">
<p><strong>Hinweis:</strong> 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 <code>blockquote</code> und <code>q</code> und die Abkürzung für "citation" <code>cite</code>.</p>
</div>

<h3 id="&lt;blockquote>_-_Blockzitate">&lt;blockquote&gt; - Blockzitate</h3>

<p>Um ein Blockzitat (engl.: "blockquote") zu erstellen benutzen Sie das {{htmlelement("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 {{htmlattrxref("cite","blockquote")}}-Attribut. Als Beispiel zeigen wir ein Blockzitat von der MDN-Seite über das <code>&lt;blockquote&gt;</code>-Element:</p>

<pre class="brush: html">&lt;p&gt;Das &lt;strong&gt;HTML &lt;code&gt;&lt;blockquote&gt;&lt;/code&gt; Element&lt;/strong&gt; (oder &lt;em&gt;HTML Block Quotation Element&lt;/em&gt;) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.&lt;/p&gt;</pre>

<p>Um dies in ein Blockzitat zu verwandeln, machen wir einfach folgendes:</p>

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

<p>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:</p>

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

<h3 id="&lt;q>_-_Inline_Zitate">&lt;q&gt; - Inline Zitate</h3>

<p>Inline Zitate (Zitat = engl.: "<strong>q</strong>uote") funktionieren ganz ähnlich. Wir benutzen das {{htmlelement("q")}}-Element, um diese zu kennzeichnen. Unser Beispiel unten enthält ein Zitat von der <code>&lt;q&gt;</code>-Seite:</p>

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

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

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

<h3 id="&lt;cite>_-_Quellenangabe">&lt;cite&gt; - Quellenangabe</h3>

<p>Der Inhalt des {{htmlattrxref("cite","blockquote")}}-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 <code>cite</code>-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 {{htmlelement("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>

<pre class="brush: html">&lt;p&gt;Auf der &lt;a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote"&gt;
&lt;cite&gt;MDN blockquote-Seite&lt;/cite&gt;&lt;/a&gt; steht:
&lt;/p&gt;

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

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

<p>Die <code>cite</code>-Elemente werden standardmäßig in kursiver Schrift angezeigt. Sie können diesen Code auch auf GitHub als <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> Beispiel anschauen.</p>

<h3 id="Aktives_lernen_Wer_hat_das_gesagt">Aktives lernen: Wer hat das gesagt?</h3>

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

<ol>
 <li>Ändern Sie den mittleren Absatz in ein Blockzitat, weches ein <code>cite</code>-Attribut besitzt.</li>
 <li>Ändern Sie einen Teil des dritten Absatzes in ein Inline Zitat, welches ebenfalls ein <code>cite</code>-Attribut besitzt.</li>
 <li>Fügen Sie jedem Link ein <code>&lt;cite&gt;</code>-Element hinzu.</li>
</ol>

<p>Suchen Sie selbst online nach den richtigen Quellen für diese Zitate.</p>

<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-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 <em>Lösung anzeigen</em> klicken.</p>

<div class="hidden">
<h6 id="Playable_code_2">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&lt;p&gt;Hallo und willkommen zu meiner Motivations-Webseite. Wie Konfuzius einmal sagte:&lt;/p&gt;

&lt;p&gt;It does not matter how slowly you go as long as you do not stop. Auf deutsch: Es ist egal wie langsam du gehst, so lange du nicht anhältst.&lt;/p&gt;

&lt;p&gt;Ich mag auch das Konzept des positiven Denkens und versuche negative Selbstkritik zu vermeiden (wie im Artikel "The Need To Eliminate Negative Self Talk" in Affirmations for Positive Thinking erklärt wird).&lt;/p&gt;&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '&lt;p&gt;Hallo und willkommen zu meiner Motivations-Webseite. Wie &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Konfuzius&lt;/cite&gt;&lt;/a&gt; einmal gesagt hat:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n  &lt;p&gt;It does not matter how slowly you go as long as you do not stop. Auf deutsch: Es ist egal wie langsam du gehst, so lange du nicht anhältst.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;Ich mag auch das Konzept des positiven Denkens und versuche negative Selbstkritik zu vermeiden (wie im Artikel &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt;The Need To Eliminate Negative Self Talk&lt;/q&gt; in &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt; erklärt wird).&lt;/p&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>

<h2 id="&lt;abbr>_-_Abkürzungen">&lt;abbr&gt; - Abkürzungen</h2>

<p>Ein weiteres Element, welches man öfters auf Webseiten findet ist {{htmlelement("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 {{htmlattrxref("title")}}-Attribut angegeben. Hier ein paar Beispiele:</p>

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

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

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

<p>Wir nutzen <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>

<div class="note">
<p><strong>Hinweis</strong>: Es gibt ein weiteres Element, {{htmlelement("acronym")}}, welches das selbe tut wie <code>&lt;abbr&gt;</code>, 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 <code>&lt;abbr&gt;</code> zu nutzen.</p>
</div>

<h3 id="Aktives_lernen_Eine_Abkürzung_kennzeichnen">Aktives lernen: Eine Abkürzung kennzeichnen</h3>

<p>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.</p>

<div class="hidden">
<h6 id="Playable_code_3">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&lt;p&gt;Die NASA bringt uns den Sternen näher.&lt;/p&gt;&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 5em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '&lt;p&gt;&lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; bringt uns den Sternen näher.&lt;/p&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p>

<h2 id="Kontaktdaten_markieren">Kontaktdaten markieren</h2>

<p>HTML hat ein Element, um Kontaktdaten zu markieren — {{htmlelement("address")}}. Beispiel:</p>

<pre class="brush: html">&lt;address&gt;
  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
&lt;/address&gt;</pre>

<p>Eine Sache die man sich merken sollte ist, dass das &lt;address&gt;-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:</p>

<pre class="brush: html">&lt;address&gt;
  &lt;p&gt;Webseite erstellt von &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
&lt;/address&gt;</pre>

<h2 id="Hochstellen_und_tiefstellen_von_Text">Hochstellen und tiefstellen von Text</h2>

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

<pre class="brush: html">&lt;p&gt;My birthday is on the 25&lt;sup&gt;th&lt;/sup&gt; of May 2001.&lt;/p&gt;
&lt;p&gt;Die chemische Formel von Koffein ist C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
&lt;p&gt;Wenn x&lt;sup&gt;2&lt;/sup&gt; gleich 9 ist, dann muss x gleich 3 oder -3 sein.&lt;/p&gt;</pre>

<p>Der Code wird wie folgt gerendert:</p>

<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>

<h2 id="Computercode_darstellen">Computercode darstellen</h2>

<p>Es gibt ein paar Elemente mit denen man Computercode darstellen kann:</p>

<ul>
 <li>{{htmlelement("code")}}: Um normalen Computercode darzustellen.</li>
 <li>{{htmlelement("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 <code>&lt;pre&gt;&lt;/pre&gt;</code> Tags eingepackt ist, dann bleiben die Leerzeichen erhalten.</li>
 <li>{{htmlelement("var")}}: Um Variabelnamen zu markieren.</li>
 <li>{{htmlelement("kbd")}}: Um Tastatureingaben darzustellen.</li>
 <li>{{htmlelement("samp")}}: Um das Ergebnis eines Computerprogramms zu markieren.</li>
</ul>

<p>Schauen wir uns ein paar Beispiele an. Hiermit können Sie ein wenig herum experimentieren (sie können auch diese Kopie davon herunterladen <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p>

<pre class="brush: html">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');

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

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

&lt;p&gt;In dem obigen JavaScript Beispiel, repräsentiert &lt;var&gt;para&lt;/var&gt; ein p-Element.&lt;/p&gt;


&lt;p&gt;Markieren Sie den ganzen Text mit &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;

&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
&lt;samp&gt;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&lt;/samp&gt;&lt;/pre&gt;</pre>

<p>Der obige Code sollte im Browser folgendermaßen aussehen:</p>

<p>{{ EmbedLiveSample('Computercode_darstellen','100%',300) }}</p>

<h2 id="Zeit_und_Datum_markieren">Zeit und Datum markieren</h2>

<p>HTML stellt auch das {{htmlelement("time")}} zur Verfügung, um Zeit und Datum so darzustellen, das auch Computer diese lesen können. Beispiel:</p>

<pre class="brush: html">&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 Januar 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>

<p>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:</p>

<ul>
 <li>20 Januar 2016</li>
 <li>20th Januar 2016</li>
 <li>Jan 20 2016</li>
 <li>20/06/16</li>
 <li>06/20/16</li>
 <li>The 20th of next month</li>
 <li><span lang="fr">20e Janvier 2016</span></li>
 <li><span lang="ja">2016年1月20日</span></li>
 <li>Und so weiter</li>
</ul>

<p>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 {{htmlelement("time")}}-Element können Sie an eine beliebige Datumsschreibweise, eine einfache, für den Computer lesbare Form anhängen.</p>

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

<pre class="brush: html">&lt;!-- Jahr-Monat-Tag --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 Januar 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Nur Jahr und Monat --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>&gt;January 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Nur Monat und Tag --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>&gt;20 January&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Nur die Zeit, Stunden:Minuten --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>&gt;19:30&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Man kann auch Sekunden und Millisekunden angeben! --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>&gt;19:30:01.856&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Datum und Uhrzeit --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>&gt;7.30pm, 20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Datum und Uhrzeit mit Zeitzone --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>&gt;7.30pm, 20 Januar 2016 ist 8.30pm in Frankreich&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Eine bestimmte Wochennummer angeben--&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>&gt;Die vierte Woche im Jahr 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>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 <a href="/de/docs/Web/HTML/Element">HTML-Element Referenz</a> nach, denn dort sind alle HTML-Elemente aufgelistet.<br>
 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!</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>