Zum Hauptinhalt springen

HTML - Grundlagen

HTML steht für Hypertext Markup Language. Sie ist das Fundament fast jeder Webseite im Internet.

HTML wurde von Tim Berners-Lee in den frühen 1990er Jahren am Forschungszentrum CERN entwickelt.

Wie HTML funktioniert: Die Tags​

In einer HTML-Datei werden Texte von speziellen Kürzeln in spitzen Klammern umgeben, den sogenannten Tags. Ein Tag gibt einem Textabschnitt eine feste Bedeutung (eine „Rolle").

Meistens treten Tags paarweise auf:

  • <h1> ... </h1>: Kennzeichnet eine Hauptüberschrift (Heading 1).
  • <p> ... </p>: Kennzeichnet einen Textabsatz (Paragraph).

Die Aufgabe von HTML ist es, eine Struktur zu erzeugen. Was ist eine Überschrift? Wo beginnt ein Absatz? Wo liegt ein Link? Wie die Webseite gestaltet ist, also welche Farben, Schriftgrößen oder ähnliches verwendet werden, wird in einer CSS-Datei festgelegt. Diese Trennung zwischen dem Inhalt und dem Aussehen ist typisch für die Informatik.

Ein Browser (z.B. Firefox oder Chrome) liest den HTML-Code von oben nach unten und setzt die Tags in die grafische Darstellung um, die auf dem Bildschirm erscheint.

Die erste Webseite​

Das folgende Beispiel zeigt, wie eine HTML-Datei aufgebaut ist. Jede HTML-Datei beginnt mit <!DOCTYPE html> – das ist kein Tag, sondern eine Deklaration, die dem Browser mitteilt, dass es sich um modernes HTML5 handelt.

Anschließend folgt das <head>-Element mit Metadaten: unsichtbare Informationen für den Browser, z. B. die Zeichencodierung <meta charset="UTF-8"> oder der Seitentitel <title>. Das Attribut lang="de" im öffnenden <html>-Tag teilt dem Browser die Sprache der Seite mit. Der eigentliche sichtbare Inhalt steht im <body> ... </body>-Tag. Der Live-Editor erzeugt sofort eine Webseite. Verändere den Inhalt und schau dir an, was passiert.

<!-- Metadaten der Webseite -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Wie funktioniert das Internet?</title>
</head>

<!-- Sichtbarer Inhalt der Webseite -->
<body>
    <h1>Das Internet erklärt</h1>
    <p>Das Internet ist kein einzelner Computer, sondern ein weltweites <strong>Netzwerk aus Millionen von Computern</strong>, die alle miteinander verbunden sind.</p>
</body>
</html>

Die Struktur-Tags bilden das Grundgerüst eines HTML-Dokuments. Sie erzeugen keinen sichtbaren Inhalt:

Einige Tags sind selbstschließend (void elements). Sie treten nicht paarweise auf, weil sie keinen Inhalt umschließen: <meta>, <link>, <img>, <br>, <hr>
TagBedeutung
<!DOCTYPE html>Deklaration am Dateianfang – teilt dem Browser mit, dass es HTML5 ist
<html>Das Wurzelelement – umschließt das gesamte HTML-Dokument
<head>Enthält Metadaten und Ressourcen (nicht sichtbar)
<title>Seitentitel im Browser-Tab
<meta>Metadaten wie Zeichensatz oder Sprache (selbstschließend)
<body>Sichtbarer Inhalt der Seite

Mit anderen Tags lassen sich hingegen Überschriften, Aufzählung und Texte festlegen. Im obigen Beispiel wurden nicht alle Tags verwendet. Probiere die Tags aus, um zu sehen, was sie bewirken.

TagBedeutung
<h1> ... </h1>Überschriften (heading) in absteigender Hierarchie bis <h6>
<p> ... </p>Textabsatz (Paragraph). Gliedert einen Text.
<ul> ... </ul>Ungeordnete Liste
<ol> ... </ol> Geordnete (nummerierte) Liste
<li> ... </li>Listenelement. Nur innerhalb einer Liste.
<strong> ... </strong>Fettschrift (semantisch wichtig)
<em> ... </em>Kursivschrift (semantische Betonung)
<br>Zeilenumbruch (break)
<hr>Horizontale Trennlinie (horizontal rule)
Training

  1. Schau dir das folgende HTML-Schnipsel an und beantworte die Fragen:

    <body>
      <h1>Rezepte der Welt</h1>
      <p>Hier findest du einfache Rezepte aus verschiedenen Ländern.</p>
      <h2>Zutaten für Pasta</h2>
      <ol>
        <li>200 g Nudeln</li>
        <li>2 Tomaten</li>
        <li>Salz und Pfeffer</li>
      </ol>
      <p>Guten Appetit! <br> Viel Spaß beim Kochen.</p>
    </body>
    1. Welche Tags kommen vor? Benenne jeden Tag und erkläre kurz seine Aufgabe.
    2. Warum wird hier <ol> statt <ul> verwendet? Erkläre beide.
    3. Erläutere, wie <li> korrekt verwendet wird.
    4. <br> ist ein selbstschließender Tag. Erkläre, warum er kein schließendes Tag braucht.

  1. Im folgenden HTML-Code haben sich vier Fehler versteckt. Finde und erkläre jeden:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Meine Webseite<title>
    </head>
    <body>
      <h1>Willkommen</h1>
      <p>Das ist mein erster <strong>Webauftritt.</p></strong>
      <p>Schön, dass du da bist!
      <ul>
        <li>Punkt 1</li>
        <li>Punkt 2</li>
      </ul>
    </body>

  1. Erkläre in eigenen Worten den Unterschied zwischen den folgenden Tag-Paaren. Gib jeweils ein eigenes Beispiel an:

    Tag-PaarWann verwendet man ihn?
    <strong> vs. <em>?
    <ul> vs. <ol>?
    <head> vs. <body>?
    <h1> vs. <p>?

Links / Quellen​