HTML-Kurs / Was ist HTML und welche Aufgaben hat es auf einer Webseite?

HTML (HyperText Markup Language, eine Auszeichnungssprache für Hypertext) gibt den Inhalten einer Webseite Struktur und Bedeutung. Es kennzeichnet Überschriften, Absätze, Listen, Links und andere Bestandteile eines Dokuments. CSS bestimmt vor allem das Aussehen und die Anordnung; JavaScript kann Verhalten als Reaktion auf Benutzereingaben ergänzen.

Was ist HTML?

HTML ist eine Auszeichnungssprache: Die verwendeten Elemente beschreiben, welche Aufgabe ein Inhalt im Dokument hat. Dieselben Wörter können eine Überschrift, ein gewöhnlicher Absatz oder ein Link sein. Die HTML-Elemente machen diesen Unterschied erkennbar. Links verbinden außerdem Dokumente im Web miteinander.

Berechnungen und bedingte Programmlogik sind nicht die Hauptaufgabe von HTML. Im Mittelpunkt stehen Struktur und Bedeutung. Die Einführung in den HTML-Standard des WHATWG erläutert die Sprache und die Aufgaben ihrer Elemente.

Welche Aufgaben übernimmt HTML auf einer Webseite?

Eine Webseite kann Überschriften, Fließtext, Navigation, Bilder und Formulare enthalten. HTML ordnet diesen Inhalten geeignete Elemente zu und beschreibt ihre Beziehungen. Das folgende vollständige Beispiel zeigt auch, wie diese Elemente in die Grundstruktur eines Dokuments eingebettet werden.

• Inhalte kennzeichnen: h1 bis h6 markieren Überschriften, p Absätze und ul oder ol Listen.
• Das Dokument gliedern: Elemente können einen Kopfbereich, einen Navigationsbereich und den Hauptinhalt unterscheiden.
• Seiten verbinden und Eingaben ermöglichen: a erstellt Links. Mit form und Eingabeelementen können Benutzer Informationen übermitteln.

Diese Struktur hilft Browsern und assistiven Technologien, etwa Bildschirmleseprogrammen, die Seite zu interpretieren. Entscheiden Sie sich deshalb nach der Aufgabe des Inhalts für ein Element. Sein voreingestelltes Aussehen allein ist kein ausreichendes Auswahlkriterium.

Wie unterscheiden sich HTML, CSS und JavaScript?

HTML legt die Inhalte und ihre Bedeutung fest. CSS (Cascading Style Sheets, auf Deutsch kaskadierende Stilvorlagen) steuert die Darstellung, beispielsweise Farben, Schriftarten, Abstände und das Layout. JavaScript kann auf Klicks und Eingaben reagieren oder Inhalte auf der Seite ändern.

Diese Aufteilung ist ein hilfreicher Einstieg, aber keine starre Grenze. Einige HTML-Elemente bringen bereits Interaktionen mit, und CSS kann abhängig von Zuständen die Darstellung verändern oder Animationen ausführen. Konzentrieren Sie sich beim Einstieg zunächst darauf, Inhalte mit passenden Elementen auszuzeichnen.

Wie stellt ein Browser HTML-Code dar?

In diesem Ausschnitt kennzeichnet h1 eine Überschrift, p einen Absatz und ul mit li eine Liste.

<h1>Notizen des Tages</h1>

<p>HTML strukturiert Inhalte.</p>

<ul>

  <li>Überschrift</li>

  <li>Absatz</li>

</ul>

Der Browser interpretiert die Elemente und zeigt eine Überschrift, einen Absatz und darunter zwei Listeneinträge mit Aufzählungszeichen an. Die spitzen Klammern der Tags erscheinen dabei nicht als normaler Seitentext. Vergleichen Sie die Elemente mit den angezeigten Inhalten. Die tatsächlichen Schriftarten und Abstände hängen vom Browser und vom CSS der Seite ab.

Eine einfache HTML-Datei erstellen

Ergänzen Sie den Ausschnitt um die Grundstruktur eines Dokuments. Kopieren Sie das folgende vollständige Beispiel in einen Texteditor, speichern Sie es als index.html mit der Zeichenkodierung UTF-8 und öffnen Sie die Datei in einem Browser. Verwenden Sie einfachen Text statt eines formatierten Textdokuments.

<!doctype html>

<html lang="de-DE">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Notizen des Tages</title>

  </head>

  <body>

    <h1>Notizen des Tages</h1>

    <p>HTML strukturiert Inhalte.</p>

    <ul>

      <li>Überschrift</li>

      <li>Absatz</li>

    </ul>

  </body>

</html>

head enthält Informationen wie den Dokumenttitel und die Zeichenkodierung. body enthält den Hauptinhalt der Seite. Auch ohne zusätzliches CSS stellt der Browser die Inhalte mit seinen voreingestellten Stilen dar.

Ändern Sie im Editor nacheinander den Text in title, die Überschrift in h1 und den Absatz. Speichern Sie nach jeder Änderung und laden Sie die Seite neu. Vergleichen Sie dabei den Titel im Browser-Tab mit dem sichtbaren Inhalt: Eine Änderung an title verändert nicht automatisch die Überschrift im Dokument. Stellen Sie anschließend den ursprünglichen Beispielcode wieder her.