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

---
title: Lerne HTML kennen
slug: Learn/HTML/Introduction_to_HTML/Getting_started
tags:
  - Anfänger
  - Attribut
  - Beginner
  - Charakter-Referenz
  - Element
  - Guide
  - HTML
  - Kommentar
  - Leerraum
  - Modul
  - whitespace
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
original_slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen
---
<div>{{LearnSidebar}}</div>

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

<p class="summary">In diesem Artikel werden wir Ihnen die Grundlagen von HTML beibringen. Wir werden definieren was Elemente, Attribute und einige andere Begriffe, die sie im Zusammenhang mit dieser Sprache kennen lernen werden, sind. Wir zeigen auch wie ein HTML Element strukturiert ist, wie eine typische HTML Webseite aufgebaut ist und erklären weitere wichtige Grundlagen dieser Sprache. Währenddessen können Sie oft mit HTML-Code experimentieren.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorbereitungen:</th>
   <td>grundlegende Computerkenntnisse, <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/Installing_basic_software">notwendige Software installiert</a> und wissen wie man <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzt</a>.</td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>
    <p>Grundwissen über die HTML Sprache erwerben, etwas Praxis beim Schreiben von HTML Elementen erwerben.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Was_ist_HTML">Was ist HTML?</h2>

<p>HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, Ihre Webseite zu strukturieren. Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche Sie um verschiedene Teile Ihres Inhalts herum platzieren können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel können Sie damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:</p>

<pre class="notranslate">Meine Katze ist sehr frech.</pre>

<p>Wenn wir möchten das der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, das es sich um einen Absatz handelt: </p>

<pre class="brush: html notranslate">&lt;p&gt;Meine Katze ist sehr frech.&lt;/p&gt;</pre>

<h3 id="Aufbau_eines_HTML-Elements">Aufbau eines HTML-Elements</h3>

<p>Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15443/katze-element.jpg" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>

<p>Die Hauptteile unseres Elements sind:</p>

<ol>
 <li><strong>Das öffnende Tag:</strong> Diese besteht aus dem Namen des Elements (in diesem Fall ein <code>p</code> für paragraph (engl.:Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.</li>
 <li><strong>Der Inhalt:</strong> Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.</li>
 <li><strong>Das schließende Tag:</strong> Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.</li>
 <li><strong>Das Element:</strong> Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.</li>
</ol>

<h3 id="Aktives_Lernen_Erstellen_Sie_Ihr_erstes_HTML-Element">Aktives Lernen: Erstellen Sie Ihr erstes HTML-Element</h3>

<p>Editieren Sie den Text unten im <em>Input</em>-Feld. Heben Sie den Text mit dem <code>&lt;em&gt;</code>-Element hervor. (schreiben sie ein <code>&lt;em&gt;</code>-Tag vor den Text, um das <em>Element zu öffnen</em> und fügen sie ein <code>&lt;/em&gt;</code>-Tag am Ende des Textes an, um das <em>Element zu schließen</em>) Dies sollte den Text <em>kursiv</em> darstellen. Sie sollten die Änderungen live in dem <em>Output</em>-Feld sehen können.</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 notranslate">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;Dies ist mein Text.&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 notranslate">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

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

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

<pre class="brush: js notranslate">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;em&gt;Dies ist mein Text.&lt;/em&gt;';
  drawOutput();
});

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

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

<h3 id="Elemente_verschachteln">Elemente verschachteln</h3>

<p>Sie können auch Elemente innerhalb von anderen Elementen erstellen, dies wird <strong>Verschachteln</strong> genannt. Wenn wir hervorheben wollen, das unsere Katze <strong>sehr</strong> schlecht gelaunt ist, können wir das Wort "sehr" in ein <code>&lt;strong&gt;</code>-Element einbinden, was bedeutet, das dieses Wort fett hervorgehoben werden soll:</p>

<pre class="brush: html notranslate">&lt;p&gt;Meine Katze ist &lt;strong&gt;sehr&lt;/strong&gt; frech.&lt;/p&gt;</pre>

<p>Sie müssen allerdings aufpassen, das Sie die Elemente richtig verschachteln: in dem obigen Beispiel haben wir zuerst das <code>&lt;p&gt;</code>-Element geöffnet, dann das <code>&lt;strong&gt;</code>-Element geöffnet. Deswegen müssen wir zuerst wieder das <code>&lt;strong&gt;</code>-Element schließen, bevor wir das <code>&lt;p&gt;</code>-Element schließen können. Das folgende Beispiel wäre deswegen falsch:</p>

<pre class="example-bad brush: html notranslate">&lt;p&gt;Meine Katze ist &lt;strong&gt;sehr frech.&lt;/p&gt;&lt;/strong&gt;</pre>

<p>Die Elemente müssen in der korrekten Reihenfolge geöffnet und geschlossen werden, so dass eines eindeutig innerhalb von dem anderen Element liegt. Wenn die Elemente überlappen, dann muss der Browser versuchen zu entscheiden, welches Element innerhalb sein soll und es können unerwartete Resultate herauskommen. Also passen Sie darauf auf.</p>

<h3 id="Blockelemente_und_Inlineelemente">Blockelemente und Inlineelemente</h3>

<p>Es gibt zwei wichtige Kategorien von Elementen in HTML - Blockelemente und Inlineelemente.</p>

<ul>
 <li>Blockelemente bilden eine sichtbare Box auf der Webseite - sie erscheinen in einer neuen Zeile, egal was für ein Inhalt vor diesem Element steht und aller Inhalt nach diesem Element wird ebenfalls auf eine neue Zeile geschoben. Blockelemente machen die Struktur der Webseite aus, sie repräsentieren Absätze, Listen, Navigationsmenüs oder die Fußzeile. Ein Blockelement kann nicht innerhalb von einem Inlineelement stehen, es kann aber innerhalb anderer Blockelemente sein.</li>
 <li>Inlineelemente sind die Elemente welche immer innerhalb eines Blockelements stehen und nehmen nur den Platz direkt innerhalb einer Zeile (engl.: line) ein. Inlineelemente starten keine neue Zeile, normallerweise erscheinen Sie innerhalb eines Textabsatzes. Zum Beispiel sind die Elemente {{htmlelement("strong")}} und {{htmlelement("em")}} Inlineelemente.</li>
</ul>

<p>Schauen Sie sich folgendes Beispiel an:</p>

<div class="hidden">
<h6 id="Playable_code2">Playable code2</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&lt;em&gt;Erster&lt;/em&gt;&lt;em&gt;Zweiter&lt;/em&gt;&lt;em&gt;Dritter&lt;/em&gt;&lt;p&gt;Vierter&lt;/p&gt;&lt;p&gt;Fünfter&lt;/p&gt;&lt;p&gt;Sechster&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;/div&gt;
</pre>

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

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

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

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

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

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

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

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

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

<p>{{htmlelement("em")}} ist ein Inlineelement. Sie können oben sehen, das die ersten drei Elemente in einer Zeile sind, ohne Zwischenräume zwischen den Elementen. {{htmlelement("p")}} ist ein Blockelement, welches jeweils eine neue Zeile für sich alleine einnimmt, mit Platz darüber und darunter.</p>

<div class="note">
<p><strong>Notiz</strong>: In HTML5 wurden die Elementkategorien neu definiert: die neuen Definitionen finden sie in <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>, (auf Englisch). Diese Definitionen sind akkurater als die beiden, welche wir hier vorgstellt haben, sie sind aber auch viel komplizierter. In diesem Modul bleiben wir bei unseren Block- und Inlineelementkategorien.</p>
</div>

<div class="note">
<p><strong>Notiz</strong>: Sie können auf MDN hilfreiche Referenzseiten finden - für alle <a href="/de/docs/Web/HTML/Block-level_elements">Blockelemente</a> und <a href="/de/docs/Web/HTML/Inline_elements">Inlineelemente</a>.</p>
</div>

<h3 id="Leere_Elemente">Leere Elemente</h3>

<p>Nicht alle Elemente folgen dem obigen Muster, mit einem öffnenden Tag, dem Inhalt und einem schließenden Tag. Manche Elemente brauchen nur einen einzigen Tag, welcher meist genutzt wird, um etwas in eine Seite einzubetten, an der Stelle wo das Tag steht. Zum Beispiel zeigen wir das {{htmlelement("img")}}-Element, welches genutzt wird um eine Bilddatei einzubinden:</p>

<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>

<p>Der Code würde folgende Webseite im Browser anzeigen:</p>

<p>{{ EmbedLiveSample('Leere_Elemente', 700, 300) }}</p>

<h2 id="Attribute">Attribute</h2>

<p>Elemente können auch Attribute enthalten, dass sieht dann so aus:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15463/katze-attribut.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>

<p>Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt anzeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.</p>

<p>In unserem Beispiel ist der <em>Name</em> des Attributes <code>class</code> und <code>editor-note</code> ist der diesem Attribut zugeordnete <em>Wert</em>.</p>

<p>Ein Attribut sollte immer haben:</p>

<ol>
 <li>Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).</li>
 <li>Den Attributnamen, gefolgt von Gleichheitszeichen</li>
 <li>Anführungs- und Schlusszeichen um den Wert. (bsp. <code>"</code><code>editor-note"</code>)</li>
</ol>

<h3 id="Aktives_Lernen_Hinzufügen_von_Attributen_zu_einem_Element">Aktives Lernen: Hinzufügen von Attributen zu einem Element</h3>

<p>Ein weiteres Beispiel für ein Element ist {{htmlelement("a")}} — dies steht für Anker (engl.:anchor) und macht aus dem Text den es umschließt einen Hyperlink. Dieses Element kann einige Attribute annehmen, hier sind einige von ihnen:</p>

<ul>
 <li><code>href</code>: Dieses Attribut bestimmt die Webadresse, zu welcher der Link einen leiten soll, wenn man auf diesen klickt. Zum Beispiel könnte das so aussehen:  <code>href="https://www.mozilla.org/"</code>.</li>
 <li><code>title</code>: Das <code>title</code> Attribut bestimmt Extrainformationen über den Link, zum Beispiel zu welcher Seite der Link führt. Dies erscheint als Tooltip, wenn man mit der Maus darüber fährt. Beispiel: <code>title="The Mozilla homepage"</code>.</li>
 <li><code>target</code>: Das <code>target</code> Attribut bestimmt wie der Link vom Browser geöffnet werden soll. Zum Beispiel bestimmt <code>target="_blank"</code> das die angegebene Webseite in einem neuen Tab geöffnet werden soll. Wenn die Webseite in dem aktuellen Tab geöffnet werden soll, kann man dieses Attribut einfach weglassen, da Browser dies standardmäßig tun.</li>
</ul>

<p>Editieren Sie unten im <em>Input</em>-Feld die Zeile so, das es ein Link zu Ihrer Lieblingswebseite wird. Als erstes fügen Sie das <code>&lt;a&gt;</code>-Element hinzu. Danach fügen sie das <code>href</code>-Attribut und das <code>title</code>-Attribut hinzu. Als letztes sagen Sie dem Browser mit dem <code>target</code>-Attribut, das der Link in einem neuen Tab geöffnet werden soll. Sie werden Ihre Veränderungen live im <em>Output</em>-Feld verfolgen können. Wenn Sie fertig sind, sollten Sie einen Link sehen, welcher den Inhalt des <code>title</code>-Attributes anzeigt, wenn man mit dem Mauszeiger darüberfährt und wenn mn daraufklickt sollte der Link zu der entsprechenen Webadresse führen, welche sie im <code>href</code>-Attribut angegeben haben. Denken Sie daran, dass Sie ein Leerzeichen zwischen dem Element und dem ersten Attribut haben müssen und jeweils zwischen den Attributen.</p>

<p>Wenn Sie einen Fehler machen können Sie das <em>Input</em>-Feld jederzeit mit dem <em>Reset</em>-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p>

<div class="hidden">
<h6 id="Playable_code3">Playable code3</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&amp;lt;p&amp;gt;Ein Link zu meiner Lieblingswebseite.&amp;lt;/p&amp;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 notranslate">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

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

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

<pre class="brush: js notranslate">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;Ein Link zu meiner &lt;a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank"&gt;Lieblingswebseite&lt;/a&gt;.&lt;/p&gt;';
  drawOutput();
});

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

<p>{{ EmbedLiveSample('Playable_code3', 700, 300) }}</p>

<h3 id="Boolsche_Attribute">Boolsche Attribute</h3>

<p>Sie werden manchmal Attribute sehen, welche ohne Wert geschrieben sind und das ist so erlaubt. Es handelt sich um Boolsche Attribute und diese können nur einen Wert annehmen, welcher meist derselbe ist, wie der Name des Attributs. Als Beispiel zeigen wir das {{htmlattrxref("disabled", "input")}}-Attribut, welches Sie einem <code>&lt;input&gt;</code>-Element hinzufügen können, um dieses unbenutzbar (engl.: disabled) zu machen, d.h. das <code>&lt;input&gt;</code>-Feld wird ausgegraut und man kann keine Daten eingeben.</p>

<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>

<p>Als Kurzform kann man auch den folgenden Code schreiben: (Wir haben auch ein benutzbares Feld dazu getan, damit Sie sehen was hier geschieht.)</p>

<pre class="brush: html notranslate">&lt;input type="text" disabled&gt;

&lt;input type="text"&gt;
</pre>

<p>Beide werden Ihnen das folgende Resultat ausgeben:</p>

<p>{{ EmbedLiveSample('Boolsche_Attribute', 700, 100) }}</p>

<h3 id="Anfuehrungszeichen_um_Attributwerte_weglassen">Anfuehrungszeichen um Attributwerte weglassen</h3>

<p>Wenn Sie sich etwas im Internet umschauen, werden Sie immer wieder auf merkwürdige Benutzung von HTML-Code stoßen. Dazu gehören auch Attributwerte ohne Anführungszeichen. Dies funktioniert an manchen Stellen, woanders kann es den ganzen Code kaputt machen. Wir schauen uns noch einmal unser Beispiel mit dem Link an. Wir könnten das auch wie folgt schreiben, wenn wir nur das <code>href</code>-Attribut benutzen:</p>

<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;Lieblingswebseite&lt;/a&gt;</pre>

<p>Wenn wir aber das <code>title</code>-Attribut hinzufügen, dann funktioniert es so nicht mehr:</p>

<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=Die Mozilla Webseite&gt;Lieblingswebseite&lt;/a&gt;</pre>

<p>An diesem Punkt wird der Browser diesen Code falsch lesen und in dem <code>title</code>-Attribut drei separate Attribute sehen: ein <code>title</code>-Attribut mit dem Wert <code>"Die"</code> und zwei Boolsche Attribute, <code>Mozilla</code> und <code>Webseite</code>. Dies ist nicht was wir gewollt haben und der Fehler führt zu unerwünschtem Verhalten, siehe unten. Versuchen Sie mit dem Mauszeiger über dem Link zu fahren, um zu sehen was der Titeltext ist.</p>

<p>{{ EmbedLiveSample('Anfuehrungszeichen_um_Attributwerte_weglassen', 700, 100) }}</p>

<p>Unser Rat ist es, immer die Anführungszeichen um Attrbiutwerte zu setzen, damit Sie solche Probleme vermeiden können und besser lesbaren Code schreiben.</p>

<h3 id="Einfache_oder_doppelte_Anführungszeichen">Einfache oder doppelte Anführungszeichen?</h3>

<p>In diesem Artikel sind alle Attributwerte in doppelte Anführungszeichen eingepackt. Sie werden woanders aber eventuell sehen, das Leute anstattdessen einfache Anführungszeichen benutzen. Es ist egal welche Sorte Anführungszeichen genutzt wird, Sie können das machen wie Sie möchten. Beide der folgenden Zeilen sind äquivalent:</p>

<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;Ein Link als Beispiel.&lt;/a&gt;

&lt;a href='http://www.example.com'&gt;Ein Link als Beispiel.&lt;/a&gt;</pre>

<p>Sie sollten die Anführungszeichen aber nicht miteinander mischen. Die folgende Zeile ist falsch!</p>

<pre class="brush: example-bad html notranslate">&lt;a href="http://www.example.com'&gt;Ein Link als Beispiel.&lt;/a&gt;</pre>

<p>Wenn Sie eine Sorte Anführungszeichen benutzen, können Sie die andere Sorte innerhalb dieser benutzen:</p>

<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Ist's nicht lustig?"&gt;Ein Link als Beispiel.&lt;/a&gt;</pre>

<p>Wenn Sie die selbe Sorte Anführungszeichen innerhalb benutzen wollen, dann müssen Sie<a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_including_special_characters_in_HTML"> HTML entities</a> nutzen.</p>

<h3 id="Aufbau_eines_HTML-Dokumentes">Aufbau eines HTML-Dokumentes</h3>

<p>Jetzt wissen Sie wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um ein funktionierendes HTML-Dokument aufzubauen. Schauen Sie sich diesen Code an:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Meine Testseite&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Dies ist meine Webseite.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Hier haben wir:</p>

<ul>
 <li><code>&lt;!DOCTYPE html&gt;</code> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.</li>
 <li><code>&lt;html&gt;&lt;/html&gt;</code> — das <code>&lt;html&gt;</code> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet</li>
 <li><code>&lt;head&gt;&lt;/head&gt;</code> — das <code>&lt;head&gt;</code> Element. In dieses Element ist alles eingeschlossen, was <em>nicht</em> auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.</li>
 <li><code>&lt;body&gt;&lt;/body&gt;</code> — das <code>&lt;body&gt;</code> Element. Dies beinhaltet <em>alles</em>, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.</li>
 <li><code>&lt;meta charset="utf-8"&gt;</code> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf <code>utf-8</code>, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.</li>
 <li><code>&lt;title&gt;&lt;/title&gt;</code> — Dies setzt den Titel der Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.</li>
</ul>

<h3 id="Aktives_Lernen_Fügen_Sie_mehr_Inhalte_in_das_HTML_Dokument_ein">Aktives Lernen: Fügen Sie mehr Inhalte in das HTML Dokument ein</h3>

<p>Wenn Sie lokal, auf Ihrem Computer, das Beispiel ausprobieren möchten, dann tun Sie folgendes:</p>

<ol>
 <li>Kopieren Sie das obige HTML-Dokument.</li>
 <li>Erstellen Sie eine neue leere Datei in Ihrem Texteditor.</li>
 <li>Fügen Sie den Code in die leere Datei ein.</li>
 <li>Speichern Sie die Datei unter dem Namen index.html.</li>
</ol>

<div class="note">
<p><strong>Notiz</strong>: Sie können dieses HTML-Grundgerüst auch im <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repository</a> finden.</p>
</div>

<p>Sie können die Datei nun in einem Webbrowser öffnen, um zu sehen wie die Webseite aussieht. Dann können Sie den HTML-Code editieren und die Datei speichern. Wenn Sie dann die Datei im Browser neu laden, sehen Sie die Veränderungen. Am Anfang sieht die Webseite im Browser so aus:</p>

<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Diese Übung können Sie also lokal auf Ihrem Computer durchführen, wie oben beschrieben, oder Sie können die Übung mit unserem editierbaren Beispiel unten machen (das editierbare Fenster repräsentiert nur den Inhalt des {{htmlelement("body")}}-Elements). In der Übung sollen Sie die folgenden Dinge auf Ihrer Webseite implementieren:</p>

<ul>
 <li>Fügen Sie direkt unter dem öffnenden Tag des {{htmlelement("body")}}-Elements eine Überschrift ein. Dieser sollte ein <code>&lt;h1&gt;</code>-Tag vorangestellt sein und ein <code>&lt;/h1&gt;</code>-Tag hintenan stehen.</li>
 <li>Schreiben Sie in den Absatz (<code>&lt;p&gt;</code>) etwas Text über etwas, das Sie interessiert.</li>
 <li>Lassen Sie wichtige Wörter in fetter Schrift erscheinen, indem Sie das <code>&lt;strong&gt;</code>-Element benutzen.</li>
 <li>Fügen Sie einen Link (<code>&lt;a&gt;</code>) innerhalb des Absatzes hinzu.</li>
 <li>Fügen Sie ein Bild (<code>&lt;img&gt;</code>) hinzu, direkt unter dem Absatz. Sie bekommen einen Bonuspunkt, wenn Sie es schaffen zu einem anderen Bild zu verlinken (entweder lokal auf ihrem Computer oder irgendwo im Internet.)</li>
</ul>

<p>Wenn Sie einen Fehler machen können Sie das <em>Input</em>-Feld jederzeit mit dem <em>Reset</em>-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p>

<div class="hidden">
<h6 id="Playable_code4">Playable code4</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;
&amp;lt;p&amp;gt;Dies ist meine Webseite.&amp;lt;/p&amp;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 notranslate">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

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

img {
  max-width: 100%;
}

.output {
  overflow: auto;
}

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

<pre class="brush: js notranslate">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;Ich spiele gerne &lt;strong&gt;Schlagzeug&lt;/strong&gt;. Einer meiner Lieblingsschlagzeugspieler ist Neal Peart, welcher\
 in der Band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt; spielt.\
 Mein Lieblingsalbum von Rush ist zur Zeit &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\
&lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
  drawOutput();
});

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

<p>{{ EmbedLiveSample('Playable_code4', 700, 600) }}</p>

<h3 id="Leerraum_in_HTML">Leerraum in HTML</h3>

<p>In dem obigen Beispiel werden Sie bemerkt haben, dass eine Menge Leerraum (engl.: Whitespace) dabei ist. Dies ist nicht notwendig. Die beiden folgenden Codestücke sind äquivalent:</p>

<pre class="brush: html notranslate">&lt;p&gt;Hunde sind komisch.&lt;/p&gt;

&lt;p&gt;Hunde        sind
         komisch.&lt;/p&gt;</pre>

<p>Egal wieviel Leerraum sie benutzen (Leerraum sind Leerzeichen, aber auch Zeilenumbrüche), der HTML Parser wird den Leerraum immer zu einem einzigen Leerzeichen zusammenlegen, wenn die Webseite im Browser geladen wird. Wieso sollte man also so viel Leerraum benutzen? Die Antwort ist Lesbarkeit - es ist viel einfacher zu verstehen, was in einem Stück Code vor sich geht, wenn dieser schön formattiert ist und nicht alles ein zusammenhängender Klumpen ist.  In unserem HTML-Code haben wir jedes Element das in einem anderen Element steht mit zwei Leerzeichen weiter eingerückt.  Sie können selbst entscheiden, wie genau Sie Ihren Code formattieren (z. B. wieviele Leerzeichen Sie zum Einrücken benutzen), aber Sie sollten den Code selber gut lesen können.</p>

<h2 id="Zeichenreferenzen_für_Sonderzeichen">Zeichenreferenzen für Sonderzeichen</h2>

<p>In HTML sind die Zeichen <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> und <code>&amp;</code> spezielle Zeichen, da sie Teil der HTML Syntax sind. Wie kann man diese also im ausgegebenen Text benutzen, ohne dass diese als Teil des Markups interpretiert werden?</p>

<p>Wir müssen hier Zeichenreferenzen benutzen — spezielle Codes, welche einzelne Zeichen repräsentieren und welche in diesen Fällen genutzt werden können. Jede Zeichenreferenz wird mit einem Und-Zeichen (&amp;) gestartet und mit einem Semikolon (;) beendet.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Ausgegebener Character</th>
   <th scope="col">Zeichenreferenz</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>&lt;</td>
   <td>&amp;lt;</td>
  </tr>
  <tr>
   <td>&gt;</td>
   <td>&amp;gt;</td>
  </tr>
  <tr>
   <td>"</td>
   <td>&amp;quot;</td>
  </tr>
  <tr>
   <td>'</td>
   <td>&amp;apos;</td>
  </tr>
  <tr>
   <td>&amp;</td>
   <td>&amp;amp;</td>
  </tr>
 </tbody>
</table>

<p>In dem untenstehenden Beispiel können Sie einen Absatz sehen, in dem über Webtechnologien geschreiben wird:</p>

<pre class="brush: html notranslate">&lt;p&gt;In HTML definieren Sie einen Absatz mit dem &lt;p&gt;-Element.&lt;/p&gt;

&lt;p&gt;In HTML definieren Sie einen Absatz mit dem &amp;lt;p&amp;gt;-Element.&lt;/p&gt;</pre>

<p>In dem Live-Output sieht man, dass der erste Absatz falsch dargestellt wird, weil der Browser den Tag nicht wie gewünscht anzeigt, sondern als Beginn eines neuen Absatzes interpretiert. Der zweite Absatz wird durch die Zeichenreferenzen korrekt dargestellt.</p>

<p>{{ EmbedLiveSample('Charakter-Referenz_Spezielle_Charaktere_in_HTML', 700, 200) }}</p>

<div class="note">
<p><strong>Notiz</strong>: Eine Tabelle mit allen möglichen HTML Charakter-Referenzen kann auf Wikipedia gefunden werden: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
</div>

<h2 id="HTML_Kommentare">HTML Kommentare</h2>

<p>In HTML, wie auch in den meisten anderen Programmiersprachen, kann man Kommentare schreiben. Kommentare schreibt man in den Code, diese werden aber vom Browser ignoriert und somit unsichtbar für Benutzer der Webseite. Mit Kommentaren kann man als Entwickler des Codes, diesen für sich selbst und andere leichter verständlich machen. Besonders am Anfang ist es sinnvoll sich mit Kommentaren Anmerkungen zu dem geschriebenen Code zu machen, um später nachvollziehen zu können, was ein bestimmtes Stück Code bewirkt. Sie möchen Ihren Code ja auch noch verstehen nachdem Sie mehrere Monate nichts daran gemacht haben, oder dass ein Mitarbeiter ihren Code verstehen kann.</p>

<p>Um einen Abschnitt in Ihrem HTML-Dokument zu einem Kommentar zu machen, schließen Sie diesen in die speziellen Marker <code>&lt;!--</code> und <code>--&gt;</code> ein, zum Beispiel:</p>

<pre class="brush: html notranslate">&lt;p&gt;Ich bin nicht in einem Kommentar&lt;/p&gt;

&lt;!-- &lt;p&gt;Ich bin in einem Kommentar und werde auf der Webseite nicht angezeigt!&lt;/p&gt; --&gt;</pre>

<p>Wie Sie unten erkennen können, wird der erste Absatz dargestellt, der zweite aber nicht.</p>

<p>{{ EmbedLiveSample('HTML_Kommentare', 700, 100) }}</p>

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

<p>Sie haben das Ende des Artikels erreicht und wir hoffen es hat Ihnen etwas Spaß gemacht bei uns die Grundlagen von HTML zu erlernen!  An diesem Punkt sollten Sie verstehen, wie diese Sprache aussieht, wie sie funktioniert und in der Lage sein einige Elemente und Attribute zu benutzen. In weiterfürhenden Artikeln aus diesem Modul werden wir einige der Dinge, die Sie hier gelernt haben wieder aufgreifen und uns im Detail anschauen, aber auch neue Möglichkeiten dieser Sprache entdecken. Bleiben Sie dabei!</p>

<div class="note">
<p><strong>Notiz</strong>: Nun, da Sie dabei sind mehr über HTML zu lernen, möchten Sie vielleicht auch schon einmal in die Grundlagen von Cascading Style Sheets, kurz <a href="/de/docs/Learn/CSS">CSS </a>hineinstöbern. CSS ist die Sprache mit der wir unseren Webseiten einen bestimmten Stil geben. Zum Beispiel lassen sich mit CSS die Farben auf der Webseite ändern. HTML und CSS arbeiten Hand in Hand, wie Sie bald entdecken werden.</p>
</div>

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