Grundlagen von HTML

Wie ist ein HTML-Dokument strukturiert?

Das Grundgerüst und der DOM-Baum

HTML (Hypertext Markup Language) ist keine Programmiersprache mit eigener Logik, sondern eine Auszeichnungssprache. Sie definiert die Struktur und den Inhalt einer Webseite. Wie du in der zugehörigen Grafik erkennen kannst, ordnen sich alle HTML-Elemente in einer strengen, verschachtelten Hierarchie an. Diese Baumstruktur nennen wir den DOM-Baum (Document Object Model).

Ein minimales, korrektes HTML-Dokument besteht immer aus diesen Kernkomponenten:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine erste Seite</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist mein erster Inhalt.</p>
  </body>
</html>

<!DOCTYPE html>: Diese Deklaration steht ganz oben und teilt dem Browser mit, dass es sich um modernes HTML5 handelt.
<html>: Das Wurzelelement (Root), das den gesamten Code umschließt.
<head>: Der unsichtbare "Kopf" der Seite. Hier stehen Metadaten für den Browser und Suchmaschinen (z. B. der Seitentitel <title>).
<body>: Der sichtbare "Körper". Alles, was hier steht, wird den Nutzer:innen im Browserfenster angezeigt.

Strukturelle Elemente für das Layout

Moderne HTML-Tags sind mehr als nur unsichtbare Container; sie verleihen dem Inhalt eine semantische Bedeutung. Das hilft Suchmaschinen, die Seite zu verstehen, und ist essenziell für die Barrierefreiheit (z. B. für Screenreader, die von sehbehinderten Menschen genutzt werden).

Um eine Seite in logische Bereiche zu gliedern, klassifizieren wir folgende strukturelle Elemente:

<header>: Der Kopfbereich einer Seite oder eines Abschnitts, oft genutzt für Logos oder Einleitungen.
<nav>: Der Container für die Hauptnavigation (Menülinks).
<section>: Ein thematisch zusammengehöriger Abschnitt innerhalb der Seite.
<footer>: Der Fußbereich, typischerweise für Copyright-Hinweise oder das Impressum.

Text semantisch formatieren

Neben der groben Struktur müssen auch die eigentlichen Textelemente semantisch korrekt ausgezeichnet werden. So weiß der Browser, wie wichtig ein bestimmter Textabschnitt ist:

<h1> bis <h6>: Überschriften (Headings). <h1> ist die Hauptüberschrift und sollte nur einmal pro Seite vorkommen, <h6> ist die kleinste Unterüberschrift.
<p>: Ein regulärer Textabsatz (Paragraph).
<strong>: Markiert besonders wichtigen Text (wird vom Browser standardmäßig fett dargestellt).
<em>: Markiert betonten Text (Emphasis, wird standardmäßig kursiv dargestellt).

Grundlagen von HTML — dec-software-engineering-application-development-web-frontend-basics-of-html_page1.svg

Wie verhalten sich Elemente und wie binden wir Medien ein?

Block-Elemente: Volle Breite voraus

Ein fundamentales Konzept für das Layout in HTML ist das Verhalten von Elementen im Dokumentenfluss. Die erste große Gruppe sind die Block-Elemente.

Ein Block-Element beansprucht immer die volle verfügbare Breite seines Eltern-Elements. Es erzwingt automatisch einen Zeilenumbruch vor und nach sich. Stell dir Block-Elemente wie Kisten vor, die vertikal übereinandergestapelt werden.

Typische Vertreter: <p>, <h1> bis <h6>, <ul> (Listen).
Der universelle Container: Das <div>-Tag (Division) ist ein Block-Element ohne eigene semantische Bedeutung. Es wird von Entwickler:innen extrem häufig genutzt, um mehrere Elemente für das Styling mit CSS zu gruppieren.

Inline-Elemente: Fließend im Text

Die zweite Gruppe sind die Inline-Elemente. Sie verhalten sich wie Teamplayer: Sie nehmen nur exakt so viel Platz ein, wie ihr Inhalt benötigt, und verursachen keinen Zeilenumbruch. Sie fließen nahtlos im Text mit.

Typische Vertreter: <strong>, <em>, <a> (Links), <img> (Bilder).
Der universelle Textcontainer: Das <span>-Tag ist das Inline-Gegenstück zum <div>. Es hat keine semantische Bedeutung und wird genutzt, um kleine Textteile innerhalb eines Blocks (z. B. für farbliche Hervorhebungen) zu markieren.

<!-- Block-Elemente stehen untereinander -->
<div>
  <p>Dies ist ein Absatz. Er nimmt die volle Breite ein.</p>
</div>

<!-- Inline-Elemente stehen nebeneinander -->
<p>In diesem Text ist ein <span>Wort</span> speziell markiert, ohne den Lesefluss zu brechen.</p>

Hyperlinks: Das Web verknüpfen

Das "Hypertext" in HTML steht für die Fähigkeit, Dokumente miteinander zu verknüpfen. Dafür nutzen wir das Anker-Tag <a>.

Damit der Link funktioniert, musst du das Attribut href (Hypertext Reference) setzen. Es gibt das Ziel an – das kann eine absolute URL (z. B. zu einer anderen Website) oder ein relativer Pfad (zu einer Unterseite deines eigenen Projekts) sein.

<a href="https://www.ihk.de">Hier geht es zur IHK</a>
<a href="/kontakt.html">Zum Kontaktformular</a>

Medien: Bilder und Videos sichtbar machen

Bilder und Videos werden nicht direkt in den HTML-Code geschrieben, sondern über Dateipfade referenziert. Sie gehören zur Kategorie der Medien-Elemente.

Bilder (<img>): Das Attribut src (Source) gibt den Pfad zur Bilddatei an. Zwingend erforderlich ist das Attribut alt (Alternativtext). Es beschreibt das Bild für blinde Menschen oder wird angezeigt, falls das Bild nicht geladen werden kann. Das <img>-Tag ist selbstschließend.
Videos (<video>): Auch hier nutzt du das src-Attribut. Fügst du das Attribut controls hinzu, blendet der Browser automatisch Steuerelemente wie Play, Pause und Lautstärke für die Nutzer:innen ein.

<!-- Ein Bild mit korrekter Quelle und Alternativtext -->
<img src="bilder/serverraum.jpg" alt="Ein klimatisierter Serverraum mit mehreren Racks">

<!-- Ein Video mit sichtbaren Steuerelementen -->
<video src="videos/tutorial.mp4" controls></video>

Teste dein Wissen

Du erstellst eine neue Landingpage für deine Kundschaft. In der ersten Zeile deines Codes schreibst du <!DOCTYPE html>. Welchen Zweck erfüllt diese Zeile?