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

---
title: Einfache Textformatierung in HTML
slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
tags:
  - Beginner
  - Einführung in HTML
  - HTML
  - Lernen
  - Listen
  - Semantik
  - Text
  - Text formatieren
  - Überschriften
translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
original_slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML
---
<div>{{LearnSidebar}}</div>

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

<p class="summary">Einer der Hauptaufgaben von HTML ist es, Text zu strukturieren und diesem eine bestimmte Bedeutung zu verleihen, damit der Browser den Text im richtigen Kontext darstellen kann.  In diesem Artikel wird erklärt, wie man mit {{glossary("HTML")}} Texte formattieren kann. Dazu gehört das hervorheben einzelner Textpassagen, als auch die Darstellung des Textblocks, zum Beispiel als Absatz, Liste oder als Überschrift.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorwissen:</th>
   <td>Grundlagen von HTML, wie sie im Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> abgedeckt werden.</td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>Erlernen von grundlegender Textformattierung - Benutzung von Absätzen, Überschriften, Listen, Hervorhebung von Textstellen und Zitate.</td>
  </tr>
 </tbody>
</table>

<h2 id="Überschriften_und_Absätze">Überschriften und Absätze</h2>

<p>Meistens besteht Text aus Überschriften und Absätzen, egal ob Sie nun eine Geschichte, einen Zeitungsartikel, ein Magazin oder auf einer Webseite lesen.</p>

<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p>

<p>Gut strukturierter Inhalt macht es sehr viel einfacher und angenehmer diesen zu lesen.</p>

<p>In HTML wird ein Absatz durch ein {{htmlelement("p")}}-Element dargestellt, so zum Beispiel:</p>

<pre class="brush: html">&lt;p&gt;Ich bin ein Absatz, ja das bin ich.&lt;/p&gt;</pre>

<p>Jede Überschrift wird von Überschriften-Tags als solche gekennzeichnet:</p>

<pre class="brush: html">&lt;h1&gt;Ich bin der Titel einer Geschichte.&lt;/h1&gt;</pre>

<p>Es gibt sechs verschiedene Überschriften-Elemente — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} and {{htmlelement("h6")}}. Jedes dieser Elemente repräsentiert eine andere Gewichtung des Inhalts im Dokument. <code>&lt;h1&gt;</code> repräsentiert die Hauptüberschrift, <code>&lt;h2&gt;</code> repräsentiert Unterüberschriften, <code>&lt;h3&gt;</code> repräsentiert Unter-Überschriften und so weiter.</p>

<h3 id="Struktur_schaffen">Struktur schaffen</h3>

<p>Als Beispiel würden in einer Geschichte <code>&lt;h1&gt;</code> zum ausweisen des Titels genutzt, <code>&lt;h2&gt;</code> für die Kapitelüberschriften und <code>&lt;h3&gt;</code> um ein Kapitel in mehrere Sektionen zu unterteilen.</p>

<pre class="brush: html">&lt;h1&gt;Die erdrückende Langeweile&lt;/h1&gt;

&lt;p&gt;Von Chris Mills&lt;/p&gt;

&lt;h2&gt;Kapitel 1: Die dunkle Nacht&lt;/h2&gt;

&lt;p&gt;Es war eine dunkle Nacht. Irgendwo hörte man eine Eule rufen. Der Regen strömte herab auf... &lt;/p&gt;

&lt;h2&gt;Kapitel 2: Die ewige Stille&lt;/h2&gt;

&lt;p&gt;Unser Protagonist kann gerade so aus dem Schatten heraus flüstern...&lt;/p&gt;

&lt;h3&gt;Der Geist spricht&lt;/h3&gt;

&lt;p&gt;Nachdem mehrere Stunden der Stille vorbei gegangen waren, setzte sich plötzlich der Geist aufrecht hin und rief "Bitte habt erbarmen mit meiner Seele!"&lt;/p&gt;</pre>

<p>Sie können selber entscheiden, wie Sie Struktur in Ihre Texte bringen wollen, so lange die Hierarchie Sinn ergibt. Hier geben wir Ihnen ein paar Ratschläge, um sinnvolle Strukturen zu erschaffen:</p>

<ul>
 <li>Sie sollten möglichst nur eine einzige <code>&lt;h1&gt;</code>-Überschrift pro Seite haben — dies ist die Hauptüberschrift des Dokuments und alle anderen Überschriften gehören darunter.</li>
 <li>Gehen Sie sicher, das Sie die Überschriften in der richtigen Reihenfolge nutzen. Nutzen Sie nicht <code>&lt;h3&gt;'</code> , um Kapitelüberschriften zu kennzeichnen und darunter dann <code>&lt;h2&gt;'</code>, um Unterüberschriften im Kapitel anzuzeigen, denn das macht keinen Sinn und führt zu merkwürdigen Resultaten.</li>
 <li>Von den sechs Überschiftenordnungen die es gibt, sollten Sie möglichst nicht mehr als drei pro Seite benutzen, es sei denn es ist wirklich nötig. Dokumente mit zu viel Hierarchien bringen mehr Aufwand mit sich und sie sind schwieriger zu navigieren. Es wäre sinnvoller den entsprechenden Inhalt auf mehrere Seiten zu verteilen.</li>
</ul>

<h3 id="Wieso_brauchen_wir_Struktur">Wieso brauchen wir Struktur?</h3>

<p>Um diese Frage zu beantworten, schauen wir uns folgendes Dokument an: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> Dieses Dokument (ein leckeres Hummus-Rezept) wird uns den ganzen Artikel lang begleiten, also speichern Sie am besten jetzt gleich eine Kopie davon auf Ihrem Computer, um daran mitzuarbeiten. Der <code>body</code> des Dokuments enthält im Moment eine Reihe von Inhalten, welche nicht wirklich strukturiert sind. Einzig ein paar Zeilenumbrüche wurden in dem HTML-Dokument genutzt, um Inhalte voneinander zu trennen (es wurde Enter/Return gedrückt, um zur nächsten Zeile zu springen).</p>

<p>Wenn Sie dieses Dokument im Browser öffnen, werden Sie feststellen, das der Text in einem großen Block angezeigt wird! Die Zeilenumbrüche werden also komplett ignorert.</p>

<p><img alt="Eine Webseite, auf welcher ein unformatiertes Hummus-Rezept zu lesen ist. Es gibt keine Elemente die dem Dokument Struktur geben." src="https://mdn.mozillademos.org/files/15527/hummus-rezept-unformatiert.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></p>

<p>Der Browser findet keine Elemente, die dem Dokument eine Struktur geben, er kann nicht von selbst erkennen was Überschriften, Zeilenumbrüche und Absätze sind. Nachteile einer strukturlosen Webseite:</p>

<ul>
 <li>Neue Benutzer einer Webseite scannen diese als erstes nach relevanten Inhalten durch, lesen oft nur die Überschriften und hervorgehobene Textstellen. Wenn Sie nichts brauchbares innerhalb einiger Sekunden finden, dann werden sie die Webseite wieder verlassen.</li>
 <li>Suchmaschinen indexieren Ihre Webseite auch anhand der Überschriften. Ohne Überschriften würde eine Webseite sehr schlecht in den Suchergebnissen abschneiden. Stichwort: {{glossary("SEO")}} (Suchmaschinenoptimierung).</li>
 <li>Menschen mit Sehbehinderung können eine Webseite nicht lesen. Anstatt dessen wandeln Bildschirmlesegeräte, so genannte Screenreader, die Webseite in gesprochenen Text um. Diese Screenreader benötigen oft die Überschriften eines Dokuments, um die Navigation durch die Webseite zu ermöglichen. Ansonsten würde immer das ganze Dokument komplett vorgelesen, anstatt den Teilen die wirklich von Interesse sind.</li>
 <li>Um den Inhalt mit {{glossary("CSS")}} zu stylen oder mit {{glossary("JavaScript")}} interessante Dinge tun zu lassen, braucht es den Inhalt umschließende Elemente, welche als Ziel genutzt werden können.</li>
</ul>

<p>Daher müssen wir unserem Text eine sinnvolle Auszeichnung geben.</p>

<h3 id="Aktives_Lernen_Unserem_Inhalt_Struktur_geben">Aktives Lernen: Unserem Inhalt Struktur geben</h3>

<p>Lassen Sie uns gleich mit einem interaktiven Beispiel beginnen. Ändern Sie den rohen Text im <em>Input</em>-Feld mittels HTML-Auszeichnungen so, das im <em>Output</em>-Feld eine Überschrift mit zwei Absätzen darunter erscheint.</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;Meine Kurzgeschichte

Ich bin eine Polizeifrau und mein Name ist Trish.

Meine Beine sind aus Pappkarton und ich bin verheiratet mit einem Fisch.
&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: 8em;
  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;h1&gt;Meine Kurzgeschichte&lt;/h1&gt;\n&lt;p&gt;Ich bin eine Polizeifrau und mein Name ist Trish.&lt;/p&gt;\n&lt;p&gt;Meine Beine sind aus Pappkarton und ich bin verheiratet mit einem Fisch.&lt;/p&gt;';
  drawOutput();
});

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

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

<h3 id="Warum_brauchen_wir_Semantik">Warum brauchen wir Semantik?</h3>

<p>Wir verlassen uns die ganze Zeit auf Semantik - wir beruhen uns auf Ereignisse, die wir erlebt haben, um die Funktion von Dingen um uns herum zu beurteilen. Wenn wir etwas sehen, dann wissen wir was für eine Funktion dieses haben wird. Zum Beispiel erwarten wir, dass eine rote Ampel "Stop" bedeutet, während ein grünes Ampellicht uns erlaubt weiterzufahren. Dinge können schnell aus dem Ruder laufen, wenn Semantik falsch genutzt wird. (Zum Beispiel wäre es in einem Land, in welchem das rote Ampellicht "Fahren" bedeutet, vielleicht nicht so sicher).</p>

<p>Genauso müssen wir bei unseren Elementen aufpassen, diesen die richtige Bedeutung, Funktion und das entsprechende Aussehen zukommen zu lassen. In diesem Kontext ist das {{htmlelement("h1")}}-Element auch ein sematisches Element, welches dem Text innerhalb der Tags die Rolle bzw. Bedeutung einer "Top-Level-Hauptüberschrift für die Webseite" gibt.</p>

<pre class="brush: html">&lt;h1&gt;Dies ist eine Hauptüberschrift.&lt;/h1&gt;</pre>

<p>Automatisch gibt der Browser diesem Element eine große Schriftgröße, damit es aussieht, wie eine Überschrift (auch wenn Sie es mittels CSS so stylen können, wie sie möchten). Wichtiger noch, der semantische Wert des Elements wird auf verschiedene Weise genutzt. Zum Beispiel greifen Suchmaschinen und Bildschirmlesegeräte darauf zurück (wie oben erklärt).</p>

<p>Sie können jedes Element so <em>aussehen</em> lassen, wie eine Überschrift. Zum Beispiel wie folgt:</p>

<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Ist dies eine Top-Level-Überschrift?&lt;/span&gt;</pre>

<p>Dies ist ein {{htmlelement("span")}}-Element. Es hat keinerlei semantischen Wert. Sie benutzen dieses Element, um Inhalt zu verpacken und als Ziel für CSS oder JavaScript zu nutzen, ohne ihm eine besondere Bedeutung zukommen zu lassen. (Sie werden später mehr darüber heraus finden.) Wir haben CSS benutzt, um dem Text das Aussehen einer Überschrift zu geben. Da es aber keinen sematischen Wert hat, bekommt dieser Text nicht die selbe Bedeutung wie ein echtes Überschriften-Element. Es ist also besser, das richtige HTML-Element für den richtigen Job zu benutzen, auch wenn es anders gehen mag.</p>

<h2 id="Listen">Listen</h2>

<p>Lassen Sie uns nun Listen anschauen. Listen gibt es überall - von Ihrem Einkaufszettel, über die Liste an Direktionen, welche Sie unbewusst befolgen, um jeden Tag Ihr Haus wiederzufinden, bis hin zu den Listen an Instruktionen, die sie in diesen Tutorials befolgen! Auch im Internet treffen Sie ständig auf Listen. Wir haben hier drei verschiedene Typen, welche Sie auf Ihren Webseiten benutzen können.</p>

<h3 id="Ungeordnete_Listen">Ungeordnete Listen</h3>

<p>Ungeordnete Listen werden benutzt, um eine Auflistung von Punkten zu erzeugen, bei der die Reihenfolge keine Rolle spielt - als Beispiel nehmen wir eine Einkaufsliste:</p>

<pre>Milch
Eier
Brot
Hummus</pre>

<p>Eine ungeordnete Liste startet mit dem {{htmlelement("ul")}}-Element, welches die einzelnen Listenelemente einhüllt:</p>

<pre class="brush: html">&lt;ul&gt;
Milch
Eier
Brot
Hummus
&lt;/ul&gt;</pre>

<p>Die einzelnen Listenpunkte selbst, werden jeweils von einem {{htmlelement("li")}}-Element umschlossen:</p>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Milch&lt;/li&gt;
  &lt;li&gt;Eier&lt;/li&gt;
  &lt;li&gt;Brot&lt;/li&gt;
  &lt;li&gt;Hummus&lt;/li&gt;
&lt;/ul&gt;</pre>

<h4 id="Aktives_Lernen_Eine_ungeordnete_Liste_auszeichnen">Aktives Lernen: Eine ungeordnete Liste auszeichnen</h4>

<p>Versuchen Sie das Beispiel unten so zu ändern, dass Sie eine eigene ungeordnete Liste bekommen.</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;Milch
Eier
Brot
Hummus&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: 6em;
  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;ul&gt;\n&lt;li&gt;Milch&lt;/li&gt;\n&lt;li&gt;Eier&lt;/li&gt;\n&lt;li&gt;Brot&lt;/li&gt;\n&lt;li&gt;Hummus&lt;/li&gt;\n&lt;/ul&gt;';
  drawOutput();
});

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

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

<h3 id="Geordnete_Listen">Geordnete Listen</h3>

<p>Geordnete Listen sind Listen bei denen die Anordnung der Listenelemente wichtig ist - zum Beispiel bei einer Wegbeschreibung:</p>

<pre>Fahre bis zum Ende der Straße
Biege rechts ab
Fahre geradeaus über die nächsten beiden Verkehrskreisel
Biege nach dem dritten Kreisel links ab
Nach 300 Metern ist die Schule auf der rechten Seite
</pre>

<p>Die Auszeichnungsstruktur is dieselbe wie für die ungeordnete Liste, außer das Sie die Listenpunke in ein {{htmlelement("ol")}}-Element einhüllen müssen, anstatt einem <code>&lt;ul&gt;</code>-Element:</p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Fahre bis zum Ende der Straße&lt;/li&gt;
  &lt;li&gt;Biege rechts ab&lt;/li&gt;
  &lt;li&gt;Fahre geradeaus über die nächsten beiden Verkehrskreisel&lt;/li&gt;
  &lt;li&gt;Biege nach dem dritten Kreisel links ab&lt;/li&gt;
  &lt;li&gt;Nach 300 Metern ist die Schule auf der rechten Seite&lt;/li&gt;
&lt;/ol&gt;</pre>

<h3 id="Aktives_Lernen_Eine_geordnete_Liste_auszeichnen">Aktives Lernen: Eine geordnete Liste auszeichnen</h3>

<p>Bearbeiten Sie unten das Beispiel in der Codebox, so das Sie eine geordnete Liste bekommen:</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;Fahre bis zum Ende der Straße
Biege rechts ab
Fahre geradeaus über die nächsten beiden Verkehrskreisel
Biege nach dem dritten Kreisel links ab
Nach 300 Metern ist die Schule auf der rechten Seite&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: 8em;
  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;ol&gt;\n&lt;li&gt;Fahre bis zum Ende der Straße&lt;/li&gt;\n&lt;li&gt;Biege rechts ab&lt;/li&gt;\n&lt;li&gt;Fahre geradeaus über die nächsten beiden Verkehrskreisel&lt;/li&gt;\n&lt;li&gt;Biege nach dem dritten Kreisel links ab&lt;/li&gt;\n&lt;li&gt;Nach 300 Metern ist die Schule auf der rechten Seite&lt;/li&gt;\n&lt;/ol&gt;';
  drawOutput();
});

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

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

<h3 id="Aktives_Lernen_Das_Hummus-Rezept_auszeichnen">Aktives Lernen: Das Hummus-Rezept auszeichnen</h3>

<p>An diesem Punkt sollten Sie alle Informationen haben, die Sie brauchen, um unser Hummus-Rezept auf einer Seite mit HTML zu strukturieren. Sie können entweder die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">hummus-rezept.html</a> Datei herunterladen und lokal auf Ihrem Computer bearbeiten oder die editierbare Codebox unten benutzen. Nur wenn Sie die Aufgabe lokal bearbeiten, können Sie diese auch speichern, um Sie sich später noch einmal anzuschauen. Was Sie im Browser bearbeiten ist beim nächsten Besuch verloren. Also überlegen Sie es, wie Sie es machen möchten.</p>

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

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;Schnelles Hummus Rezept

    Mit diesem Rezept können Sie schnell und ganz ohne eine Sauerei in der Küche, ein leckeres Hummus zubereiten. Es basiert auf verschiedenen Rezepten, die ich ausprobiert habe über die Jahre.

    Hummus ist eine leckere, dicke Paste, welche vor allem in Gerichten aus Griechenland und dem Mittleren Osten Verwendung findet. Es schmeckt sehr gut zu Salaten, gegrilltem Fleisch und Pita-Brot.


    Zutaten

    1 Dose (400g) Kichererbsen
    175g Tahini
    6 getrocknete Tomaten
    eine halbe Schote rote Paprika
    eine Messerspitze Cayenne Pfeffer
    1 Knoblauchzehe
    ein Spritzer Olivenöl


    Zubereitung

    Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.
    Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.
    Tun Sie alle Zutaten zusammen in eine Küchenmaschine.
    Pürieren Sie die Zutaten zu einer Paste.
    Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.
    Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.

    Für einen etwas anderen Geschmack, probieren Sie kleine Mengen von Zitrone und Koriander, Chilischoten, Limonen und Chipotle-Paprika, Harissa und Minze oder Spinat und Feta-Käse mit hinein zu tun. Experimentieren Sie, um herauszufinden, was Ihnen am besten schmeckt.


    Aufbewahrung

    Bewahren Sie das Hummus in einem geschlossenen Gefäß im Kühlschrank auf. Es sollte sich bis zu einer Woche halten, nachdem Sie es frisch gemacht haben. Wenn es anfängt komisch auszusehen, dann sollten Sie es wegwerfen.

    Hummus lässt sich einfrieren. Sie sollten es dann innerhalb einiger Monate wieder auftauen und verbrauchen.&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: 8em;
  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;h1&gt;Schnelles Hummus Rezept&lt;/h1&gt;\n\n&lt;p&gt;Mit diesem Rezept können Sie schnell und ganz ohne eine Sauerei in der Küche, ein leckeres Hummus zubereiten. Es basiert auf verschiedenen Rezepten, die ich ausprobiert habe über die Jahre.&lt;/p&gt;\n\n&lt;p&gt;Hummus ist eine leckere, dicke Paste, welche vor allem in Gerichten aus Griechenland und dem Mittleren Osten Verwendung findet. Es schmeckt sehr gut zu Salaten, gegrilltem Fleisch und Pita-Brot.&lt;/p&gt;\n\n&lt;h2&gt;Zutaten&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 Dose (400g) Kichererbsen&lt;/li&gt;\n&lt;li&gt;175g Tahini&lt;/li&gt;\n&lt;li&gt;6 getrocknete Tomaten&lt;/li&gt;\n&lt;li&gt;eine halbe Schote rote Paprika&lt;/li&gt;\n&lt;li&gt;eine Messerspitze Cayenne Pfeffer&lt;/li&gt;\n&lt;li&gt;1 Knoblauchzehe&lt;/li&gt;\n&lt;li&gt;ein Spritzer Olivenöl&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Zubereitung&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.&lt;/li&gt;\n&lt;li&gt;Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.&lt;/li&gt;\n&lt;li&gt;Tun Sie alle Zutaten zusammen in eine Küchenmaschine.&lt;/li&gt;\n&lt;li&gt;Pürieren Sie die Zutaten zu einer Paste.&lt;/li&gt;\n&lt;li&gt;Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.&lt;/li&gt;\n&lt;li&gt;Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;Für einen etwas anderen Geschmack, probieren Sie kleine Mengen von Zitrone und Koriander, Chilischoten, Limonen und Chipotle-Paprika, Harissa und Minze oder Spinat und Feta-Käse mit hinein zu tun. Experimentieren Sie, um herauszufinden, was Ihnen am besten schmeckt.&lt;/p&gt;\n\n&lt;h2&gt;Aufbewahrung&lt;/h2&gt;\n\n&lt;p&gt;Bewahren Sie das Hummus in einem geschlossenen Gefäß im Kühlschrank auf. Es sollte sich bis zu einer Woche halten, nachdem Sie es frisch gemacht haben. Wenn es anfängt komisch auszusehen, dann sollten Sie es wegwerfen.&lt;/p&gt;\n\n&lt;p&gt;Hummus lässt sich einfrieren. Sie sollten es dann innerhalb einiger Monate wieder auftauen und verbrauchen.&lt;/p&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);

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

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

<p>Wenn Sie es nicht selber schaffen, dann können Sie mit einem Klick auf <em>Lösung anzeigen</em> sehen, wie es gemacht wird oder unser ausgzeichnetes Beispiel, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a>, auf GitHub anschauen.</p>

<h3 id="Listen_ineinander_schachteln">Listen ineinander schachteln</h3>

<p>Listen können ineinander verschachtelt werden. Vielleicht möchten Sie Unterpunke unter einem Listenpunkt haben. Lassen Sie uns das anhand der zweiten Liste in unserem Rezept anschauen:</p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.&lt;/li&gt;
  &lt;li&gt;Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.&lt;/li&gt;
  &lt;li&gt;Tun Sie alle Zutaten zusammen in eine Küchenmaschine.&lt;/li&gt;
  &lt;li&gt;Pürieren Sie die Zutaten zu einer Paste.&lt;/li&gt;
  &lt;li&gt;Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.&lt;/li&gt;
  &lt;li&gt;Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>Da die letzten beiden Listenpunkte sich auf den Punkt davor beziehen, könnte man diese zusammen unter dem vierten Listenpunkt einordnen, in einer ungeordneten Liste. Das würde so aussehen:</p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.&lt;/li&gt;
  &lt;li&gt;Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.&lt;/li&gt;
  &lt;li&gt;Tun Sie alle Zutaten zusammen in eine Küchenmaschine.&lt;/li&gt;
  &lt;li&gt;Pürieren Sie die Zutaten zu einer Paste.&lt;/li&gt;
  &lt;ul&gt;
    &lt;li&gt;Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.&lt;/li&gt;
    &lt;li&gt;Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.&lt;/li&gt;
  &lt;/ul&gt;
&lt;/ol&gt;
</pre>

<p>Gehen Sie zurück zur obigen Aufgabe und fügen Sie eine Liste einer der vorhandenen beiden Listen hinzu. Wenn Sie damit fertig sind, sollte das Rezept so ähnlich aussehen:</p>

<p><img alt="Eine Webseite, auf welcher ein formatiertes Hummus-Rezept zu lesen ist. Es gibt mehrere Elemente die dem Dokument Struktur geben." src="https://mdn.mozillademos.org/files/15529/hummus-rezept-formatiert.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></p>

<h2 id="Betonung_und_Wichtigkeit">Betonung und Wichtigkeit</h2>

<p>Während wir sprechen, betonen wir oft bestimmte Wörter, um Ihre Bedeutung im Satz zu ändern. Solche Wörter möchten wir in einem Text hervorheben. HTML stellt verschiedene sematnische Elemente zur Verfügung, um dies zu bewerkstelligen. In dieser Sektion schaune wir uns einige der geläufigsten Formen davon an.</p>

<h3 id="Betonung">Betonung</h3>

<p>Wenn wir eine bestimmte Betonung in der gesprochenen Sprache erreichen wollen, dann heben wir bestimmte Wörter hervor, um ihre Bedeutung leicht zu verändern. Ähnlich heben wir solche Wörter in geschriebener Sprache hervor, indem wir ein Wort <em>kursiv</em> schreiben. Zum Beispiel haben die folgenden beiden Sätze eine unterschiedliche Bedeutung.</p>

<p>Ich bin froh, dass du nicht zu spät bist.</p>

<p>Ich bin <em>froh</em>, dass du nicht <em>zu spät</em> bist.</p>

<p>Der erste Satz klingt danach, das jemand wirklich erleichtert ist, das die Person nicht zu spät ist, der zweite Satz klingt hingegen eher sarkastisch, mit einem Klang von Vorwurf, da die Person sich etwas verspätet hatte.</p>

<p>In HTML benutzen wir das {{htmlelement("em")}}-Element (von engl.:emphasis = Betonung), um solche Wörter hervorzuheben. Es macht ein Dokument etwas interessanter zu lesen. Auch Bildschrimlesegeräte können so eine besondere Betonung erkennen und nutzen. Browser zeigen den Text im Element normalerweise kursiv an, doch Sie sollten das Tag nicht einizig dazu benutzen, Text kursiv anzuzeigen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("i")}}-Element (siehe weiter unten).</p>

<pre class="brush: html">&lt;p&gt;Ich bin &lt;em&gt;froh&lt;/em&gt; dass du nicht &lt;em&gt;zu spät&lt;/em&gt;bist.&lt;/p&gt;</pre>

<h3 id="Wichtige_Wörter">Wichtige Wörter</h3>

<p>Um wichtige Wörter hervorzuheben, betonen wir diese in der gesprochenen Sprache sehr stark und schreiben diese in <strong>Fettschrift</strong> in geschriebener Sprache. Zum Beispiel:</p>

<p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p>

<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p>

<p>In HTML benutzen wir das {{htmlelement("strong")}}-Element (engl.: <em>strong</em> = stark/fett) um solche Wörter hervorzuheben. Es macht das Dokument lesbarer und auch hier können Screenreader erkennen, dass Wörter besonders betont ausgelesen werden sollten. Browser zeigen den Inhalt dieses Elements in Fettschrift an, aber Sie sollten diesen Tag nicht alleine dafür verwenden, Schrift fett erscheinen zu lassen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("b")}}-Element (siehe weiter unten).</p>

<pre class="brush: html">&lt;p&gt;Diese Flüssigkeit ist &lt;strong&gt;sehr giftig&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Ich zähle auf dich. &lt;strong&gt;Sei nicht&lt;/strong&gt; zu spät!&lt;/p&gt;</pre>

<p>Sie können <code>&lt;strong&gt;</code>-Elemente und <code>&lt;em&gt;</code>-Elemente ineinander verschachteln:</p>

<pre class="brush: html">&lt;p&gt;Diese Flüssigkeit ist &lt;strong&gt;sehr giftig&lt;/strong&gt; —
wenn Sie diese trinken, &lt;strong&gt;dann werden Sie &lt;em&gt;sterben&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>

<h3 id="Aktives_Lernen_Lassen_Sie_uns_wichtig_sein!">Aktives Lernen: Lassen Sie uns wichtig sein!</h3>

<p>In diesem Aktives-Lernen-Beispiel, haben wir editierbaren Code. Probieren Sie nun <code>&lt;strong&gt;</code>-Elemente und <code>&lt;em&gt;</code>-Elemente einzufügen, um bestimmte Textstellen besonders hervorzuheben. Üben Sie ein wenig, diese HTML-Elemente hinzuzufügen und auch zu verschachteln.</p>

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

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&lt;h1&gt;Wichtige Nachricht&lt;/h1&gt;

&lt;p&gt;Am Sonntag den 9. Januar 2010 wurde eine Gang Goths gesehen, wie sie mehrere Gartenzwerge aus einem Einkaufszentrum, im Stadtzentrum von Milwaukee, geklaut haben. Sie haben alle grüne Anzüge und komische Hüte getragen. Sie scheinen sich dabei großartig amüsiert zu haben. Wenn irgendjemand Informationen zu diesem Vorfall haben, bittet die Polizei darum, kontaktiert zu werden.&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: 8em;
  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;h1&gt;Wichtige Nachricht&lt;/h1&gt;\n&lt;p&gt;Am &lt;strong&gt;Sonntag den 9. Januar 2010&lt;/strong&gt;, wurde eine Gang &lt;em&gt;Goths&lt;/em&gt; gesehen, wie sie &lt;strong&gt;&lt;em&gt;mehrere&lt;/em&gt; Gartenzwerge&lt;/strong&gt; aus einem Einkaufszentrum, im Stadtzentrum von &lt;strong&gt;Milwaukee&lt;/strong&gt; geklaut haben. Sie haben alle &lt;em&gt;grüne Anzüge&lt;/em&gt; und &lt;em&gt;komische Hüte&lt;/em&gt;,  getragen. Sie scheinen sich dabei großartig amüsiert zu haben. Wenn irgendjemand &lt;strong&gt;Informationen&lt;/strong&gt; zu diesem Vorfall haben, bittet die Polizei darum, &lt;strong&gt;sofort&lt;/strong&gt; kontaktiert zu werden.&lt;/p&gt;';
  drawOutput();
});

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

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

<h3 id="Kursiv_fett_unterstrichen...">Kursiv, fett, unterstrichen...</h3>

<p>Die beiden Elemente, die wir oben besprochen haben, haben eine eindeutige semantische Bedeutung. Die Situation ist etwas anders mit den {{htmlelement("b")}}, {{htmlelement("i")}} und {{htmlelement("u")}}-Elementen. Sie wurden erschaffen, um Leuten die Möglichkeit zu geben Text in fett (engl.:<em><strong>b</strong>old</em>), kursiv (engl.:<em><strong>i</strong>talic</em>) oder unterstrichen (engl.:<em><strong>u</strong>nderlined</em>) anzuzeigen, in einer Zeit in welcher CSS noch nicht von allen Browsern unterstützt wurde. Solche Elemente, welche nur das Aussehen, aber nicht die Bedeutung, verändern, nennt man auch <strong>präsentationsbezogenes Element</strong>. Sie sollten nach Möglichkeit nicht mehr benutzt werden, denn wie wir gesehen haben, ist eine gute Semantik sehr wichtig für Suchmaschinen und Barrierefreiheit.</p>

<p>In HTML5 wurden <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> und <code>&lt;u&gt;</code> neu definiert, mit einer etwas verwirrenden semantischen Bedeutung.</p>

<p>Hier ist die beste Faustregel dafür: es ist wahrscheinlich in Ordnung <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> oder <code>&lt;u&gt;</code> zu benutzen, um die Bedeutung der traditionellen Nutzung von fettem, kursivem oder unterstrichenem Text zu geben, wenn es kein passenderes Element gibt. Denken Sie aber immer auch an die Barrierefreiheit Ihrer Webseite. Leute, welche Screenreader benutzen, können mit kursivem Text, ohne Bedeutung, nichts anfangen. Auch funktioniert es möglicherweise nicht mit einem anderen, als dem Lateinischen Buchstabensystem.</p>

<ul>
 <li>{{HTMLElement('i')}} wird benutzt, um die traditionelle Rolle von kursivem Text anzuzeigen: Fremdwörter, Taxonomische Begriffe, Fachwörter, Gedanken...</li>
 <li>{{HTMLElement('b')}} wird benutzt, um die traditionelle Rolle von fettem Text anzuzeigen: Stichwörter, Produktnamen, wichtige Sätze...</li>
 <li>{{HTMLElement('u')}} wird benutzt, um die traditionelle Rolle von unterstrichenem Text anzuzeigen: richtige Namen, Rechtschreibfehler...</li>
</ul>

<div class="note">
<p><strong>Hinweis:</strong>Eine Warnung zu unterstrichenem Text: <strong>Unterstrichener Text wird stark mit Hyperlinks assoziiert.</strong> Deswegen ist es auf Webseiten besser, nur Links zu unterstreichen. Benutzen Sie das <code>&lt;u&gt;</code>-Element, wo es passt, aber passen Sie möglicherweise mit CSS an, damit der Text anders aussieht, als die Links auf Ihrer Webseite. Unten können Sie sehen, wie das gemacht werden kann.</p>
</div>

<pre class="brush: html">&lt;!-- Wissenschaftliche Namen --&gt;
&lt;p&gt;
  Der winzige Rubinkehlkolibri (&lt;i&gt;Archilochus colubris&lt;/i&gt;) ist ein auffallend farbenprächtiger Vogel, der in den östlichen Teilen der USA und Kanadas anzutreffen ist.
&lt;/p&gt;

&lt;!-- Fremdwörter --&gt;
&lt;p&gt;
  Das Menü bestand aus einer Fülle an extosichen Wörtern, zum Beispiel &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; und &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
&lt;/p&gt;

&lt;!-- Ein bekannter Schreibfehler --&gt;
&lt;p&gt;
  Eines Tages werde ich lernen, wie man &lt;u&gt;bessser&lt;/u&gt; buchstabiert.
&lt;/p&gt;

&lt;!-- Stichpunkte in einer Anleitung hervorheben --&gt;
&lt;ol&gt;
  &lt;li&gt;
    &lt;b&gt;Schneiden&lt;/b&gt; Sie zwei Scheiben Brot ab.
  &lt;/li&gt;
  &lt;li&gt;
    &lt;b&gt;Legen&lt;/b&gt; Sie eine Tomate und ein Salatblatt zwischen die Brotscheiben.
  &lt;/li&gt;
&lt;/ol&gt;</pre>

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

<p>Sie haben es geschafft! Dieser Artikel sollte Ihnen beigebracht haben wie Sie Text mit HTML-Elementen strukturieren können. Es wurden die wichtigsten Eltemente dafür vorgeführt. Es gibt weitere Möglichkeiten, Texten eine bestimmte semanitsche Bedeutungen zukommen zu lassen. Wir werden uns diese im Artikel "Fortgeschrittene Textformatierung" anschauen. Im nächsten Artikel geht es erst einmal darum, wie man <a href="/en-de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks erstellt</a>, das wichtigste Element im Internet.</p>

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