HTML5

Webmaster Einsteigerguide: HTML5

Einer der ersten und wichtigsten Skills für Webmaster ist HTML. Es ist die universelle Sprache, die die Struktur und den Inhalt jeder Webseite im World Wide Web definiert – wie das stabile Skelett eines Körpers.

Keine Sorge, HTML ist logisch und leicht zu lernen! Dieser Guide führt dich Schritt für Schritt durch die Grundlagen von modernem HTML5, der aktuellen Version. Mit einfachen Beispielen und kleinen Quizfragen legen wir gemeinsam das Fundament für deine zukünftigen Webprojekte.

Was ist HTML eigentlich? Das Gerüst des Webs

HTML steht für HyperText Markup Language. Lass uns das aufschlüsseln:

  • HyperText: Das sind Texte mit Links (Verknüpfungen), die dich zu anderen Dokumenten oder Webseiten springen lassen – das Grundprinzip des Webs!
  • Markup Language: HTML ist eine Auszeichnungssprache (Markup Language): Du benutzt spezielle Befehle, sogenannte Tags (wie <p> oder <h1>), um Teile deines Inhalts zu „markieren“ oder „auszuzeichnen“. Damit sagst du dem Webbrowser, was dieser Inhalt bedeutet (z.B. „Das ist ein Absatz“, „Das ist die Hauptüberschrift“, „Hier ist ein Bild“).

Denk an einen Bauplan für ein Haus: HTML definiert die Räume, Wände, Türen und Fenster (die Struktur). Erst danach kommen CSS für die Farbe und Einrichtung (das Aussehen) und JavaScript für die Elektrik und smarte Funktionen (die Interaktivität) ins Spiel. HTML ist die unverzichtbare Basis.

Was brauche ich zum Start?

Überraschend wenig:

  1. Texteditor: Ein Programm zum Schreiben von reinem Text, wie Notepad (Windows) oder TextEdit (Mac) würden ausreichen, aber ein Quelltext-Editor bzw. Code-Editor wird dringend empfohlen. Moderne Code-Editoren wie Visual Studio Code (kostenlos) machen dir das entwickeln mit Syntaxhervorhebung, Autovervollständigung, KI-Integration und vielen weiteren Funktionen erheblich einfacher.
  2. Webbrowser: Hast du schon! Chrome, Firefox, Safari, Edge – jeder moderne Browser kann HTML anzeigen.

So geht’s: HTML-Code im Editor schreiben -> Datei mit Endung .html speichern (z.B. index.html) -> Datei im Browser öffnen -> Ergebnis sehen! Einfach, oder?

Für Visual Studio Code gibt es ein deutsches Sprachpaket, das du anschließend installieren kannst.

Das HTML5-Grundgerüst: Jede Seite braucht es!

Fast jede moderne HTML-Seite startet mit dieser Struktur:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hier steht der Seitentitel</title>
    <!-- Hier können später noch CSS-Stylesheets, Meta-Infos etc. rein -->
</head>
<body>
    <!-- Hier kommt der gesamte sichtbare Inhalt deiner Webseite hin! -->
    <h1>Hallo Welt!</h1>
    <p>Meine erste Webseite.</p>
</body>
</html>

Die wichtigsten Teile erklärt:

  • <!DOCTYPE html>: Die allererste Zeile. Signalisiert dem Browser: Das ist HTML5.
  • <html lang="de">: Das <html>-Tag ist das „Wurzelelement“ und umschließt alles. lang="de" sagt Browsern und Screenreadern, dass die Seite auf Deutsch ist (wichtig für SEO & Accessibility).
  • <head>...</head>: Der „Kopf“ enthält Meta-Informationen über die Seite (nicht direkt sichtbar):
    • <meta charset="UTF-8">: Absolut wichtig! Der Zeichenkodierungsstandard „UTF-8“ stellt sicher, dass deutsche Umlaute (äöüß) und Sonderzeichen korrekt angezeigt werden.
    • <meta name="viewport" ...>: Ebenfalls wichtig! Sorgt für die korrekte Darstellung und Skalierung auf Mobilgeräten (Responsive Design).
    • <title>...</title>: Der Titel, der im Browser-Tab und in Suchmaschinen-Ergebnissen erscheint. Jede Seite braucht einen aussagekräftigen Titel!
  • <body>...</body>: Der „Körper“. Alles, was du hier platzierst, sehen deine Besucher (bis auf unsichtbare Elemente).
  • <!-- Kommentar -->: Eine Notiz für dich im Code, die der Browser ignoriert.
Tags & Elemente: Die Markierungen mit spitzen Klammern wie <p> sind HTML-Tags. Meist gibt es einen öffnenden (<p>) und einen schließenden Tag (</p>). Der Inhalt dazwischen + die Tags bilden ein HTML-Element. Es gibt auch „leere“ Tags ohne Inhalt und ohne Schließ-Tag, wie <br> oder <img>.

🧠 Quiz-Pause 1:

Frage 1: Welcher Bereich in einer HTML-Datei enthält den im Browser sichtbaren Inhalt?

Frage 2: Warum ist <meta charset="UTF-8"> wichtig?

Text strukturieren: Überschriften, Absätze & mehr

Jetzt füllen wir den body mit Inhalt und geben ihm Struktur.

Überschriften: <h1> bis <h6>

Überschriften gliedern deinen Inhalt hierarchisch. Wichtig für Leser, Suchmaschinen (SEO) und Barrierefreiheit!

  • <h1>: Die Hauptüberschrift der Seite.
  • <h2>: Hauptabschnitte.
  • <h3> bis <h6>: Weitere Unterteilungen. Nutze sie logisch und überspringe keine Ebenen!
<h1>Hauptüberschrift</h1>
    <h2>Hauptabschnitt</h2>
    <h2>Hauptabschnitt</h2>
        <h3>Unterteilung</h3>
        <h3>Unterteilung</h3>
            <h4>Weitere Unterteilung</h4>

Absätze: <p>

Der Standard-Tag für Textabsätze (Paragraphs). Macht den Text lesbar durch Abstände.

<h1>Mein erster Seitentitel</h1>
<h2>Eine Einleitung</h2>
<p>Dies ist der erste Absatz mit etwas Text.</p>
<p>Hier folgt ein zweiter Absatz.</p>

Weitere Text-Tags:

  • <br>: Erzeugt einen einfachen Zeilenumbruch (break) innerhalb eines Absatzes (leerer Tag).
  • <hr>: Zeichnet eine horizontale Linie, oft zur thematischen Trennung (leerer Tag).
  • <strong>Wichtig!</strong>: Für fettgedruckten Text (semantische Bedeutung für wichtigen Text).
  • <em>Betont!</em>: Für kursiven Text (semantische Bedeutung für betonten Text).
  • <b>Fett</b>: Nur visuell fett (keine besondere Bedeutung, <strong> meist besser).
  • <i>Kursiv</i>: Nur visuell kursiv (z.B. für Begriffe, <em> oft besser für Betonung).
  • <code>Code</code>: Für Code-Ausschnitte im Text.
  • <pre>...</pre>: Stellt Text vorformatiert dar (Leerzeichen/Umbrüche bleiben erhalten), oft mit <code> für Codeblöcke.
  • <s>Durchgestrichen</s>: Für durchgeschrichenen Text.
  • <u>Unterstrichen</u>: Unterstreicht Text (sparsam verwenden, Verwechslungsgefahr mit Links!).
Nutze <strong> und <em> wenn du die Bedeutung hervorheben willst (Wichtigkeit, Betonung). Nutze <b> und <i> eher für rein stilistische Zwecke, wo keine semantische Hervorhebung gemeint ist (obwohl CSS hierfür oft die bessere Wahl ist).

🧠 Quiz-Pause 2:

Frage 1: Welcher Tag ist für einen normalen Textabsatz gedacht?

Frage 2: Welcher Tag ist semantisch korrekt, um stark betonten Text kursiv darzustellen?

Listen: Geordnet & Ungeordnet

  • Ungeordnete Listen (<ul>): Für Aufzählungen ohne bestimmte Reihenfolge (mit Punkten/Bullets).
  • Jeder Listenpunkt wird mit <li> dargestellt.
  1. Geordnete Listen (<ol>): Für nummerierte Aufzählungen (z.B. Schritte, Ranglisten).
  2. Jeder Listenpunkt ist ebenfalls ein <li>.
<h3>Lieblingsfrüchte:</h3>
<ul>
  <li>Äpfel</li>
  <li>Bananen</li>
</ul>
<h3>Top 3 Schritte:</h3>
<ol>
  <li>Planen</li>
  <li>Umsetzen</li>
  <li>Testen</li>
</ol>

Links: Verbindungen schaffen (<a>)

Mit dem Anchor-Tag <a> und dem href-Attribut setzt du Links.

<!-- Externer Link -->
<a href="https://developer.mozilla.org/">MDN Web Docs</a>

<!-- Link zur eigenen 'about.html' Seite -->
<a href="about.html">Über uns</a>

<!-- Link in neuem Tab öffnen -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example (neuer Tab)</a>
Wenn du target="_blank" verwendest, füge aus Sicherheitsgründen immer auch rel="noopener" hinzu! Dies sorgt dafür, dass die JavaScript-Funktion window.opener deaktiviert wird, die es sonst ermöglicht, auf die ursprüngliche Seite zuzugreifen.

Attribute wie href, target, rel geben Zusatzinfos zu einem HTML-Tag. Sie stehen im öffnenden Tag (name="wert").

Multimedia: Bilder, Audio & Video

Bilder (<img>)

Der <img>-Tag (leer) braucht mindestens die Attribute src (Bildpfad/URL) und alt (Alternativtext).

  • alt ist wichtig! Beschreibt das Bild für Screenreader und Suchmaschinen. Mach ihn so aussagekräftig wie möglich.
  • width & height angeben: Hilft dem Browser, Platz zu reservieren und vermeidet unerwartete Layout-Sprünge.
  • Wenn möglich, moderne Formate wie WebP nutzen (aus Performance-Gründen).
<img src="images/logo.webp" alt="Logo meiner Firma" width="150" height="50">

Bilder mit Beschriftung (<figure> & <figcaption>)

Um ein Bild (oder anderes Medium) mit einer Bildunterschrift semantisch korrekt zu gruppieren.

<figure>
  <img src="katze.webp" alt="Eine orange getigerte Katze schläft auf einem Kissen" width="400" height="400">
  <figcaption>Eine orange getigerte Katze schläft auf einem Kissen.</figcaption>
</figure>

So sieht’s aus:

Eine orange getigerte Katze schläft auf einem Kissen
Eine orange getigerte Katze schläft auf einem Kissen.

Audio & Video (<audio>, <video>)

HTML5 macht das Einbetten von Audio/Video einfach!

Wichtige Attribute:

  • src: Pfad zur Mediendatei.
  • controls: Zeigt die Standard-Steuerelemente an (Play/Pause, Lautstärke, etc.)
  • Mehrere <source>-Tags: Biete verschiedene Formate an (z.B. MP4, WebM für Video), damit der Browser das passende wählen kann.
  • poster (bei Video): Ein Vorschaubild, das angezeigt wird, bevor das Video lädt.
<h4>Podcast-Episode:</h4>
<audio controls src="podcast.mp3">
  Dein Browser unterstützt das Audio-Element nicht.
</audio>

<h4>Kurzes Video:</h4>
<video controls width="480" poster="video-poster.jpg">
  <source src="mein-video.webm" type="video/webm">
  <source src="mein-video.mp4" type="video/mp4">
  Dein Browser unterstützt das Video-Element nicht.
</video>
Denke daran, Audio- und Videodateien ebenfalls für das Web zu optimieren (komprimieren), da sie schnell sehr groß werden können!

🧠 Quiz-Pause 3:

Frage 1: Welchen Tag verwendest du für einen einzelnen Punkt in einer geordneten ODER ungeordneten Liste?

Frage 2: Welches Attribut sorgt dafür, dass ein Link in einem neuen Browser-Tab geöffnet wird?

Frage 3: Warum ist das alt-Attribut für <img> so wichtig?

Tabellen & Formulare: Daten darstellen & sammeln

Tabellen (<table>)

Für tabellarische Daten (Zeilen & Spalten), verwende:

  • <table>, <tr> (Zeile), <th> (Kopfzelle) und <td> (Datenzelle).
  • <thead>, <tbody>, <tfoot> helfen bei der Strukturierung.
<table>
  <caption>Öffnungszeiten</caption> <!-- Tabellenüberschrift -->
  <thead>
    <tr><th>Tag</th><th>Von</th><th>Bis</th></tr>
  </thead>
  <tbody>
    <tr><td>Montag - Freitag</td><td>09:00</td><td>18:00</td></tr>
    <tr><td>Samstag</td><td>10:00</td><td>14:00</td></tr>
    <tr><td>Sonntag</td><td colspan="2">Geschlossen</td></tr> <!-- colspan verbindet Zellen -->
  </tbody>
</table>

So sieht’s aus:

Öffnungszeiten
TagVonBis
Montag – Freitag09:0018:00
Samstag10:0014:00
SonntagGeschlossen
Verwende Tabellen wirklich nur für tabellarische Daten, nicht für das Seitenlayout! Für Layouts gibt es CSS (Flexbox, Grid).

Formulare (<form>)

Formulare sind ein zentrales Element für die Interaktion mit Nutzern auf Webseiten. Sie ermöglichen das Sammeln von Nutzereingaben, die anschließend an einen Server gesendet und verarbeitet werden können. Das <form>-Element umschließt alle Formularelemente und definiert wichtige Eigenschaften wie die Zieladresse und die Übertragungsmethode.

<form action="/daten_verarbeiten.php" method="post">
    <!-- Hier kommen alle Formularelemente hin -->
</form>

Wichtige Attribute des <form>-Elements:

  • action: Die URL, an die die Formulardaten gesendet werden.
  • method: Die HTTP-Methode für die Übertragung (get oder post).
  • enctype: Der Kodierungstyp für die Datenübertragung (wichtig bei Datei-Uploads: multipart/form-data).

Formularelemente im Detail

Wichtige Elemente innerhalb des <form>-Elements:

1. Labels (<label>)

Beschriftet ein Eingabefeld und verbessert die Benutzerfreundlichkeit sowie Barrierefreiheit. Durch Klicken auf das Label wird das zugehörige Eingabefeld fokussiert.

<label for="benutzername">Benutzername:</label>
<input type="text" id="benutzername" name="benutzername">

Das for-Attribut muss mit der id des zugehörigen Eingabefelds übereinstimmen. Dies ist besonders wichtig für die Barrierefreiheit, da Screenreader diese Verbindung nutzen, um Nutzern die Funktion des Eingabefelds zu erklären.

2. Eingabefelder (<input>)

Eingabefelder bilden das Kernstück eines Formulars. Je nach type-Attribut können verschiedene Arten von Eingaben ermöglicht werden:

Textfelder und ihre Varianten
<input type="text" id="name" name="name" placeholder="Dein Name" required>
<input type="email" id="email" name="email" placeholder="beispiel@domain.de">
<input type="password" id="passwort" name="passwort" minlength="8">
<input type="number" id="alter" name="alter" min="18" max="120">
<input type="tel" id="telefon" name="telefon" pattern="[0-9]{5,15}">
Datum und Zeit
<input type="date" id="geburtsdatum" name="geburtsdatum">
<input type="time" id="uhrzeit" name="uhrzeit">
<input type="datetime-local" id="termin" name="termin">
Optionen auswählen
<!-- Checkbox (Mehrfachauswahl möglich) -->
<input type="checkbox" id="zustimmung" name="zustimmung" value="ja">
<label for="zustimmung">Ich stimme den AGB zu</label>

<!-- Radio-Buttons (nur eine Auswahl möglich innerhalb der gleichen name-Gruppe) -->
<input type="radio" id="option1" name="option" value="erste">
<label for="option1">Erste Option</label>
<input type="radio" id="option2" name="option" value="zweite">
<label for="option2">Zweite Option</label>
Dateien und Absenden
<input type="file" id="dokument" name="dokument" accept=".pdf,.doc,.docx">
<input type="submit" value="Formular absenden">
<input type="reset" value="Zurücksetzen">

Wichtige Attribute für <input>-Elemente:

  • type: Definiert die Art des Eingabefelds und bestimmt sein Erscheinungsbild und Verhalten.
  • id: Einzigartiger Identifikator für die Verbindung mit dem label.
  • name: Name des Feldes, der beim Senden als Schlüssel verwendet wird.
  • value: Vorausgefüllter Wert oder bei Checkboxen/Radio-Buttons der zu sendende Wert.
  • placeholder: Hinweis im leeren Feld, der verschwindet, sobald der Nutzer tippt.
  • required: Macht das Feld zum Pflichtfeld, das ausgefüllt werden muss.
  • min/max: Minimaler/Maximaler Wert (für numerische Eingaben und Datumswähler).
  • minlength/maxlength: Minimale/Maximale Zeichenanzahl.
  • pattern: Regulärer Ausdruck zur Validierung des Eingabewerts.
  • disabled: Deaktiviert das Feld (nicht editierbar).
  • readonly: Macht das Feld schreibgeschützt (sichtbar, aber nicht editierbar).
  • autofocus: Setzt den Fokus automatisch auf dieses Feld beim Laden der Seite.
3. Mehrzeilige Texteingaben (<textarea>)

Für längere Texteingaben, die mehrere Zeilen umfassen können:

<label for="kommentar">Dein Kommentar:</label>
<textarea id="kommentar" name="kommentar" rows="5" cols="40">
Hier kann ein Standardtext stehen.
</textarea>

Die Attribute rows und cols bestimmen die anfängliche Größe des Textfelds, das jedoch vom Nutzer vergrößert werden kann (sofern nicht durch CSS unterbunden).

4. Auswahllisten (<select> und <option>)

Dropdown-Menüs für die Auswahl aus vordefinierten Optionen:

<label for="land">Land auswählen:</label>
<select id="land" name="land">
    <option value="">Bitte wählen...</option>
    <option value="de">Deutschland</option>
    <option value="at">Österreich</option>
    <option value="ch">Schweiz</option>
</select>

Für Mehrfachauswahl:

<label for="sprachen">Sprachen (Mehrfachauswahl mit Strg/Cmd-Taste):</label>
<select id="sprachen" name="sprachen[]" multiple size="3">
    <option value="de">Deutsch</option>
    <option value="en">Englisch</option>
    <option value="fr">Französisch</option>
    <option value="es">Spanisch</option>
</select>

Das multiple-Attribut erlaubt Mehrfachauswahl, size gibt an, wie viele Optionen sichtbar sein sollen.

5. Gruppierung von Optionen (<optgroup>)

Für übersichtlichere Auswahllisten mit Kategorien:

<select id="fahrzeug" name="fahrzeug">
    <optgroup label="PKW">
        <option value="limousine">Limousine</option>
        <option value="kombi">Kombi</option>
    </optgroup>
    <optgroup label="LKW">
        <option value="transporter">Transporter</option>
        <option value="laster">Lastwagen</option>
    </optgroup>
</select>
6. Schaltflächen/Buttons (<button>)

Klickbare Buttons, die verschiedene Aktionen auslösen können:

<!-- Sendet das Formular ab -->
<button type="submit">Formular absenden</button>

<!-- Setzt alle Felder auf Standardwerte zurück -->
<button type="reset">Zurücksetzen</button>

<!-- Button für beliebige JavaScript-Aktionen -->
<button type="button" onclick="meineJSFunktion()">Klick mich</button>

So sieht’s aus:

Buttons können im Gegensatz auch verschachtelte HTML-Elemente wie Bilder enthalten:

<button type="submit">
    <img src="icon.png" alt=""> Mit Icon absenden
</button>
7. Versteckte Felder (<input type="hidden">)

Für Daten, die nicht vom Nutzer eingegeben werden, aber mit dem Formular gesendet werden sollen:

<input type="hidden" name="formular_id" value="kontakt_123">
8. Feldgruppen (<fieldset> und <legend>)

Für thematische Gruppierung von Formularfeldern:

<fieldset>
    <legend>Persönliche Daten</legend>
    <label for="vorname">Vorname:</label>
    <input type="text" id="vorname" name="vorname">
    
    <label for="nachname">Nachname:</label>
    <input type="text" id="nachname" name="nachname">
</fieldset>

Diese Gruppierung ist nicht nur optisch hilfreich, sondern verbessert auch die Barrierefreiheit, da Screenreader die Gruppierung und den Gruppentitel vorlesen können.

HTML5-Formularvalidierung

Nutze die eingebauten HTML5-Formularvalidierungen!

Die folgenden Methoden bieten sofortiges Feedback für Nutzer (ohne JavaScript zu verwenden):

  • Spezifische Eingabetypen wie type="email", type="url", type="number" haben eingebaute Validierung
  • required-Attribut verhindert das Absenden mit leeren Pflichtfeldern
  • pattern="^[A-Za-z0-9]{3,}$" erlaubt benutzerdefinierte Validierung mit regulären Ausdrücken
  • min/max und minlength/maxlength für Wert- und Längenbeschränkungen
  • Fehlermeldungen können mit CSS :invalid und :valid Pseudo-Klassen gestaltet werden

Beispiel für ein Formular mit Validierung:

<form action="/daten_verarbeiten.php" method="post">
    
    <label for="email">E-Mail-Adresse:</label>
    <input type="email" id="email" name="email" 
           required 
           placeholder="beispiel@domain.de">
    
    <label for="website">Website:</label>
    <input type="url" id="website" name="website" 
           placeholder="https://www.beispiel.de">
    
    <label for="alter">Alter:</label>
    <input type="number" id="alter" name="alter" 
           min="18" max="120">
    
    <label for="benutzername">Benutzername:</label>
    <input type="text" id="benutzername" name="benutzername" 
           pattern="^[A-Za-z0-9_]{3,16}$" 
           title="3-16 Zeichen: Buchstaben, Zahlen und Unterstriche erlaubt">
    
    <button type="submit">Absenden</button>
</form>

HTML5 Semantik: Struktur mit Bedeutung

HTML geht über einfache Absätze und Überschriften hinaus. HTML5 führte semantische Tags ein, die bestimmten Bereichen deiner Webseite eine klare Bedeutung geben. Statt alles in generische <div>-Boxen zu packen (die sogenannte „div-Suppe“), solltest du diese Tags nutzen:

  • <header>: Kopfbereich der Seite oder eines Abschnitts (oft Logo, Titel, Hauptnavigation).
  • <nav>: Der Bereich für die Hauptnavigation deiner Seite.
  • <main>: Der Hauptinhalt der Seite. Sollte pro Seite einzigartig sein und nicht wiederkehrende Elemente wie header/footer/sidebar enthalten.
  • <article>: Ein eigenständiger, in sich geschlossener Inhalt, der theoretisch auch woanders Sinn ergeben würde (z.B. Blogpost, Produkt, Forenbeitrag).
  • <section>: Ein thematisch zusammengehöriger Abschnitt innerhalb des main-Inhalts (z.B. „Über uns“, „Unsere Dienstleistungen“). Hat typischerweise eine Überschrift.
  • <aside>: Inhalte, die nur lose zum Hauptinhalt gehören (z.B. eine Sidebar mit Links, Werbung, Zitate).
  • <footer>: Fußbereich der Seite oder eines Abschnitts (Copyright, Impressum-Link, etc).

Und natürlich, <div> (Block-Container) und <span> (Inline-Container) gibt es immer noch und werden weiterhin häufig verwendet. Nutze sie für Gruppierungen, wenn kein semantischer Tag passt.

Warum ist Semantik so wichtig?
  • Zugänglichkeit (Accessibility): Screenreader können die Seitenstruktur besser verstehen und Nutzern helfen, zu navigieren.
  • SEO: Suchmaschinen verstehen den Kontext deines Inhalts besser.
  • Wartbarkeit: Dein Code wird lesbarer und logischer strukturiert.
  • Styling: Es ist einfacher, bestimmte Bereiche mit CSS gezielt zu gestalten.
Nutze immer den semantisch passendsten Tag!

🧠 Quiz-Pause 4:

Frage 1: Welches Tag definiert eine Zeile (row) in einer HTML-Tabelle?

Frage 2: Wozu dient das for-Attribut im <label>-Tag?

Frage 3: Welches Attribut macht ein Eingabefeld zu einem Pflichtfeld, das ausgefüllt werden muss?

Frage 4: Welcher Input-Typ bietet eine eingebaute Validierung für E-Mail-Adressen?

Frage 5: Welcher HTML5-Tag ist am besten geeignet, um einen eigenständigen Blog-Artikel auf einer Übersichtsseite zu kennzeichnen?

Die nächsten Schritte

Fantastisch, du hast die HTML-Grundlagen gemeistert! 🎉

Du kannst jetzt Webseiten strukturieren, Texte formatieren, Listen, Links, Bilder, Tabellen und Formulare einfügen und weißt, wie wichtig semantisches HTML ist.

Das ist das Fundament! Von hier aus kannst du deine Reise fortsetzen:

  1. ➡️ CSS lernen: Unbedingt als Nächstes! CSS (Cascading Style Sheets) ist für das Design zuständig. Du lernst Farben, Layouts (Flexbox, Grid!), Schriftarten und vieles mehr, um deine HTML-Seiten zum Leben zu erwecken.
  2. ➡️ JavaScript lernen: Füge Interaktivität hinzu! Reagiere auf Klicks, ändere Inhalte dynamisch, validiere Formulare komplexer.
  3. ➡️ HTML vertiefen: Entdecke weitere Tags (<details>, <iframe>…), Attribute und fortgeschrittene Formulartechniken.
  4. ➡️ Üben, Bauen, Ausprobieren: Erstelle kleine Projekte. Versuche, einfache Webseiten nachzubauen. Nutze Online-Ressourcen wie MDN Web Docs. Je mehr du praktisch arbeitest, desto besser wirst du!

HTML mag einfach erscheinen, aber eine saubere, semantische Struktur ist die Basis für alles Weitere im Webdesign und in der Webentwicklung.

Bleib neugierig und viel Spaß beim Coden!