Das brauchst du

Einen Computer mit einem Browser, zum Beispiel Edge oder Chrome. Im ersten Versuch brauchst du nichts zu installieren. Benutze nur erfundenen Übungstext.

Das nimmst du mit

Du veränderst deine erste kleine Webseite und verstehst, warum eine Überschrift anders aussieht als ein Absatz.

Schritt 01

Was die spitzen Klammern bedeuten

HTML ist eine Schreibweise für Webseiten. Du schreibst normalen Text und setzt kleine Hinweise dazu. Die Hinweise stehen in spitzen Klammern.

Beispiel: <h1>Hallo Welt</h1>. <h1> sagt: „Hier beginnt die wichtigste Überschrift.“ </h1> sagt: „Hier ist sie zu Ende.“ Der Schrägstrich bedeutet also Ende. Der sichtbare Text dazwischen lautet Hallo Welt.

Ein Browser, etwa Edge oder Chrome, liest diese Hinweise und zeigt dir eine gestaltete Seite. Er zeigt normalerweise nicht die Klammern mit an.

Schritt 02

Hier auf der Seite ausprobieren

Das dunkle Schreibfeld unten enthält ein kleines Beispiel. Du änderst es direkt hier. Das helle Feld darunter zeigt nach einem Klick auf die Vorschau-Schaltfläche das Ergebnis. Dabei wird nichts öffentlich ins Internet gestellt.

  1. Suche im dunklen Feld den Text Hallo Welt.
  2. Ändere nur diese Wörter zu Meine erste Webseite. Lass die Zeichen <h1> und </h1> stehen.
  3. Klicke auf die Schaltfläche zum Aktualisieren der Vorschau.
  4. Schau in das helle Feld darunter.
So erkennst du, dass es klappt

Im hellen Feld steht deine neue Überschrift. Im dunklen Feld sind die HTML-Hinweise weiterhin vorhanden.

Wenn du hier nicht weiterkommst

Du hast versehentlich eine Klammer gelöscht? Während du im Schreibfeld bist, drücke Strg + Z: Strg gedrückt halten, Z kurz drücken, beide loslassen. Das macht die letzte Änderung rückgängig.

Schritt 03

Die wichtigsten Zeilen verstehen

<!doctype html>
Der Browser erfährt: Diese Datei benutzt heutiges HTML.
<html lang="de"> … </html>
Das umschließt die Seite. lang="de" kennzeichnet deutsche Sprache.
<head> … </head>
Hier stehen Angaben über die Seite, zum Beispiel ihr Titel. Das ist nicht der normale sichtbare Seitentext.
<body> … </body>
Hier steht der Inhalt, den Besucher auf der Seite sehen.
<h1> … </h1>
Das kennzeichnet die Hauptüberschrift.
<p> … </p>
Das kennzeichnet einen Absatz, also einen zusammengehörigen Textblock.

Die Zeichen … bedeuten hier „dazwischen steht dein Inhalt“. Du brauchst diese Punkte nicht abzutippen.

Schritt 04

Einen eigenen Absatz ergänzen

  1. Suche im dunklen Schreibfeld die Zeile mit </body>.
  2. Setze den blinkenden Schreibstrich an den Anfang dieser Zeile. Drücke Enter, um davor Platz zu machen, und gehe in die neue leere Zeile.
  3. Tippe dort <p>Ich lerne gerade HTML.</p>.
  4. Aktualisiere wieder die Vorschau.
So erkennst du, dass es klappt

Unter den bisherigen Inhalten steht zusätzlich „Ich lerne gerade HTML.“ Die Überschrift bleibt erhalten.

Schritt 05

Die Arbeit als eigene Datei behalten

Die Übung in diesem Schreibfeld wird nicht als Projektdatei gespeichert. Wenn du die Seite verlässt, kann dein Text verloren gehen. Zum Aufbewahren speicherst du den HTML-Text in einer eigenen Datei.

Eine Datei ist ein benanntes Stück Inhalt auf deinem Computer. Für unsere Webseite bekommt sie den Namen index.html. Die Endung .html sagt: Das ist HTML-Inhalt.

Die nächste Anleitung zeigt ohne vorausgesetzte Einrichtung, wie du Visual Studio Code installierst, einen Ordner öffnest und index.html speicherst. Dort öffnest du die Datei anschließend im Browser. Damit ist sie noch nicht im Internet veröffentlicht.

Ein Schritt weiter. Die passenden nächsten Anleitungen findest du unten.

Quellen & Stand

Quellenrecherche und Bearbeitungsstand: 30.10.2026. Eigene Beispiele dienen dem Lernen. Menüs können sich je nach Softwareversion unterscheiden. Diese Anleitungen wurden anhand der genannten Dokumentation erstellt; ein Praxistest aller Programme auf deinem Gerät ist damit nicht verbunden.