Was ist HTML?

HTML steht für HyperText Markup Language, auf Deutsch „Hypertext-Auszeichnungssprache". Es ist die Standardsprache zum Erstellen und Strukturieren von Inhalten im Web. HTML verwendet ein System von Elementen, die durch Tags dargestellt werden, um Überschriften, Absätze, Links, Bilder, Formulare und andere Inhalte zu definieren. Jede Seite, die Sie im Browser besuchen, basiert auf HTML — es ist das Skelett des Webs.

Geschichte

HTML wurde 1991 von Tim Berners-Lee entwickelt, um Dokumente über das entstehende World Wide Web zu teilen. Seitdem hat HTML mehrere wichtige Versionen durchlaufen: HTML 2.0 (1995), HTML 4.01 (1999), XHTML (2000) und schließlich HTML5, das 2014 vom W3C und WHATWG standardisiert wurde und als aktueller lebender Standard bestehen bleibt.

Grundlegende Syntax

Ein HTML-Dokument besteht aus verschachtelten Elementen. Jedes Element besteht aus einem öffnenden Tag, Inhalt und einem schließenden Tag. Einige Elemente sind selbstschließend (Void-Elemente) und benötigen kein schließendes Tag. Tags können Attribute tragen, die zusätzliche Informationen oder Verhalten bereitstellen.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Dies ist ein <a href="https://beispiel.de">Link</a>.</p>
    <img src="foto.jpg" alt="Ein Foto" />
  </body>
</html>

Kernkonzepte

• DOCTYPE — <!DOCTYPE html> teilt dem Browser mit, dass dies ein HTML5-Dokument ist. Immer die erste Zeile.
• Element — Der Grundbaustein: öffnendes Tag, Inhalt und schließendes Tag. Beispiel: <p>Hallo</p>
• Void-Element — Selbstschließende Elemente ohne Inhalt: <img>, <br>, <input>, <meta>, <link>
• Attribut — Zusätzliche Informationen im öffnenden Tag: <a href="/seite">, <img alt="Beschreibung">
• Verschachtelung — Elemente müssen korrekt verschachtelt sein; ein Kindelement muss vor seinem Elternelement geschlossen werden
• Head — Enthält Metadaten: Titel, Zeichensatz, Viewport, CSS-Links, Skripte
• Body — Enthält alle sichtbaren Seiteninhalte

Semantische HTML5-Elemente

HTML5 führte semantische Elemente ein, die Bedeutung statt Darstellung beschreiben. Sie helfen Browsern, Suchmaschinen und Hilfstechnologien, Ihren Inhalt zu verstehen:

• <header> — Einleitender Inhalt oder Navigation für eine Seite oder einen Abschnitt
• <nav> — Eine Gruppe von Navigationslinks
• <main> — Der Hauptinhalt des Dokuments (nur einmal pro Seite)
• <section> — Eine thematische Inhaltsgruppe mit einer Überschrift
• <article> — Ein in sich geschlossener Inhalt (Blogbeitrag, Nachrichtenartikel)
• <aside> — Inhalt, der thematisch mit dem Hauptinhalt verwandt ist (Seitenleiste)
• <footer> — Fußzeile für eine Seite oder einen Abschnitt
• <figure> / <figcaption> — Ein Bild oder Diagramm mit optionaler Bildunterschrift

Häufige Tags Referenz

• Überschriften — <h1> bis <h6> — nur ein <h1> pro Seite verwenden
• Absatz — <p>
• Link — <a href="url">Text</a>
• Bild — <img src="url" alt="Beschreibung">
• Listen — <ul> (ungeordnet), <ol> (geordnet), Einträge mit <li>
• Tabelle — <table>, <tr>, <th>, <td>
• Formular — <form>, <input>, <textarea>, <button>, <select>
• Div / Span — <div> (Block), <span> (Inline) — generische Container
• Fett / Kursiv — <strong> (wichtig), <em> (Betonung)
• Code — <code> (Inline), <pre> (vorformatierter Block)

HTML vs. CSS vs. JavaScript

Die drei Kerntechnologien des Webs haben jeweils eine eigene Rolle:

• HTML — Struktur und Inhalt. Definiert, was auf der Seite ist.
• CSS — Darstellung. Steuert Farben, Schriftarten, Layout und Abstände.
• JavaScript — Verhalten. Fügt Interaktivität, Animationen und dynamische Aktualisierungen hinzu.

Eine Webseite ohne CSS ist schlicht, aber lesbar. Eine Webseite ohne JavaScript zeigt noch Inhalte an. Aber eine Webseite ohne HTML hat nichts anzuzeigen.

Barrierefreiheit Grundlagen

• Immer alt-Attribute zu Bildern hinzufügen — Screenreader verwenden sie
• Semantische Elemente statt generischer <div> überall verwenden
• Formularfelder mit <label for="id"> beschriften
• Sicherstellen, dass Überschriften einer logischen Hierarchie folgen (h1 → h2 → h3)
• Ausreichenden Farbkontrast zwischen Text und Hintergrund gewährleisten

Wichtige Regeln

• Immer mit <!DOCTYPE html> als erste Zeile beginnen
• HTML ist nicht case-sensitiv, aber Kleinbuchstaben-Tags sind konventionell
• Attributwerte müssen immer in Anführungszeichen stehen
• Void-Elemente (<img>, <br>, <input>) haben keine schließenden Tags
• Elemente korrekt verschachteln — Tags dürfen sich nie überlappen
• lang-Attribut am <html>-Element für Barrierefreiheit und SEO verwenden