path: root/files/de/learn/getting_started_with_the_web/html_basics/index.html

---
title: HTML-Grundlagen
slug: Learn/Getting_started_with_the_web/HTML_basics
tags:
  - Anfänger
  - Grundlagen
  - HTML
  - Internet
  - Lernen
  - Webentwicklung
  - Webseiten
translation_of: Learn/Getting_started_with_the_web/HTML_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>HTML (Hypertext Markup Language) ist der Code, welcher benötigt wird, um den Webinhalt zu strukturieren und ihm eine Bedeutung und einen Zweck zu geben. Zum Beispiel könnte Ihr Inhalt Absätze und Grafiken, aber auch Bilder und Tabellen enthalten. Wie der Titel dieses Artikels verspricht, soll Ihnen hier ein grundsätzliches Verständnis vermittelt werden, wie HTML eingesetzt wird.</p>
</div>

<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, dass der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, dass 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>(Content=Inhalt, Element=HTML-Element)</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>

<p>Elemente können auch Attribute enthalten, das 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 angezeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, um 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>"editor-note"</code>)</li>
</ol>

<h3 id="Verschachtelte_Elemente">Verschachtelte Elemente</h3>

<p>Sie können einzelne Elemente ineinander verschachteln. Wenn wir also besonders betonen wollen, dass unsere Katze <strong>sehr</strong> frech ist, können wir dieses einzelne Wort in einem {{htmlelement("strong")}} Element verpacken.</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>Folgendes Beispiel ist nicht richtig, da die Elemente nicht ineinander verschachtelt sind, sondern ineinander verkettet. Das letzte Element, welches geöffnet wird, muss auch zuerst geschlossen werden.</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>Dies funktioniert wie mit Schachteln: Wenn die kleine Schachtel in der Großen ist, kann man auch nicht zuerst den großen Deckel schließen, bevor man den kleinen Deckel draufsetzt. Die einzelnen Elemente dürfen sich also nicht überlappen, sie dürfen nur ineinander stehen.</p>

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

<p>Gewisse Elemente haben keinen Inhalt, diese werden <strong>leere Elemente</strong> genannt. Beispielsweise das {{htmlelement("img")}} Element, welches wir schon in unserer HTML-Datei haben:</p>

<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="Mein Testbild"&gt;</pre>

<p>Dies beinhaltet zwei Attribute, aber es gibt kein schließendes <code>&lt;/img&gt;</code> Tag und keinen Inhalt in dem Element. Das <code>&lt;img&gt;</code> Tag braucht keinen Inhalt um einen Effekt zu haben. Es bindet ein Bild an der entsprechenden Stelle in der HTML Seite ein.</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 eine HTML Seite aufzubauen. Schauen wir den Code wieder an, welchen wir vorher in die <code>index.html</code>-Datei eingefügt haben (welche wir im Artikel "<a href="/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a>" erstellt haben):</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;img src="images/firefox-icon.png" alt="Mein Testbild"&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>

<h2 id="Bilder">Bilder</h2>

<p>Schauen wir jetzt unser Bild-Element nochmals an:</p>

<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="Mein Testbild"&gt;</pre>

<p>Wie wir vorher gesagt haben, ist ein Bild an der Stelle unserer Seite eingebettet, wo es erscheint. Es tut dies mit dem <code>{{htmlattrdef("src")}}</code> (src ist Abkürzung für engl.: "source" = deutsch: "Quelle") Attribut, welches den Pfad unseres Bildes beinhaltet.</p>

<p>Aber wir haben auch einen <code>{{htmlattrdef("alt")}}</code> (alternative) Befehl, welcher einen Text anzeigt, falls das Bild nicht angezeitg werden kann. Dies ist nützlich für:</p>

<ol>
 <li>Sehbehinderte. Diese haben häufig Programme, welche ihnen den alternativen Text vorlesen.</li>
 <li>Wenn es einen Fehler im Code gibt, was bedeutet, dass das Bild nicht angezeigt werden kann. Verändern Sie beispielsweise den Code bei <code>{{htmlattrdef("src")}}</code> und speichern ihn ab. Öffnen Sie das Dokument dann mit dem Browser. Jetzt sollte statt dem Bild folgende Meldung angezeigt werden:</li>
</ol>

<p><img alt="" src="Ein Kleiner Test"></p>

<p>Dieser alternative Satz sollte dem Leser eine Informationen geben, damit er sich vorstellen kann, was auf dem Bild angezeigt ist. Dieser Beispielsatz ist also nicht so gut. Viel besser wäre die Beschreibung "Das Firefox-Logo: Ein brennender Fuchs, welcher die Erde umkreist."</p>

<p><strong>Schreiben Sie jetzt einen besseren Alternativtext für Ihr Bild.</strong></p>

<div class="note">
<p><strong>Hinweis</strong>: Finden Sie mehr über Zugänglichkeit unter <a href="/de/docs/Web/Accessibility">MDN's Accessibility landing page</a> heraus.</p>
</div>

<h2 id="Textdarstellung">Textdarstellung</h2>

<p>Diese Lektion enthält ein paar HTML Grundlagen, welche man benötigt, um Text darzustellen.</p>

<h3 id="Überschriften">Überschriften</h3>

<p>Mit Überschriftelementen können Sie bestimmte Teile des Inhaltes als Überschrift deklarieren. Wie ein Buch einen Hauptitel und Kapitelüberschriften haben kann, können HTML-Dokumente eine Hauptüberschrift" und weitere Überschriften haben.</p>

<p>HTML besitzt 6 Überschrifttypen, wobei meist nur 3-4 gebraucht werden:  {{htmlelement("h1")}}–{{htmlelement("h6")}}</p>

<pre class="brush: html notranslate">&lt;h1&gt;Meine Hauptüberschrift&lt;/h1&gt;
&lt;h2&gt;Meine Top-Level Unterüberschrift&lt;/h2&gt;
&lt;h3&gt;Meine Unterüberschrift&lt;/h3&gt;
&lt;h4&gt;Meine weitere Unterüberschrift&lt;/h4&gt;</pre>

<p>Probieren Sie nun einen geeigneten Titel in Ihre HTML-Seite einzufügen, direkt über dem {{htmlelement("img")}} Element.</p>

<h3 id="Absätze">Absätze</h3>

<p>Wie oben erklärt benutzt man {{htmlelement("p")}}, Elemente um Absätze zu erstellen. Sie werden diese oft benutzen, um Texte zu strukturieren.</p>

<pre class="brush: html notranslate">&lt;p&gt;Dies ist ein Absatz (p ist Abkürzung für engl.:"Paragraph")&lt;/p&gt;</pre>

<p><strong>Ergänzen Sie Ihren Beispieltext (Sie sollten sich den Textinhalt beim Planen der Webseite überlegt haben: <a href="/de/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Wie sollte Ihre Website aussehen?</em></a>) in einem oder mehreren Absätzen direkt unter Ihrem </strong> {{HTMLElement("img")}} <strong> (Bildelement).</strong></p>

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

<p>Viele Webseiten enthalten Listen , deshalb hält HTML dafür Elemente bereit. Die Kennzeichnung von Listen besteht immer aus zwei Elementen. Man unterscheidet geordnete und ungeordnete Listen.</p>

<ol>
 <li><strong>Ungeordnete Listen </strong>sind Listen, bei denen die Reihenfolge der Gegenstände keine Rolle spielt, wie eine Einkaufsliste. Diese werden eingehüllt von einem  {{htmlelement("ul")}} Element.</li>
 <li><strong>Geordnete Listen </strong>werden verwendet, wenn die Reihenfolge der Bestandteile wichtig ist, wie bei einem Rezept. Diese werden eingehüllt von einem {{htmlelement("ol")}} Element.</li>
</ol>

<p>Jeder Gegenstand der Liste wird einzeln in ein {{htmlelement("li")}} Listen-Element gepackt.</p>

<p>Wenn wir zum Beispiel die einzelnen Teile dieses Absatzes in eine geeignete Liste verwandeln wollen:</p>

<pre class="brush: html notranslate">&lt;p&gt;Hier bei Mozilla sind wir eine globale Gemeinschaft aus Entwicklern, Vorausdenkern, Erschaffern, welche zusammen daran arbeiten...&lt;/p&gt;</pre>

<p>Könnten wir das so machen:</p>

<pre class="brush: html notranslate">&lt;p&gt;Hier bei Mozilla sind wir eine globale Gemeinschaft aus&lt;/p&gt;


&lt;ul&gt;
  &lt;li&gt;Entwicklern&lt;/li&gt;
  &lt;li&gt;Vorausdenkern&lt;/li&gt;
  &lt;li&gt;Erschaffern&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;welche zusammen daran arbeiten ... &lt;/p&gt;</pre>

<p><strong>Probieren Sie eine geordnete oder ungeordnete Liste in Ihre Beispielseite einzufügen.</strong></p>

<h2 id="Links">Links</h2>

<p>Links sind sehr wichtig — sie sind, was das Internet EIN NETZ macht. Um einen Link zu implementieren, müssen wir ein einfaches Element — {{htmlelement("a")}} — verwenden. Das <em>a</em> ist die Kurzform für "Anker" (engl. "anchor"). Um einen Text innerhalb des Absatzes in einen Link zu verwandeln, führen Sie folgenden Schritte durch:</p>

<ol>
 <li>Suchen Sie einen Text aus. Wir benutzen in unserem Beispiel "Mozilla Manifesto".</li>
 <li>Betten Sie den Text in ein <code>&lt;a&gt;</code>-Element ein:
  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
 </li>
 <li>Geben Sie dem <code>&lt;a&gt;</code>-Element ein <code>href</code>-Attribut:
  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
 </li>
 <li>Füllen Sie für den Wert des Attributs die Internetadresse ein, auf die Sie verlinken wollen:
  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
 </li>
</ol>

<p>Es kann sein, dass Sie komische Ergebnisse bekommen, wenn Sie <code>https://</code> oder <code>http://</code> , genannt <em>Protokoll</em>, vergessen. Überprüfen Sie deshalb immer nachdem Sie den Link gesetzt haben, ob er wie gewünscht funktioniert.</p>

<div class="note">
<p><code>{{htmlattrdef("href")}}</code> mag sich etwas komisch für einen Attributnamen anhören. Wenn Sie Probleme haben sich an den Namen zu erinnern, merken Sie sich, dass es die Kurzform von <em><strong>H</strong>ypertext <strong>Ref</strong>erenz (engl. <strong>h</strong>ypertext <strong>ref</strong>erence</em>) ist.</p>
</div>

<p><strong>Fügen Sie jetzt einen Link Ihrer Seite hinzu, falls Sie es noch nicht getan haben.</strong></p>

<h2 id="Ergebnis">Ergebnis</h2>

<p>Wenn Sie allen Anweisungen in diesem Artikel gefolgt sind, sollten Sie als Ergebnis eine Seite erhalten, die ähnlich wie diese aussieht (Sie können unsere Version davon auch <a href="http://mdn.github.io/beginner-html-site/">hier anschauen</a>):<br>
 <br>
 <img alt="Ein Screenshot einer Webseite, welche das Firefox-Logo enthält, Absätze und eine Liste" src="https://mdn.mozillademos.org/files/15469/beginner-html-site-de.jpg" style="border: 1px solid grey; display: block; height: 838px; margin: 0px auto; width: 716px;"></p>

<p>Wenn Sie nicht dasselbe Ergebnis haben und nicht wissen, wo das Problem liegt, können Sie Ihren Code mit dem <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">fertigen Code</a> auf Github vergleichen.</p>

<p>Hier haben wir nur an der Oberfläche von HTML gekratzt. Um mehr über HTML zu lernen, gehen Sie zu der <a href="/de/Learn/HTML">HTML-Lernseite</a>.</p>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>