HTML lernen: Aufbau, Elemente und die erste eigene Seite

Was HTML macht und was nicht

HTML steht für HyperText Markup Language. Die Sprache beschreibt, welche Rolle ein Inhalt auf einer Seite hat: Hauptüberschrift, Absatz, Listeneintrag, Link. Der Browser liest diese Auszeichnung und stellt den Inhalt entsprechend dar.

HTML ist eine Auszeichnungssprache, keine Programmiersprache: Es kennt keine Abläufe, Bedingungen oder Schleifen. Für das Aussehen ist CSS zuständig, für Interaktion JavaScript. Die Arbeitsteilung lautet: HTML strukturiert, CSS gestaltet, JavaScript reagiert auf Aktionen und verändert Inhalte. Wenn du noch überlegst, welche Sprache du danach lernst, hilft dir der Überblick Welche Programmiersprache lernen?.

Für technische Themen wie Suchmaschinenoptimierung ist eine saubere HTML-Struktur wichtig, weil sie Browsern und anderen Programmen hilft, Inhalte einzuordnen. Eine bessere Platzierung in Suchergebnissen garantiert sie allein nicht.

Das Grundgerüst einer HTML-Datei

Eine HTML-Datei besteht aus Elementen, die meist durch ein öffnendes und ein schließendes Tag in spitzen Klammern markiert sind. Dieses Grundgerüst ist dein Ausgangspunkt:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Willkommen</h1>
    <p>Das ist meine erste eigene Seite.</p>
  </body>
</html>

Die Zeilen haben folgende Aufgaben:

Die Einrückung ist für den Browser nicht nötig, macht die Verschachtelung für dich aber lesbar. Rücke einheitlich ein und achte darauf, dass zu jedem öffnenden Tag das passende schließende gehört.

Tags, Elemente und Attribute

Ein Tag ist die Auszeichnung in spitzen Klammern, etwa <p>. Ein Element umfasst das öffnende Tag, den Inhalt und das schließende Tag: <p>Ein Absatz.</p>. Das schließende Tag erkennst du am Schrägstrich vor dem Namen.

Attribute ergänzen ein Element um Angaben. Sie stehen im öffnenden Tag und bestehen aus Name und Wert:

<a href="seite.html">Mehr über die Seite</a>

Hier ist a das Link-Element, href das Attribut und seite.html sein Wert. Der sichtbare Linktext steht zwischen den Tags. Er sollte verraten, wohin der Link führt, statt nur „hier" zu sagen. Attributwerte setzt du immer in Anführungszeichen: MDN rät ausdrücklich dazu, weil fehlende Anführungszeichen in manchen Fällen das Markup zerbrechen.

Manche Elemente haben gar keinen Inhalt und deshalb auch kein schließendes Tag, zum Beispiel <br> für einen Zeilenumbruch oder <img> für ein Bild. Sie heißen void-Elemente.

Elemente richtig verschachteln

Elemente können andere Elemente enthalten, müssen dabei aber sauber ineinanderliegen:

<p>Der Begriff <strong>HTML</strong> steht für eine Auszeichnungssprache.</p>

<strong> liegt vollständig im Absatz. Falsch wäre es, den Absatz zu schließen, bevor <strong> geschlossen ist. Die Regel lautet: Was du zuletzt geöffnet hast, schließt du zuerst.

Die wichtigsten Elemente für deine erste Seite

Überschriften und Absätze

Überschriften reichen von <h1> bis <h6> und bilden eine Hierarchie: <h1> nennt das Thema der Seite, die weiteren Ebenen gliedern Abschnitte. Überspringe keine Ebene und wähle eine Überschrift nie nur wegen ihrer Schriftgröße. Absätze zeichnest du mit <p> aus.

Listen

Eine ungeordnete Liste nutzt <ul>, eine geordnete <ol>. Jeder Eintrag steht in einem <li>-Element:

<ul>
  <li>Dokumentstruktur anlegen</li>
  <li>Inhalte gliedern</li>
  <li>Seite im Browser öffnen</li>
</ul>

Nimm <ol>, wenn die Reihenfolge wichtig ist, etwa bei einer Anleitung, und <ul>, wenn die Einträge gleichrangig sind.

Links und Bilder

Bilder bindest du mit <img> ein. Das Attribut src verweist auf die Datei, alt liefert eine Textalternative:

<img src="garten.jpg" alt="Ein schmaler Weg führt durch einen Garten">

Der Alternativtext beschreibt knapp, was das Bild an Information vermittelt. Ist ein Bild rein dekorativ, setzt du alt="": Laut MDN signalisiert ein leerer Wert, dass das Bild kein wesentlicher Teil des Inhalts ist. Lass das Attribut aber nicht einfach weg. Fehlt es, lesen manche Screenreader stattdessen den Dateinamen vor.

Die erste eigene Seite erstellen

1. Lege im Texteditor eine neue Datei an und füge das Grundgerüst ein.
2. Ersetze Überschrift und Absatz durch eigene Inhalte.
3. Speichere die Datei mit der Endung .html, zum Beispiel index.html.
4. Öffne sie per Doppelklick oder durch Ziehen ins Browserfenster.
5. Nach jeder Änderung speicherst du und lädst die Seite im Browser neu.

Erweitere die Seite dann Schritt für Schritt: eine Überschrift, zwei Absätze, eine Liste, ein Link. Frage dich bei jedem Element, welche Bedeutung der Inhalt hat und welches Element dazu passt. So lernst du nicht nur Schreibweisen, sondern verstehst den Aufbau.

Zeigt der Browser nicht, was du erwartest, prüfe zuerst das Naheliegende: Ist die Datei gespeichert? Stimmt der Dateiname? Sind alle Tags korrekt geschrieben und geschlossen? Stehen Attributwerte in Anführungszeichen? Wie du bei hartnäckigeren Fehlern methodisch vorgehst, beschreibt der Artikel Debugging für Einsteiger.

Semantisches HTML

Semantisches HTML bedeutet, Elemente nach ihrer inhaltlichen Funktion zu wählen. Für die Navigation gibt es <nav>, für den Hauptinhalt <main>, für einen eigenständigen Beitrag <article>, für thematische Abschnitte <section>, für Kopf- und Fußbereich <header> und <footer>. Diese Elemente ersetzen keine Überschriften und Absätze, sondern gliedern die Seite auf einer höheren Ebene:

<main>
  <article>
    <h1>Ein einfacher Leitfaden</h1>
    <p>Der Inhalt beginnt mit einer kurzen Einführung.</p>
  </article>
</main>

Soll ein Text nur fett erscheinen, ist das kein Grund, ihn als Überschrift auszuzeichnen. Die Optik regelst du unabhängig davon mit CSS. Warum eine saubere Struktur auch für Suchmaschinen zählt, besonders wenn Inhalte per JavaScript entstehen, zeigt der Artikel zu JavaScript-SEO.

CSS und JavaScript einbinden

Gestaltung und Verhalten lagerst du in eigene Dateien aus und bindest sie im <head> ein:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meine erste Webseite</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Willkommen</h1>
  </body>
</html>

<link rel="stylesheet"> lädt die CSS-Datei. Das Attribut defer am <script>-Element bewirkt laut MDN, dass das Skript erst ausgeführt wird, nachdem das Dokument eingelesen wurde. So kann es auf alle Elemente der Seite zugreifen.

Typische Anfängerfehler

• Tag nicht geschlossen oder vertippt: Prüfe zu jedem öffnenden Tag das passende schließende.
• Falsch verschachtelt: Schließe zuerst das zuletzt geöffnete Element.
• Überschrift nach Größe gewählt: Die Ebene folgt der Gliederung, die Größe regelt CSS.
• Attributwert ohne Anführungszeichen: Setze Werte wie href und src immer in Anführungszeichen.
• Bild ohne alt-Attribut: Überlege, welche Information das Bild trägt, oder setze bei Dekoration alt="".
• Änderung nicht gespeichert: Der Browser zeigt dann noch den alten Stand.

Wenn etwas nicht funktioniert, ändere nur eine Sache und lade neu. So erkennst du, welche Änderung welche Wirkung hatte.

Dein nächster Schritt

Baue eine Seite über ein Thema, das dich interessiert: eine <h1>, zwei Abschnitte mit <h2>, eine Liste, ein Bild mit Alternativtext und einen Link. Prüfe sie anschließend mit einem HTML-Validator und behebe jede Meldung. Wenn du danach lernen willst, wie Daten hinter einer Website abgefragt werden, geht es mit SQL lernen weiter; alle Grundlagen-Artikel findest du im Ressort Programmierung.