TZG - Technologie Zeitgeist

Aktuell - Interessant - Neu

Startseite » HTML – Tutorial für Anfänger: Der absolute Leitfaden!

HTML – Tutorial für Anfänger: Der absolute Leitfaden!

von ·

Ziel dieses Tutorials

Dieses Tutorial soll dir als absolutem Anfänger ein solides Fundament in HTML5 vermitteln. Ziel ist es, dass du am Ende selbstständig einfache, saubere und zugängliche Webseiten erstellen kannst. Wir schauen uns nicht nur die Syntax (also wie man etwas schreibt) an, sondern legen großen Wert auf das Warum: Warum sind bestimmte Techniken wie Semantik, Barrierefreiheit und Performance wichtig? Zudem geben wir dir einen Ausblick, welche nächsten Schritte sinnvoll sind, um dein Wissen zu vertiefen.

1 | Was ist HTML?

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

  • Markup Language (Auszeichnungssprache): Anders als eine klassische Programmiersprache (wie Python, Java oder JavaScript), die dem Computer sagt, was er tun soll (Abläufe, Logik, Berechnungen), beschreibt eine Markup-Sprache die Struktur und Bedeutung von Inhalten. Stell es dir wie Textmarker und Überschriften in einem Word-Dokument vor: Du markierst Text, um ihm eine bestimmte Rolle zuzuweisen (z. B. “Das ist eine Überschrift”, “Das ist ein wichtiger Absatz”). HTML verwendet dafür sogenannte “Tags” (wie <h1>, <p>, <a>), um Text und andere Inhalte zu umschließen und ihnen eine Bedeutung zu geben.
  • HyperText: Das “Hyper” bezieht sich auf die Fähigkeit, Dokumente miteinander zu verknüpfen – die sogenannten Hyperlinks. Das ist das Kernprinzip des World Wide Web: Du kannst von einer Seite zur nächsten springen.

Ein HTML-Dokument ist also wie das Gerüst eines Hauses oder das Inhaltsverzeichnis und die Kapitelstruktur eines Buches. Es legt fest:

  • Was ist die Hauptüberschrift? (<h1>)
  • Wo beginnt und endet ein Absatz? (<p>)
  • Wo ist eine Liste von Punkten? (<ul>, <li>)
  • Wo ist ein Bild? (<img>)
  • Wo führt ein Link hin? (<a>)

Wozu braucht man dann CSS & JavaScript?

HTML allein ist nur die Struktur. Damit eine Webseite ansprechend aussieht und interaktiv wird, braucht es weitere Technologien:

SpracheAufgabeBeispielAnalogie (Hausbau)
HTMLStruktur, Inhalt, Bedeutung„Das ist eine Überschrift“Rohbau, Fundament
CSSGestaltung, Aussehen, Layout„Überschriften sind blau & 2 em groß“Fassade, Anstrich
JavaScriptVerhalten, Interaktivität, Logik„Zeige Popup, wenn Button geklickt wird“Elektrik, Sanitär

Tipp: Eine der wichtigsten Regeln im Webdesign ist die Trennung der Zuständigkeiten (Separation of Concerns). Halte HTML, CSS und JavaScript so gut wie möglich getrennt:

  • HTML kümmert sich nur um die Struktur und den Inhalt.
  • CSS kümmert sich nur um das Aussehen.
  • JavaScript kümmert sich nur um das Verhalten.

Warum ist das wichtig?

  • Wartbarkeit: Wenn du das Aussehen ändern willst, musst du nur die CSS-Dateien anfassen, nicht die HTML-Struktur.
  • Teamarbeit: Designer können am CSS arbeiten, während Entwickler die HTML-Struktur oder JavaScript-Logik erstellen.
  • Flexibilität: Du kannst das Aussehen einer Seite komplett ändern (Redesign), ohne die HTML-Struktur anfassen zu müssen (solange die Struktur semantisch korrekt ist).
  • Zugänglichkeit: Eine gut strukturierte HTML-Seite ist auch ohne CSS und JavaScript lesbar und nutzbar (z.B. für Screenreader).

2 | Das Grundgerüst eines HTML‑Dokuments

Jede HTML-Seite benötigt eine grundlegende Struktur, damit der Browser sie korrekt interpretieren kann:

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Meine erste Seite</title>
    </head>
  <body>
    <h1>Hello World!</h1>
    <p>Willkommen auf meiner ersten Webseite.</p>
    </body>
</html>

Zeile für Zeile erklärt:

  • <!DOCTYPE html>: Dies ist kein HTML-Tag, sondern eine Instruktion für den Browser. Sie teilt ihm mit: “Achtung, es folgt ein HTML-Dokument, und zwar nach dem aktuellen HTML5-Standard.” Ohne diesen Doctype könnten Browser in einen alten, fehleranfälligen Darstellungsmodus (“Quirks Mode”) zurückfallen. Also: Immer an den Anfang setzen!
  • <html lang="de">: Das ist das Wurzelelement – alle anderen Elemente der Seite sind darin verschachtelt. Das Attribut lang="de" gibt die Hauptsprache des Seiteninhalts an (hier Deutsch).
    • Warum ist lang wichtig? Es hilft:
      • Screenreadern: Sie wissen, in welcher Sprache sie den Text vorlesen sollen (korrekte Aussprache).
      • Suchmaschinen: Sie können die Seite korrekt indexieren und Nutzern Ergebnisse in der passenden Sprache liefern.
      • Browsern: Sie können z.B. die korrekten Trennregeln anwenden oder Übersetzungsfunktionen anbieten.
  • <head>: Dieser Bereich enthält Meta-Informationen über das HTML-Dokument, die nicht direkt auf der Seite sichtbar sind, aber für Browser, Suchmaschinen und andere Systeme wichtig sind. Dazu gehören:
    • <meta charset="utf-8">: Legt die Zeichenkodierung fest. UTF-8 ist der universelle Standard, der nahezu alle Schriftzeichen der Welt (auch Umlaute wie ä, ö, ü und Sonderzeichen wie €) korrekt darstellen kann. Ohne diese Angabe kann es zu falsch dargestellten Zeichen (“Mojibake”) kommen. Immer verwenden!
    • <meta name="viewport" content="width=device-width, initial-scale=1">: Diese Zeile ist essenziell für Responsive Design, also die Anpassung der Webseite an verschiedene Bildschirmgrößen (Desktops, Tablets, Smartphones).
      • width=device-width: Setzt die Breite des Anzeigebereichs (Viewport) auf die Breite des Geräts.
      • initial-scale=1: Legt den anfänglichen Zoomfaktor fest (1 = kein Zoom). Ohne diese Zeile würden mobile Browser die Seite oft verkleinert darstellen, als wäre sie eine Desktop-Seite (“Desktop View”).
    • <title>: Definiert den Titel der Seite. Dieser Text erscheint:
      • Im Browser-Tab oder Fenstertitel.
      • In den Suchergebnissen von Google & Co.
      • In den Browser-Lesezeichen/Favoriten.
      • Er ist auch wichtig für Screenreader, um Nutzern zu sagen, auf welcher Seite sie sich befinden. Ein aussagekräftiger Titel ist also Pflicht!
  • <body>: Dieser Bereich enthält allen sichtbaren Inhalt der Webseite: Texte, Bilder, Videos, Links, Tabellen, Formulare usw. Alles, was der Besucher im Browserfenster sehen soll, gehört hier hinein.
  • </html>: Schließt das Wurzelelement.

Best Practice: Nutze UTF-8 immer als Zeichenkodierung. Probleme mit gemischten oder falsch deklarierten Kodierungen sind eine sehr häufige Fehlerquelle, besonders wenn Inhalte aus verschiedenen Quellen (Datenbanken, APIs) zusammengeführt werden.

3 | Textbasics – Überschriften, Absätze & mehr

Text ist der Kern vieler Webseiten. HTML bietet verschiedene Tags, um Text semantisch (also nach seiner Bedeutung) zu strukturieren.

Überschriften-Hierarchie (h1 bis h6)

Überschriften gliedern deinen Inhalt und geben ihm eine klare Struktur, ähnlich wie Kapitelüberschriften in einem Buch.

  • <h1>: Die Hauptüberschrift der Seite. Sie sollte den wichtigsten Inhalt der Seite zusammenfassen (z. B. den Titel eines Blogartikels, den Namen der Webseite auf der Startseite). Idealweise sollte es nur eine <h1> pro Seite geben.
  • <h2>: Unterüberschriften (Abschnittsüberschriften).
  • <h3> bis <h6>: Weitere Unterebenen für feinere Gliederungen.

Wichtige Regel: Verwende Überschriften-Tags hierarchisch korrekt. Überspringe keine Ebenen (also nicht von <h2> direkt zu <h4>). Die Reihenfolge ist wichtig:

  • Für Suchmaschinen (SEO): Sie analysieren die Überschriftenstruktur, um die Themen und die Wichtigkeit der Inhalte auf deiner Seite zu verstehen. Eine gute Struktur kann dein Ranking verbessern.
  • Für assistive Technologien (Barrierefreiheit): Screenreader-Nutzer können oft direkt von Überschrift zu Überschrift springen, um sich schnell einen Überblick über den Seiteninhalt zu verschaffen. Eine logische Hierarchie ist hier entscheidend für die Navigation.
  • Für die Lesbarkeit: Auch sehende Nutzer profitieren von einer klaren visuellen Gliederung durch unterschiedlich große Überschriften (was dann per CSS gesteuert wird).

Absätze (<p>)

Der <p>-Tag (Paragraph) umschließt einen Textabsatz. Browser fügen normalerweise automatisch einen kleinen Abstand zwischen Absätzen ein, was die Lesbarkeit deutlich erhöht. Verwende <p> für zusammenhängende Textblöcke.

Semantische Betonung

Manchmal möchtest du bestimmte Wörter oder Sätze hervorheben. HTML bietet dafür semantische Tags:

TagBedeutungTypische Darstellung (per Browser-Default)Wann verwenden?
<strong>Starke Betonung, Wichtigkeit für den InhaltFettSicherheitswarnungen (“Achtung: Nicht berühren!”), Schlüsselwörter im Text.
<em>Hervorhebung, oft eine Änderung im TonfallKursivFachbegriffe bei erster Nennung (“Das nennt man Semantik.”), Ironie, Betonung eines Wortes im Satz (“Das war wirklich gut.”).
<b>Visuell fett (ohne zusätzliche Bedeutung)FettProduktnamen in einem Review, Schlüsselwörter in einer Zusammenfassung, wenn keine besondere Wichtigkeit impliziert ist. Selten nötig, CSS ist meist besser.
<i>Visuell kursiv (ohne zusätzliche Bedeutung)KursivSchiffsnamen, Fachbegriffe (wenn <em> unpassend), Gedankengänge. Selten nötig, CSS ist meist besser.

Wichtiger Unterschied: <strong> und <em> teilen dem Browser (und Screenreadern!) mit, dass der Inhalt eine besondere Bedeutung hat. <b> und <i> sind primär visuelle Anweisungen ohne tiefere semantische Bedeutung. Bevorzuge <strong> und <em>, wenn es um inhaltliche Wichtigkeit oder Betonung geht. Für rein visuelle Effekte nutze CSS (z. B. font-weight: bold; oder font-style: italic;).

Zeilenumbruch (<br>)

Der <br>-Tag (Break) erzwingt einen harten Zeilenumbruch innerhalb eines Textblocks (z. B. innerhalb eines <p>).

  • Sparsam einsetzen! Verwende <br> nicht, um Abstände zwischen Elementen zu erzeugen. Dafür ist CSS zuständig (z. B. mit margin oder padding).
  • Sinnvolle Anwendungsfälle für <br> sind z. B.:
    • Adressen
    • Gedichte oder Liedtexte, bei denen der Zeilenumbruch Teil des Inhalts ist.

<!– end list –>

HTML

<p>Max Mustermann<br>
Musterstraße 1<br>
12345 Musterstadt</p>

4 | Listen, Links & Bilder

Diese Elemente machen das Web dynamisch und visuell ansprechend.

Listen (<ul>, <ol>, <li>)

Listen helfen, Informationen übersichtlich zu gruppieren.

  • <ul> (Unordered List): Für Aufzählungen, bei denen die Reihenfolge keine Rolle spielt. Die einzelnen Punkte werden typischerweise mit Aufzählungszeichen (Bullets) dargestellt. HTML<ul> <li>Äpfel</li> <li>Bananen</li> <li>Orangen</li> </ul>
  • <ol> (Ordered List): Für Aufzählungen, bei denen die Reihenfolge wichtig ist (z. B. Schritte einer Anleitung, Ranglisten). Die einzelnen Punkte werden typischerweise nummeriert dargestellt. HTML<ol> <li>Wasser kochen</li> <li>Teebeutel hinzufügen</li> <li>5 Minuten ziehen lassen</li> </ol>
  • <li> (List Item): Jeder einzelne Punkt innerhalb einer <ul> oder <ol> muss in einem <li>-Tag stehen.

Verschachtelte Listen: Du kannst Listen auch ineinander verschachteln, um Unterpunkte zu erzeugen:

HTML

<ul>
  <li>Obst</li>
  <li>Gemüse
    <ul>
      <li>Brokkoli</li>
      <li>Karotten</li>
    </ul>
  </li>
  <li>Brot</li>
</ul>

Tipp: Achte auf saubere Einrückung im Code, um die Struktur verschachtelter Listen leichter zu erkennen.

Links (<a>)

Hyperlinks (oder kurz Links) sind das Herzstück des Webs. Sie verbinden Seiten miteinander. Der <a>-Tag (Anchor) ist dafür zuständig.

HTML

<a href="https://www.mozilla.org/de/firefox/" target="_blank" rel="noopener noreferrer">
  Lade Firefox herunter
</a>
  • href (Hypertext Reference): Dieses Attribut enthält die Ziel-URL, zu der der Link führen soll. Das kann eine externe Webseite (wie im Beispiel) oder eine andere Seite auf deiner eigenen Website (href="/kontakt.html") oder sogar ein Sprunganker auf der gleichen Seite (href="#kapitel2") sein. Ein <a>-Tag ohne href ist kein funktionierender Link.
  • target="_blank": Dieses Attribut weist den Browser an, den Link in einem neuen Tab oder Fenster zu öffnen.
    • Wann verwenden? Sinnvoll für Links zu externen Webseiten, damit der Besucher deine Seite nicht verlässt. Bei internen Links ist es meist besser, sie im selben Tab zu öffnen.
    • Sicherheitshinweis: Wenn du target="_blank" verwendest, füge immer rel="noopener noreferrer" hinzu!
      • noopener: Verhindert, dass die neu geöffnete Seite über window.opener Zugriff auf das Fenster deiner ursprünglichen Seite erhält (Schutz vor einer Sicherheitslücke namens “Tab-napping”).
      • noreferrer: Verhindert, dass der Browser beim Navigieren zur neuen Seite die Adresse deiner Seite als “Referrer” mitsendet. Das schützt die Privatsphäre und kann auch bei noopener helfen, falls dieses nicht unterstützt wird.
  • Der Text zwischen dem öffnenden <a> und dem schließenden </a> (“Lade Firefox herunter”) ist der sichtbare Link-Text. Wähle einen aussagekräftigen Text, der dem Nutzer klar macht, wohin der Link führt. Vermeide vage Texte wie “Hier klicken”.

Bilder (<img> und <picture>)

Bilder machen Webseiten lebendiger.

  • <img> (Image): Das Standard-Tag zum Einbinden von Bildern. HTML<img src="bilder/katze.jpg" alt="Eine graue Katze schläft zusammengerollt auf einem roten Kissen." width="600" height="400" loading="lazy">
    • src (Source): Gibt den Pfad zur Bilddatei an. Das kann ein relativer Pfad (wie im Beispiel, ausgehend vom HTML-Dokument) oder eine absolute URL sein.
    • alt (Alternative Text): Dieses Attribut ist extrem wichtig! Es beschreibt den Inhalt des Bildes in einem kurzen Satz.
      • Für Screenreader: Blinde oder sehbehinderte Nutzer bekommen den alt-Text vorgelesen und erfahren so, was auf dem Bild zu sehen ist. Ohne alt-Text ist das Bild für sie unsichtbar.
      • Für Suchmaschinen (SEO): Google & Co. können Bilder nicht “sehen”, aber sie lesen den alt-Text, um den Bildinhalt zu verstehen.
      • Bei Ladefehlern: Wenn das Bild aus irgendeinem Grund nicht geladen werden kann (falscher Pfad, Netzwerkfehler), zeigen viele Browser stattdessen den alt-Text an.
      • Was macht einen guten alt-Text aus? Sei beschreibend, aber kurz. Konzentriere dich auf das Wesentliche. Wenn das Bild rein dekorativ ist und keinen inhaltlichen Mehrwert bietet, kannst du ein leeres alt-Attribut setzen (alt=""), damit Screenreader es ignorieren. Lass das alt-Attribut aber niemals ganz weg!
    • width und height: Geben die Dimensionen des Bildes in Pixeln an.
      • Warum angeben? Auch wenn du die Größe später mit CSS änderst, hilft es dem Browser, schon beim Laden der Seite den nötigen Platz für das Bild zu reservieren. Das verhindert ein “Springen” des Layouts, wenn das Bild geladen wird (verbessert den Cumulative Layout Shift – CLS, ein wichtiger Performance-Wert).
    • loading="lazy": Ein modernes Attribut, das dem Browser sagt, das Bild erst zu laden, wenn es in den sichtbaren Bereich (Viewport) des Nutzers scrollt. Das spart Bandbreite und beschleunigt das anfängliche Laden der Seite, besonders bei vielen Bildern. Sehr empfehlenswert!
  • <picture>: Ein fortgeschritteneres Element, das es dir erlaubt, dem Browser mehrere Bildquellen anzubieten. Der Browser wählt dann die am besten geeignete aus. Sehr nützlich für:
    • Moderne Bildformate: Biete moderne Formate wie AVIF oder WebP an, die oft eine bessere Kompression bei gleicher Qualität bieten als JPG oder PNG. Stelle gleichzeitig ein Fallback (z. B. JPG) für ältere Browser bereit.
    • Responsive Images: Liefere unterschiedliche Bildgrößen für verschiedene Bildschirmauflösungen aus (um Bandbreite auf Mobilgeräten zu sparen).
    HTML<picture> <source srcset="bilder/katze-gross.avif" type="image/avif" media="(min-width: 1200px)"> <source srcset="bilder/katze-mittel.webp" type="image/webp" media="(min-width: 800px)"> <source srcset="bilder/katze-klein.jpg" type="image/jpeg"> <img src="bilder/katze-klein.jpg" alt="Eine graue Katze schläft auf einem roten Kissen." width="600" height="400" loading="lazy"> </picture>
    • Der Browser prüft die <source>-Elemente von oben nach unten. Das erste, dessen Bedingungen (type, media) erfüllt sind und dessen Format unterstützt wird, wird geladen.
    • Das <img>-Element innerhalb von <picture> ist obligatorisch. Es dient als Fallback für Browser, die <picture> nicht kennen, und muss den alt-Text enthalten.

5 | Semantische Struktur (HTML5 Sectioning)

Früher wurden Webseiten oft nur mit generischen <div>-Containern aufgebaut. HTML5 hat spezielle semantische Sectioning-Elemente eingeführt, die dem Inhalt eine klarere Bedeutung und Struktur geben. Denk daran: HTML beschreibt die Bedeutung, nicht das Aussehen.

HTML

<body> <header> <h1>Meine Tolle Webseite</h1>
    <nav aria-label="Hauptnavigation"> <ul>
        <li><a href="/">Startseite</a></li>
        <li><a href="/ueber-uns.html">Über uns</a></li>
        <li><a href="/kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main> <article> <h2>Toller Blog-Beitrag</h2>
      <p>Einleitung zum Beitrag...</p>
      <section> <h3>Unterthema 1</h3>
        <p>Details zum Unterthema...</p>
      </section>
      <section>
        <h3>Unterthema 2</h3>
        <p>Weitere Details...</p>
      </section>
    </article>

    <aside> <h3>Autor</h3>
      <p>Infos über den Autor des Beitrags...</p>
      <h3>Verwandte Links</h3>
      <ul>
        <li><a href="...">Link 1</a></li>
        <li><a href="...">Link 2</a></li>
      </ul>
    </aside>
  </main>

  <footer> <p>&copy; 2025 Meine Firma</p>
    <nav aria-label="Fußzeilen-Navigation">
      <ul>
        <li><a href="/impressum.html">Impressum</a></li>
        <li><a href="/datenschutz.html">Datenschutz</a></li>
      </ul>
    </nav>
  </footer>

</body>

Wichtige semantische Elemente:

  • <header>: Enthält typischerweise das Logo, den Seitentitel (<h1> auf der Startseite, oft der Websitename), die Hauptnavigation. Kann auch am Anfang eines <article> oder <section> stehen.
  • <nav>: Umschließt die Hauptnavigationsblöcke der Seite (Hauptmenü, Fußzeilenmenü, Brotkrümelnavigation). Das Attribut aria-label (oder aria-labelledby) ist wichtig, wenn es mehrere <nav>-Elemente auf einer Seite gibt, um Screenreadern zu helfen, sie zu unterscheiden (z.B. “Hauptnavigation”, “Fußzeilen-Navigation”).
  • <main>: Umschließt den einzigartigen Hauptinhalt der Seite. Es sollte nur ein <main>-Element pro Seite geben (das nicht innerhalb von <article>, <aside>, <header>, <footer> oder <nav> verschachtelt ist). Alles, was sich auf jeder Seite wiederholt (wie Header, Footer, Hauptnavigation), gehört nicht in <main>.
  • <article>: Repräsentiert einen vollständigen, in sich geschlossenen und potenziell wiederverwendbaren Inhalt. Beispiele: Blog-Post, Forenbeitrag, Zeitungsartikel, Produktbeschreibung, Kommentar. Ein <article> sollte für sich allein Sinn ergeben.
  • <section>: Repräsentiert einen thematischen Abschnitt innerhalb eines Dokuments. Im Gegensatz zu <article> muss ein <section> nicht für sich allein Sinn ergeben. Es gruppiert zusammengehörige Inhalte. Typischerweise hat jede <section> eine eigene Überschrift (<h2> bis <h6>).
  • <aside>: Enthält Inhalt, der nur lose mit dem umgebenden Hauptinhalt verwandt ist. Wird oft für Seitenleisten (Sidebars) verwendet, die z. B. verwandte Links, Werbung, Autoren-Biografien oder Glossare enthalten.
  • <footer>: Enthält typischerweise Copyright-Informationen, Links zu Impressum und Datenschutz, manchmal auch Kontaktinfos oder eine untergeordnete Navigation. Kann auch am Ende eines <article> oder <section> stehen.

Warum Semantik so wichtig ist:

  • Barrierefreiheit: Screenreader erkennen diese Elemente als Landmarken (Orientierungspunkte). Nutzer können direkt zu <main>, <nav> oder <footer> springen, was die Navigation auf komplexen Seiten enorm erleichtert. Eine Seite nur aus <div>s ist wie ein Buch ohne Kapitelüberschriften für sie.
  • SEO: Suchmaschinen verstehen die Struktur deiner Seite besser. Sie können erkennen, was der Hauptinhalt (<main>, <article>) ist und was eher nebensächlich (<aside>) oder wiederkehrend (<header>, <footer>) ist. Das hilft bei der korrekten Indexierung und Bewertung deiner Inhalte.
  • Wartbarkeit: Semantischer Code ist selbsterklärend. Wenn du oder ein Kollege den Code später liest, ist sofort klar, welche Funktion ein bestimmter Bereich hat. Eine “Suppe” aus unzähligen, unbenannten <div>-Elementen (“Divitis”) ist dagegen schwer zu durchschauen und zu pflegen.
  • Zukunftssicherheit: Semantische Elemente ermöglichen es Browsern und anderen Tools (z. B. Readability-Modi), den Inhalt besser zu interpretieren und darzustellen.

Faustregel: Verwende immer das semantisch passendste Element. Nutze <div> und <span> nur als letzte Option, wenn kein anderes Element passt, meist für rein gestalterische Zwecke (Styling-Hooks in Verbindung mit CSS).

6 | Multimedia einbinden

Moderne Webseiten enthalten oft Videos und Audiodateien.

Video (<video>)

Mit dem <video>-Tag kannst du Videos direkt in deine Seite einbetten, ohne auf externe Player wie YouTube angewiesen zu sein (obwohl das auch geht, siehe unten).

HTML

<video controls
       preload="metadata"
       width="640"
       height="360"
       poster="bilder/video-vorschau.jpg">
  <source src="videos/mein-clip.mp4" type="video/mp4">
  <source src="videos/mein-clip.webm" type="video/webm">
  <track kind="captions"
         src="untertitel/mein-clip-de.vtt"
         srclang="de"
         label="Deutsch">
  <track kind="captions"
         src="untertitel/mein-clip-en.vtt"
         srclang="en"
         label="English">
  Ihr Browser unterstützt das Video-Tag leider nicht.
  <a href="videos/mein-clip.mp4">Video herunterladen</a>.
</video>
  • controls: Dieses boolesche Attribut blendet die Standard-Steuerelemente des Browsers ein (Play/Pause, Lautstärke, Fortschrittsbalken, Vollbild). Ohne controls wäre das Video nur ein Standbild, es sei denn, du steuerst es per JavaScript.
  • preload: Gibt dem Browser einen Hinweis, wie das Video geladen werden soll:
    • auto: Der Browser darf das gesamte Video im Voraus laden (kann Bandbreite kosten).
    • metadata: Nur Metadaten (Dauer, Dimensionen etc.) werden geladen. Empfohlen, da es einen guten Kompromiss darstellt.
    • none: Nichts wird im Voraus geladen, erst wenn der Nutzer auf Play klickt. Spart am meisten Bandbreite, aber der Start kann sich verzögern.
  • width / height: Wie bei Bildern, hilft dem Browser, den Platz zu reservieren. Für responsive Videos nutzt man oft eher CSS (z. B. width: 100%; height: auto;).
  • poster: Gibt den Pfad zu einem Vorschaubild an, das angezeigt wird, bevor das Video geladen wird oder der Nutzer auf Play klickt. Verbessert die Optik und kann Ladezeit überbrücken.
  • <source>: Da nicht alle Browser die gleichen Videoformate unterstützen, kannst du hier mehrere Quellen angeben. Der Browser wählt das erste unterstützte Format. Gängige Formate fürs Web sind MP4 (H.264 Codec) und WebM (VP9 oder AV1 Codec). Gib immer den type an, damit der Browser schnell entscheiden kann.
  • <track>: Sehr wichtig für Barrierefreiheit! Hiermit bindest du Untertitel oder Captions ein.
    • kind="captions": Für gehörlose oder schwerhörige Nutzer (enthält auch Geräuschbeschreibungen).
    • kind="subtitles": Für Nutzer, die die Sprache nicht verstehen (reine Übersetzung des Gesprochenen).
    • src: Pfad zur Untertiteldatei (meist im WebVTT-Format: .vtt).
    • srclang: Sprache der Untertitel (z. B. “de”, “en”).
    • label: Bezeichnung, die im Untertitelmenü des Players angezeigt wird.
  • Fallback-Inhalt: Der Text (und ggf. Link) zwischen <video> und </video> wird nur angezeigt, wenn der Browser das <video>-Tag überhaupt nicht unterstützt (heute sehr selten).

Audio (<audio>)

Funktioniert sehr ähnlich wie <video>, nur eben für Audiodateien (Musik, Podcasts etc.).

HTML

<audio controls preload="metadata">
  <source src="audio/podcast.mp3" type="audio/mpeg">
  <source src="audio/podcast.ogg" type="audio/ogg">
  <track kind="captions" src="untertitel/podcast-de.vtt" srclang="de" label="Deutsch">
  Ihr Browser unterstützt das Audio-Tag leider nicht.
</audio>

Auch hier sind controls, preload, mehrere <source>-Elemente für verschiedene Formate (MP3, Ogg Vorbis, Opus sind gängig) und <track> für Transkripte sinnvoll.

YouTube-Einbettung (<iframe>)

Wenn du Videos von Plattformen wie YouTube oder Vimeo einbetten möchtest, verwendest du meist einen <iframe>. Den Code dafür bekommst du oft1 direkt von der Plattform (“Teilen” -> “Einbetten”).

HTML

<iframe width="560" height="315"
        src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
</iframe>
  • src: Die URL zum eingebetteten Player. Nutze youtube-nocookie.com, um die Privatsphäre deiner Nutzer besser zu schützen (es werden erst Cookies gesetzt, wenn das Video abgespielt wird). Ersetze VIDEO_ID durch die ID des gewünschten Videos.
  • title: Wichtig für Barrierefreiheit! Beschreibt den Inhalt des Iframes für Screenreader.
  • width / height: Feste Größe. Für Responsivität braucht man oft einen CSS-Trick (z. B. mit aspect-ratio oder Padding-Top-Hack).
  • frameborder="0": Entfernt den alten Rahmen um den Iframe.
  • allow: Definiert, welche Browser-Features der Iframe nutzen darf (wichtig für Sicherheit und Funktionalität).
  • allowfullscreen: Erlaubt den Vollbildmodus.

Performance-Tipp: Videos (besonders eingebettete iframes) können das Laden einer Seite stark verlangsamen. Lade sie erst, wenn sie wirklich gebraucht werden:

  • loading="lazy" für iframes: Moderne Browser unterstützen loading="lazy" auch für iframes.
  • Manuelles Lazy Loading (via JavaScript): Für ältere Browser oder mehr Kontrolle kannst du JavaScript verwenden (z. B. mit dem IntersectionObserver API), um das src-Attribut des iframes oder <video>-Tags erst zu setzen, wenn das Element in den sichtbaren Bereich scrollt.

7 | Tabellen – Daten strukturiert darstellen

Tabellen sind dazu da, tabellarische Daten darzustellen – also Informationen, die eine klare Beziehung zwischen Zeilen und Spalten haben (wie Statistiken, Preislisten, Vergleichsdaten).

Wichtiger Hinweis: Verwende Tabellen niemals für das Layout deiner Webseite (also um Elemente nebeneinander zu positionieren). Das war früher üblich, ist aber heute ein absolutes No-Go! Gründe:

  • Semantisch falsch: Eine Tabelle beschreibt Daten, kein Layout.
  • Nicht flexibel/responsive: Tabellen sind starr und passen sich schlecht an verschiedene Bildschirmgrößen an.
  • Schlecht für Barrierefreiheit: Screenreader lesen Tabellen Zelle für Zelle vor und erwarten Daten. Eine Layout-Tabelle ist für sie extrem verwirrend.
  • Schlechte Wartbarkeit: Layout-Änderungen sind in Tabellenlayouts sehr aufwändig.

Für Layouts nutze moderne CSS-Techniken wie Flexbox oder CSS Grid.

Korrekter Aufbau einer Datentabelle:

HTML

<table>
  <caption>Stromerzeugung in Musterstadt – 1. Quartal 2024</caption> <thead> <tr> <th scope="col">Monat</th> <th scope="col">Erzeugt (kWh)</th>
      <th scope="col">Verbraucht (kWh)</th>
    </tr>
  </thead>
  <tbody> <tr>
      <th scope="row">Januar</th> <td>420</td>           <td>380</td>
    </tr>
    <tr>
      <th scope="row">Februar</th>
      <td>390</td>
      <td>350</td>
    </tr>
    <tr>
      <th scope="row">März</th>
      <td>450</td>
      <td>410</td>
    </tr>
  </tbody>
  <tfoot> <tr>
      <th scope="row">Gesamt Q1</th>
      <td>1260</td>
      <td>1140</td>
    </tr>
  </tfoot>
</table>

Wichtige Tabellen-Elemente:

  • <table>: Umschließt die gesamte Tabelle.
  • <caption>: Beschreibt den Inhalt der Tabelle. Sehr wichtig für Screenreader, die dies oft als Erstes vorlesen, um den Kontext zu geben. Sollte immer vorhanden sein!
  • <thead>: Gruppiert die Kopfzeile(n) der Tabelle. Enthält normalerweise <tr> mit <th>-Zellen.
  • <tbody>: Gruppiert die Datenzeilen der Tabelle. Enthält <tr>-Zeilen mit Daten (<td>) und ggf. Zeilenüberschriften (<th>).
  • <tfoot>: Gruppiert die Fußzeile(n) der Tabelle (z. B. für Summen oder Zusammenfassungen). Optional. <thead>, <tbody> und <tfoot> helfen dem Browser bei der Darstellung (z. B. beim Scrollen langer Tabellen) und geben der Struktur mehr Klarheit.
  • <tr>: Definiert eine Tabellenzeile.
  • <th> (Table Header): Definiert eine Kopfzelle. Der Inhalt wird meist fett und zentriert dargestellt. Verwende das scope-Attribut:
    • scope="col": Diese Kopfzelle ist die Überschrift für die Spalte.
    • scope="row": Diese Kopfzelle ist die Überschrift für die Zeile.
    • Warum scope? Es schafft eine explizite Verbindung zwischen Kopfzellen und Datenzellen. Screenreader nutzen diese Information, um dem Nutzer zu sagen, zu welcher Spalte und/oder Zeile eine bestimmte Datenzelle gehört (z. B. “Februar, Erzeugt (kWh): 390”). Ohne scope ist diese Zuordnung für assistive Technologien oft nur schwer oder gar nicht möglich.
  • <td> (Table Data): Definiert eine Standard-Datenzelle.

8 | Formulare – Benutzereingaben erfassen

Formulare sind unerlässlich, um Informationen von Benutzern zu sammeln: Login, Registrierung, Kontaktanfragen, Bestellungen, Suchanfragen etc.

HTML

<form action="/registrierung-speichern" method="post" novalidate>

  <fieldset> <legend>Persönliche Daten</legend> <div> <label for="vorname">Vorname:</label> <input type="text" id="vorname" name="vorname" required minlength="2">
    </div>

    <div>
      <label for="email">E-Mail:</label>
      <input type="email" id="email" name="email" required autocomplete="email">
    </div>

    <div>
      <label for="passwort">Passwort:</label>
      <input type="password" id="passwort" name="passwort" required minlength="8" autocomplete="new-password">
    </div>
  </fieldset>

  <fieldset>
    <legend>Interessen</legend>
    <div>
      <input type="checkbox" id="interesse-technik" name="interessen" value="technik">
      <label for="interesse-technik">Technik</label> </div>
    <div>
      <input type="checkbox" id="interesse-sport" name="interessen" value="sport">
      <label for="interesse-sport">Sport</label>
    </div>
  </fieldset>

  <fieldset>
    <legend>Newsletter</legend>
     <input type="radio" id="newsletter-ja" name="newsletter" value="ja" checked>
     <label for="newsletter-ja">Ja, bitte</label>
     <br>
     <input type="radio" id="newsletter-nein" name="newsletter" value="nein">
     <label for="newsletter-nein">Nein, danke</label>
  </fieldset>

  <div>
    <label for="nachricht">Ihre Nachricht:</label>
    <textarea id="nachricht" name="nachricht" rows="5" required></textarea>
  </div>

  <button type="submit">Registrierung abschließen</button>
  <button type="reset">Eingaben löschen</button>

</form>

Wichtige Formular-Elemente und Konzepte:

  • <form>: Umschließt das gesamte Formular.
    • action: Die URL des serverseitigen Skripts, das die Formulardaten empfangen und verarbeiten soll (z. B. ein PHP-, Python-, Node.js-Skript).
    • method: Die HTTP-Methode, mit der die Daten gesendet werden sollen:
      • get: Hängt die Formulardaten als Schlüssel-Wert-Paare an die URL im action-Attribut an (z. B. /suche?query=html). Sichtbar in der Adressleiste, Lesezeichen-fähig, Längenbeschränkung. Geeignet für Suchanfragen, Filter – nicht für sensible Daten!
      • post: Sendet die Formulardaten im Body der HTTP-Anfrage. Nicht direkt in der URL sichtbar. Keine Längenbeschränkung. Standard für das Senden von Daten, die etwas auf dem Server ändern (Registrierung, Login, Bestellung) und für sensible Daten (Passwörter).
    • novalidate: Dieses Attribut deaktiviert die eingebaute HTML5-Validierung durch den Browser. Nützlich während der Entwicklung oder wenn man eine eigene, komplexere Validierung per JavaScript implementieren möchte. Im Produktivbetrieb sollte man die Browser-Validierung aber meist aktiviert lassen (novalidate weglassen).
  • <fieldset>: Gruppiert logisch zusammengehörige Formularfelder. Verbessert die Struktur und Barrierefreiheit (Screenreader können Fieldsets ankündigen).
  • <legend>: Gibt dem <fieldset> eine Überschrift. Wird von Screenreadern oft zusammen mit den Feldern im Fieldset vorgelesen.
  • <label>: Beschriftet ein Formularfeld. Extrem wichtig!
    • Das for-Attribut des Labels muss den Wert des id-Attributs des zugehörigen Eingabefeldes (<input>, <textarea>, <select>) enthalten. Diese Verknüpfung sorgt dafür, dass:
      • Screenreader wissen, welche Beschriftung zu welchem Feld gehört.
      • Nutzer auf das Label klicken können, um das zugehörige Feld zu aktivieren/fokussieren (besonders hilfreich bei kleinen Checkboxen oder Radiobuttons!).
  • <input>: Das vielseitigste Formularelement. Der type-Attribut bestimmt das Verhalten und Aussehen:
    • type="text": Einzeiliges Textfeld.
    • type="email": Textfeld mit Validierung auf E-Mail-Format (Browser-abhängig). Mobile Tastaturen zeigen oft das “@”-Zeichen an.
    • type="password": Textfeld, dessen Eingabe maskiert wird (Punkte oder Sternchen).
    • type="checkbox": Ankreuzfeld für Mehrfachauswahlen. Mehrere Checkboxen können den gleichen name haben. Der value wird gesendet, wenn die Box angehakt ist.
    • type="radio": Optionsfeld für Einfachauswahl. Alle Radiobuttons einer Gruppe müssen den gleichen name haben, aber unterschiedliche value-Werte. Nur der value des ausgewählten Buttons wird gesendet.
    • type="number": Feld für Zahlen (oft mit kleinen Pfeilen zum Erhöhen/Verringern).
    • type="date": Feld zur Auswahl eines Datums (oft mit Kalender-Popup).
    • type="file": Feld zum Hochladen von Dateien.
    • type="submit": (Veraltet, besser <button type="submit">) Ein Button, der das Formular abschickt.
    • type="reset": (Veraltet, besser <button type="reset">) Ein Button, der alle Formularfelder auf ihren Ursprungszustand zurücksetzt.
  • <textarea>: Mehrzeiliges Textfeld für längere Eingaben.2 rows und cols geben eine ungefähre Größe an (besser per CSS stylen).
  • <select>: Dropdown-Liste. Enthält <option>-Elemente. HTML<label for="land">Land:</label> <select id="land" name="land"> <option value="de">Deutschland</option> <option value="at">Österreich</option> <option value="ch">Schweiz</option> </select>
  • <button>: Flexibler als <input type="submit/reset/button">.
    • type="submit": Standard. Sendet das Formular ab.
    • type="reset": Setzt das Formular zurück. Mit Vorsicht verwenden, Nutzer klicken oft versehentlich darauf!
    • type="button": Tut von sich aus nichts, gedacht für Aktionen per JavaScript.

Wichtige Attribute für <input>, <textarea>, <select>:

  • id: Eindeutiger Identifikator für das Element auf der Seite. Wird vom <label for="..."> verwendet.
  • name: Entscheidend für das Absenden! Der name wird als Schlüssel für den Wert des Feldes verwendet, wenn die Daten an den Server gesendet werden (z. B. email=test@example.com). Felder ohne name werden nicht gesendet.
  • value: Der voreingestellte oder vom Nutzer eingegebene Wert des Feldes (bei text, password, hidden…) oder der Wert, der gesendet wird, wenn das Element ausgewählt ist (bei checkbox, radio, option).
  • required: Macht das Feld zu einem Pflichtfeld. Browser verhindern das Absenden des Formulars, wenn das Feld leer ist (bei aktivierter HTML5-Validierung).
  • minlength / maxlength: Minimale/maximale Zeichenlänge für Textfelder.
  • min / max / step: Für Zahleneingaben (type="number") oder Datums-/Zeiteingaben.
  • pattern: Erlaubt die Angabe eines regulären Ausdrucks, gegen den die Eingabe geprüft wird (z. B. für ein bestimmtes Postleitzahlenformat).
  • placeholder: Zeigt einen Hinweistext im Feld an, solange es leer ist. Achtung: placeholder ersetzt nicht das <label>! Es verschwindet bei der Eingabe und ist für Screenreader oft weniger gut zugänglich.
  • autocomplete: Gibt dem Browser Hinweise, ob und wie er das Feld automatisch ausfüllen kann (z. B. autocomplete="email", autocomplete="given-name", autocomplete="country", autocomplete="new-password", autocomplete="off"). Wichtig für Benutzerfreundlichkeit und Passwort-Manager.

Client-seitige Validierung: Attribute wie required, type=”email”, minlength, pattern ermöglichen eine Validierung direkt im Browser, bevor die Daten gesendet werden. Das gibt dem Nutzer schnelles Feedback.

Aber: Verlasse dich niemals allein auf Client-seitige Validierung! Sie kann leicht umgangen werden (z. B. durch Deaktivieren von JavaScript oder manipulierte Anfragen). Jede Eingabe muss immer auch auf dem Server validiert und bereinigt werden, um Sicherheitslücken (wie XSS – Cross-Site Scripting oder SQL-Injection) zu verhindern!

Sicherheit:

  • Verwende HTTPS für alle Seiten, die Formulare enthalten (besonders Login, Registrierung, Bezahlung), um die Datenübertragung zu verschlüsseln.
  • Setze autocomplete bewusst ein (z. B. off für Einmal-Codes, new-password für Registrierungsformulare).
  • Validiere und bereinige (sanitize) alle Benutzereingaben auf dem Server!

9 | CSS einbinden – Styling hinzufügen

HTML gibt die Struktur, CSS (Cascading Style Sheets) das Aussehen. Es gibt drei Wege, CSS zu einer HTML-Seite hinzuzufügen:

  1. Externes Stylesheet (Empfohlen):Du schreibst dein CSS in eine separate Datei (z. B. styles.css) und verlinkst diese im deines HTML-Dokuments: HTML<head> ... <link rel="stylesheet" href="css/styles.css"> ... </head>
    • rel="stylesheet": Sagt dem Browser, dass es sich um eine CSS-Datei handelt.
    • href: Pfad zur CSS-Datei.
    Vorteile (Warum empfohlen?):
    • Trennung von Inhalt und Präsentation: Hält deinen HTML-Code sauber und auf die Struktur fokussiert.
    • Wiederverwendbarkeit & Caching: Dieselbe CSS-Datei kann für alle Seiten deiner Website verwendet werden. Der Browser muss sie nur einmal herunterladen und kann sie dann aus dem Cache laden, was die Ladezeiten für Folgeseiten erheblich verkürzt.
    • Einfachere Wartung: Änderungen am Design müssen nur an einer Stelle (in der CSS-Datei) vorgenommen werden und wirken sich auf alle Seiten aus.
    • Teamarbeit: Designer können parallel an der CSS-Datei arbeiten.
  2. Internes Stylesheet:Du schreibst CSS-Regeln direkt in ein
    • Gilt nur für diese eine HTML-Seite.
    • Kein Caching-Vorteil über mehrere Seiten hinweg.
    • Vermischt Struktur und Stil stärker. Wann sinnvoll? Für sehr kleine Projekte (eine einzelne Seite), schnelle Tests oder Demos, oder wenn eine Seite wirklich ganz spezifische Stile braucht, die nirgendwo sonst verwendet werden.
  3. Inline Styles:Du schreibst CSS-Regeln direkt in das style-Attribut eines einzelnen HTML-Elements: HTML<p style="color: red; margin-left: 20px;">Dieser Absatz ist rot und eingerückt.</p>Nachteile:
    • Sehr schlechte Praxis für allgemeines Styling!
    • Maximale Vermischung von Inhalt und Präsentation.
    • Extrem schwer zu warten (Änderungen müssen an jedem Element einzeln vorgenommen werden).
    • Überschreibt externe und interne Styles (hohe Spezifität), was zu unerwartetem Verhalten führen kann.
    • Kein Caching. Wann (selten) sinnvoll?
    • In HTML-E-Mails (da viele E-Mail-Clients externe/interne Stylesheets schlecht oder gar nicht unterstützen).
    • Manchmal für dynamisch per JavaScript gesetzte Stile (obwohl das Setzen von CSS-Klassen oft die bessere Alternative ist).
    • Für absolute Ausnahmefälle im normalen Webdesign – möglichst vermeiden!

Responsive Design & CSS:

Der Grundstein für Responsive Design wird mit dem <meta name=”viewport” …>-Tag im HTML gelegt (siehe Kapitel 2). Das eigentliche responsive Verhalten wird dann in CSS mithilfe von Media Queries (@media) definiert. Damit kannst du Stile festlegen, die nur unter bestimmten Bedingungen gelten (z. B. ab einer bestimmten Bildschirmbreite).

CSS

/* Standard-Stile (z.B. für schmale Bildschirme / Mobile First) */
body { font-size: 16px; }

/* Stile für Bildschirme ab 768px Breite */
@media (min-width: 768px) {
  body { font-size: 18px; }
  .sidebar { display: block; } /* Seitenleiste einblenden */
}

Verwende in CSS bevorzugt relative Einheiten wie em (relativ zur Schriftgröße des Elternelements), rem (relativ zur Schriftgröße des Wurzelelements <html>), % (relativ zum Elternelement) oder Viewport-Einheiten (vw, vh), um flexiblere und besser skalierbare Layouts zu erstellen, die sich gut an verschiedene Bildschirmgrößen und Benutzereinstellungen (z. B. Zoom) anpassen.

10 | JavaScript einbinden – Interaktivität schaffen

JavaScript erweckt deine Webseite zum Leben: Animationen, Formularvalidierung in Echtzeit, Nachladen von Inhalten ohne Neuladen der Seite (AJAX), Spiele, komplexe Benutzeroberflächen und vieles mehr.

JavaScript wird üblicherweise in separaten .js-Dateien geschrieben und dann im HTML-Dokument eingebunden, meistens kurz vor dem schließenden </body>-Tag:

HTML

  ... <script src="js/app.js" defer></script>
</body>
</html>
  • <script>: Das Tag zum Einbinden oder Schreiben von JavaScript.
  • src: Pfad zur externen JavaScript-Datei. Wie bei CSS ist das Auslagern in externe Dateien die empfohlene Methode (Caching, Trennung der Zuständigkeiten, Wartbarkeit).
  • defer Attribut: Dieses Attribut ist wichtig für die Performance!
    • Ohne defer oder async: Wenn der Browser auf ein <script>-Tag stößt, stoppt er das Parsen (Analysieren) des HTML-Codes, lädt die JS-Datei herunter und führt sie sofort aus. Erst danach wird das HTML weiter geparst. Das kann das Rendern der Seite blockieren und zu einer spürbaren Verzögerung führen, besonders bei großen Skripten oder langsamen Verbindungen.
    • Mit defer: Der Browser lädt die JS-Datei parallel zum Parsen des HTML herunter. Das Skript wird aber erst ausgeführt, nachdem das gesamte HTML geparst wurde, aber noch bevor das DOMContentLoaded-Ereignis ausgelöst wird. Die Reihenfolge mehrerer defer-Skripte bleibt erhalten. Dies ist oft die beste Wahl für Skripte, die das DOM (die HTML-Struktur) manipulieren müssen, da sichergestellt ist, dass alle HTML-Elemente beim Ausführen des Skripts verfügbar sind.
  • async Attribut:
    • Der Browser lädt die JS-Datei ebenfalls parallel zum Parsen des HTML herunter.
    • Das Skript wird aber sofort ausgeführt, sobald es heruntergeladen wurde, unabhängig davon, ob das HTML fertig geparst ist. Das Parsen wird während der Ausführung unterbrochen.
    • Die Reihenfolge mehrerer async-Skripte ist nicht garantiert. Sie werden ausgeführt, sobald sie fertig geladen sind.
    • Geeignet für unabhängige Skripte, die nicht direkt auf das DOM zugreifen oder von anderen Skripten abhängen (z. B. Tracking-Skripte wie Google Analytics, Werbeskripte).

Wo platzieren?

Die klassische Empfehlung war, <script>-Tags ans Ende des <body> zu setzen. Mit defer ist das aber weniger kritisch; du kannst <script src=”app.js” defer></script> auch in den <head> setzen. Das hat den Vorteil, dass der Download früher beginnt. async-Skripte können ebenfalls in den <head>.

Progressive Enhancement (Progressive Verbesserung)

Ein wichtiges Prinzip bei der Webentwicklung:

  1. Baue die Basis mit HTML: Stelle sicher, dass der Inhalt strukturiert und zugänglich ist. Die Kernfunktionalität (z. B. das Absenden eines Formulars, das Navigieren über Links) sollte ohne CSS und JavaScript funktionieren.
  2. Füge CSS hinzu: Verbessere das Aussehen und Layout für Nutzer, deren Browser CSS unterstützen.
  3. Erweitere mit JavaScript: Füge Interaktivität, Komfortfunktionen und erweiterte Features hinzu für Nutzer, deren Browser JavaScript aktiviert haben.

Warum ist das wichtig?

  • Barrierefreiheit: Nutzer mit Screenreadern oder ohne Maus können die Seite bedienen. Suchmaschinen (Crawler) können den Inhalt indexieren.
  • Robustheit: Die Seite bleibt benutzbar, auch wenn JavaScript fehlschlägt (Netzwerkfehler, Skriptfehler, vom Nutzer blockiert).
  • Performance: Die grundlegende Seite wird schnell geladen und angezeigt, auch auf langsameren Geräten oder Verbindungen. Interaktive Elemente werden nachgeladen.

Beispiel: Ein Akkordeon (aufklappbarer Inhaltsbereich).

  • HTML: Alle Inhalte sind normal untereinander sichtbar.
  • CSS: (Optional) Stile für die Bereiche.
  • JavaScript: Fügt Buttons hinzu, versteckt die Inhalte initial (außer dem ersten vielleicht) und steuert das Auf-/Zuklappen beim Klick.

11 | Best Practices & Barrierefreiheit (Accessibility – a11y)

Guter HTML-Code ist nicht nur syntaktisch korrekt, sondern auch semantisch sinnvoll, performant und für alle Nutzer zugänglich.

  • Semantik vor Optik: Verwende immer das HTML-Element, das die Bedeutung deines Inhalts am besten beschreibt, nicht das, was vielleicht zufällig so aussieht, wie du es möchtest. <strong> für Wichtigkeit, nicht nur für Fett. <button> für Klick-Aktionen, nicht ein <div> mit JavaScript-Klick-Handler (es sei denn, du fügst die nötigen ARIA-Attribute und Tastatur-Handler hinzu). Screenreader und Suchmaschinen verlassen sich auf die Semantik.
  • Barrierefreiheit (a11y) von Anfang an mitdenken:
    • Farbkontrast: Achte auf ausreichenden Kontrast zwischen Textfarbe und Hintergrundfarbe. Die WCAG (Web Content Accessibility Guidelines) 2.2 AA fordern ein Verhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text (ab 18pt normal oder 14pt fett). Es gibt viele Online-Tools, um Kontraste zu prüfen.
    • Tastatur-Navigation: Stelle sicher, dass alle interaktiven Elemente (Links, Buttons, Formularfelder) ausschließlich mit der Tastatur (Tab-Taste zum Vorwärtsnavigieren, Shift+Tab zum Rückwärtsnavigieren, Enter/Leertaste zum Auslösen) erreichbar und bedienbar sind. Vermeide es, die outline-Eigenschaft in CSS komplett zu entfernen, ohne eine sichtbare Alternative für den Fokus-Zustand bereitzustellen (:focus { ... }). Wenn du eigene interaktive Widgets baust (z.B. mit divs), nutze tabindex="0", um sie in die Tab-Reihenfolge aufzunehmen, und ARIA-Attribute (role="button", aria-pressed etc.), um ihre Funktion für Screenreader zu beschreiben.
    • ARIA (Accessible Rich Internet Applications): Eine Sammlung von Attributen, die du zu HTML hinzufügen kannst, um die Barrierefreiheit komplexer Widgets (Karussells, Tabs, Modals), die mit JavaScript gebaut wurden, zu verbessern, wenn die native HTML-Semantik nicht ausreicht. Setze ARIA aber mit Bedacht ein – falsches ARIA kann mehr schaden als nutzen. Oft ist die Verwendung nativer HTML-Elemente (<button>, <input type="checkbox"> etc.) die bessere und einfachere Lösung.
    • Alternativtexte: Wie in Kapitel 4 besprochen, sind alt-Attribute für <img> essenziell.
    • Untertitel/Transkripte: Für <video> und <audio> (siehe Kapitel 6).
    • Formular-Labels: Korrekte Verknüpfung mit for/id (siehe Kapitel 8).
  • Performance / Ladezeit optimieren: Niemand wartet gerne.
    • Bilder optimieren: Komprimiere Bilder vor dem Hochladen (Tools wie TinyPNG/TinyJPG, Squoosh). Wähle das richtige Format (JPEG für Fotos, PNG für Grafiken mit Transparenz, WebP/AVIF für bessere Kompression). Liefere Bilder in der benötigten Größe aus (nicht riesige Bilder vom Server laden und im Browser verkleinern).
    • Lazy Loading: Nutze loading="lazy" für <img> und <iframe> (siehe Kapitel 4 & 6). Lade Videos und andere ressourcenintensive Inhalte erst bei Bedarf (z. B. per IntersectionObserver).
    • CSS/JS minimieren: Entferne unnötige Leerzeichen, Kommentare und kürze Variablennamen in CSS- und JS-Dateien für die Produktionsumgebung. Das erledigen oft Build-Tools automatisch.
    • Weniger HTTP-Requests: Fasse, wenn sinnvoll, mehrere CSS- oder JS-Dateien zu einer zusammen (erledigen ebenfalls Build-Tools).
    • Caching nutzen: Konfiguriere deinen Webserver so, dass er Browsern erlaubt, statische Ressourcen (CSS, JS, Bilder) zwischenzuspeichern (siehe externes CSS in Kapitel 9).
  • Validieren: Überprüfe deinen HTML-Code regelmäßig mit dem offiziellen W3C Validator (https://validator.w3.org/). Er findet Syntaxfehler, Tippfehler und veraltete Elemente, die zu Darstellungsproblemen oder schlechterer Zugänglichkeit führen können. Mache es dir zur Gewohnheit, deinen Code früh und oft zu validieren.

12 | Werkzeuge & Workflow

Effizientes Arbeiten braucht gute Werkzeuge und einen sinnvollen Ablauf.

ToolBeschreibung & Nutzen
Code-EditorEin Programm zum Schreiben von Code. Visual Studio Code (VS Code) ist kostenlos, sehr beliebt und hat viele nützliche Erweiterungen. Alternativen: Sublime Text, Atom, Nova (macOS), WebStorm (kostenpflichtig). Bieten Syntax-Hervorhebung, Code-Vervollständigung, Fehlererkennung.
Live ServerEine Erweiterung für VS Code (und andere Editoren), die einen lokalen Entwicklungsserver startet. Dein Browser aktualisiert sich automatisch, sobald du eine HTML-, CSS- oder JS-Datei speicherst. Enorm praktisch, erspart manuelles Neuladen.
EmmetIn vielen Editoren (wie VS Code) integriert. Ermöglicht das schnelle Schreiben von HTML/CSS durch Kurzschreibweisen. Beispiel: ul>li*3>a[href="#"]{Link $} + Tab-Taste generiert: <ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li></ul>. Spart enorm viel Tipparbeit!
Browser DevToolsDas wichtigste Werkzeug zum Debuggen! In jedem modernen Browser integriert (meist per F12-Taste aufrufbar). Wichtige Tabs: &lt;br> – Elements (Elemente/Inspektor): Zeigt das Live-DOM (die aktuelle HTML-Struktur) an, erlaubt das Untersuchen und temporäre Ändern von HTML und CSS-Regeln. &lt;br> – Console (Konsole): Zeigt JavaScript-Fehler und -Log-Ausgaben (console.log()) an. &lt;br> – Network (Netzwerk): Zeigt alle geladenen Ressourcen (HTML, CSS, JS, Bilder), deren Größe und Ladezeit an. Hilft Performance-Engpässe zu finden. &lt;br> – Application (Anwendung): Zum Untersuchen von Speicher (LocalStorage, SessionStorage, Cookies). &lt;br> – Lighthouse/Audit: Bietet automatisierte Tests für Performance, Accessibility, SEO und Best Practices. &lt;br> – Mobile View / Responsive Design Mode: Simuliert verschiedene Bildschirmgrößen und Geräte.
Git & GitHubGit: Ein Versionskontrollsystem. Es verfolgt jede Änderung an deinem Code. Du kannst zu früheren Versionen zurückkehren, Änderungen vergleichen, parallel an verschiedenen Features arbeiten (Branches) und sicher sein, dass dein Code-Verlauf gespeichert ist. Unverzichtbar für jedes ernsthafte Projekt, auch wenn du allein arbeitest. &lt;br> GitHub (oder GitLab, Bitbucket): Eine Online-Plattform zum Hosten deiner Git-Repositories. Ermöglicht Zusammenarbeit im Team, Backups deines Codes und oft auch kostenloses Hosting für statische Webseiten (GitHub Pages).
PrettierEin automatischer Code-Formatierer. Sorgt dafür, dass dein Code (HTML, CSS, JS etc.) immer konsistent formatiert ist (Einrückungen, Leerzeichen, Zeilenumbrüche). Lässt sich in Editoren integrieren und kann beim Speichern automatisch ausgeführt werden. Spart Diskussionen über Stilfragen im Team und verbessert die Lesbarkeit.
ESLintEin Linter für JavaScript (es gibt auch Linter für CSS und HTML). Analysiert deinen Code auf potenzielle Fehler, problematische Muster und Stil-Verstöße (basierend auf konfigurierbaren Regeln). Hilft, Fehler frühzeitig zu finden und einen konsistenten, hochwertigen Code-Stil durchzusetzen.

Typischer Workflow (vereinfacht):

  1. Projektordner anlegen.
  2. Git initialisieren (git init).
  3. HTML-Grundgerüst erstellen (index.html).
  4. Mit Live Server im Browser öffnen.
  5. HTML-Struktur mit semantischen Tags aufbauen (Emmet nutzen!).
  6. CSS-Datei erstellen (styles.css), verlinken und Stile hinzufügen.
  7. (Optional) JavaScript-Datei erstellen (app.js), einbinden (defer!) und Interaktivität hinzufügen.
  8. Regelmäßig in den DevTools prüfen (Layout, Konsole, Responsivität).
  9. Code mit Prettier formatieren lassen.
  10. Änderungen in Git committen (git add ., git commit -m "Beschreibung der Änderung").
  11. (Optional) Auf GitHub pushen (git push).
  12. Mit dem W3C Validator prüfen. Mit Lighthouse testen.

13 | Mini‑Projekt: Portfolio‑Seite

Theorie ist gut, Praxis ist besser! Lass uns eine einfache Portfolio-Seite erstellen, um das Gelernte anzuwenden.

  1. Projektordner anlegen: portfolio/ ├── index.html ├── css/ │ └── style.css ├── img/ │ └── (Bilder hier ablegen, z.B. profilbild.jpg) └── js/ └── script.js (optional für Interaktivität)
  2. HTML-Struktur (index.html):
    • Grundgerüst (<!DOCTYPE>, <html>, <head> mit title, charset, viewport, Link zu style.css, <script> mit defer).
    • <body>
      • <header>: Dein Name (evtl. <h1> hier oder im <main>), kurze Berufsbezeichnung/Slogan, <nav> mit Links zu Abschnitten (z. B. “#über-mich”, “#projekte”, “#kontakt”).
      • <main>:
        • <section id="über-mich">: Überschrift (<h2>Über mich), ein Absatz mit einer kurzen Vorstellung, vielleicht ein <img> mit deinem Profilbild (alt-Text nicht vergessen!).
        • <section id="projekte">: Überschrift (<h2>Projekte), mehrere <article>-Elemente für einzelne Projekte. Jedes <article> könnte eine Überschrift (<h3>Projekttitel), eine kurze Beschreibung (<p>), einen Link zum Projekt (falls vorhanden) und evtl. ein kleines Vorschaubild enthalten.
        • <section id="kontakt">: Überschrift (<h2>Kontakt), Kontaktmöglichkeiten (E-Mail-Adresse als mailto:-Link, Links zu sozialen Profilen). Evtl. ein einfaches Kontaktformular (siehe Kapitel 8), falls du serverseitige Verarbeitung hast/planst.
      • <footer>: Copyright-Hinweis (&copy; Jahr Dein Name), vielleicht Links zu Impressum/Datenschutz (wichtig bei Veröffentlichung!).
    • Verwende durchgehend semantische Tags!
  3. CSS (css/style.css):
    • Basis-Styling: Schriftarten, Farben (definiere Farben als CSS-Variablen für einfache Änderungen: :root { --primary-color: #333; } body { color: var(--primary-color); }).
    • Layout: Nutze Flexbox oder CSS Grid für die Hauptstruktur (z. B. um Header-Inhalte anzuordnen, Projekte nebeneinander darzustellen, Footer-Elemente zu positionieren). Vermeide Floats für das Hauptlayout.
    • Responsivität: Beginne mit Stilen für schmale Bildschirme (Mobile First). Füge @media-Queries hinzu (z. B. bei min-width: 768px), um das Layout für größere Bildschirme anzupassen (z. B. Navigation anders darstellen, Projekte in mehreren Spalten anzeigen).
    • Visuelle Details: Abstände (margin, padding), Rahmen, Hover-Effekte für Links/Buttons.
  4. (Optional) Interaktivität (js/script.js):
    • Ein einfacher Dark-Mode-Toggle: Ein Button, der beim Klick eine CSS-Klasse zum <body>-Element hinzufügt/entfernt, welche dann über CSS die Farben umkehrt. Speichere die Auswahl des Nutzers im localStorage.
    • “Smooth Scrolling” für die internen Navigationslinks.
  5. Deployment (Veröffentlichung):
    • Erstelle ein GitHub Repository für dein Projekt.
    • Pushe deinen lokalen Code dorthin.
    • Gehe in die Repository-Settings auf GitHub -> Pages.
    • Wähle den Branch (meist main oder master) aus, der veröffentlicht werden soll, und den Ordner (meist /root).
    • Nach kurzer Zeit ist deine Seite unter einer *.github.io-Adresse online erreichbar!

14 | Nächste Schritte

HTML ist die Grundlage, aber das Web besteht aus mehr. Sinnvolle nächste Lernziele:

  • CSS vertiefen:
    • Flexbox & Grid: Meistere diese beiden modernen Layout-Module. Sie sind essenziell für komplexe und responsive Designs. Flexbox für eindimensionale Layouts (Zeilen oder Spalten), Grid für zweidimensionale (Zeilen und Spalten).
    • CSS-Variablen (Custom Properties): Für wiederverwendbare Werte (Farben, Größen) und Theming (z. B. Dark Mode).
    • Animationen & Transitions: Für subtile Effekte und Nutzerführung.
    • Selektoren: Lerne fortgeschrittene Selektoren, um Elemente präziser anzusprechen.
    • CSS-Frameworks (optional): Bootstrap (sehr verbreitet, viele Komponenten), Tailwind CSS (Utility-First-Ansatz, sehr flexibel). Können die Entwicklung beschleunigen, aber lerne zuerst die CSS-Grundlagen!
  • JavaScript vertiefen:
    • ES6+ Features: Moderne Syntax wie let/const, Pfeilfunktionen (=>), Klassen, Module.
    • DOM Manipulation: Elemente auswählen, erstellen, ändern, löschen. Ereignisse behandeln (Klicks, Eingaben).
    • Asynchrones JavaScript: Promises, async/await zum Umgang mit Operationen, die Zeit brauchen (z. B. Daten vom Server laden).
    • Fetch API: Zum Senden und Empfangen von Daten von/zu einem Server (AJAX).
    • JavaScript Frameworks/Bibliotheken (optional): React, Vue, Angular sind populär für den Bau komplexer Single-Page Applications (SPAs). Svelte ist ein weiterer interessanter Ansatz. jQuery ist älter, aber immer noch in vielen Projekten zu finden (lerne aber besser erst “Vanilla” JS).
  • Barrierefreiheit (Accessibility – a11y) weiter lernen:
    • WCAG verstehen: Beschäftige dich intensiver mit den Richtlinien.
    • ARIA im Detail: Wann und wie ARIA-Attribute korrekt einsetzen.
    • Testing Tools: Nutze Tools wie axe-core (Browser-Erweiterung), WAVE oder die Accessibility-Features der Browser DevTools, um Probleme zu finden. Führe manuelle Tests durch (Tastatur, Screenreader wie NVDA, VoiceOver).
  • Web Performance Optimierung (WPO):
    • Core Web Vitals (CWV): Verstehe die Metriken von Google (LCP, FID/INP, CLS) und wie du sie optimieren kannst.
    • Fortgeschrittenes Lazy Loading: Für Videos, Iframes, aber auch CSS-Hintergrundbilder.
    • Code Splitting: Lade nur den JavaScript-Code, der für die aktuelle Seite benötigt wird (wird oft von Frameworks/Build-Tools unterstützt).
    • Server-Optimierung: Caching, Komprimierung (Gzip/Brotli), CDNs (Content Delivery Networks).
  • Build Tools: Werkzeuge wie Vite, Parcel, Webpack helfen, den Entwicklungsprozess zu automatisieren (Code bündeln, minimieren, moderne Features für ältere Browser umwandeln (Transpiling), Entwicklungs-Server starten etc.).

15 | Glossar

BegriffErklärung
ElementEin Baustein einer HTML-Seite. Besteht meist aus einem öffnenden Tag (z. B. <p>), dem Inhalt und einem schließenden Tag (z. B. </p>). Leere Elemente (z.B. <img>, <br>) haben keinen Inhalt und oft keinen schließenden Tag (oder einen selbstschließenden /).
TagDie Markierung, die ein Element definiert (z. B. <p>, <h1>, <img>).
AttributEine zusätzliche Information oder Einstellung für ein HTML-Element, die im öffnenden Tag steht. Besteht aus einem Namen und einem Wert (z. B. href="url", alt="text", class="name").
DOM(Document Object Model) Eine programmierbare Schnittstelle für HTML-Dokumente. Der Browser erstellt aus dem HTML-Code eine Baumstruktur (den DOM-Baum), auf die JavaScript zugreifen kann, um die Seite dynamisch zu lesen oder zu verändern.
ViewportDer sichtbare Bereich des Browserfensters, in dem die Webseite angezeigt wird. Die Größe variiert je nach Gerät und Fenstergröße.
Semantisches TagEin HTML-Tag, das die Bedeutung oder die Rolle seines Inhalts beschreibt (z. B. <article>, <nav>, <strong>), nicht primär sein Aussehen.
ARIA(Accessible Rich Internet Applications) Eine Sammlung von HTML-Attributen, die dazu dienen, die Barrierefreiheit von Webseiten zu verbessern, insbesondere für dynamische Inhalte und komplexe UI-Komponenten, die mit JavaScript erstellt wurden.
CSS SelektorEin Muster in CSS, das bestimmt, auf welche(s) HTML-Element(e) eine Stilregel angewendet werden soll (z. B. h1, .mein-klasse, #eindeutige-id, nav > ul > li).
Responsive DesignEine Gestaltungs- und Technik-Praxis, die darauf abzielt, dass sich eine Webseite automatisch an die Bildschirmgröße und Ausrichtung des verwendeten Geräts anpasst, um auf allen Geräten (Desktop, Tablet, Smartphone) eine optimale Benutzererfahrung zu bieten.
URL/URI(Uniform Resource Locator / Identifier) Die eindeutige Adresse einer Ressource im Web (z. B. einer Webseite, eines Bildes).

16 | Ressourcen

Abschließender Tipp: Der absolut beste Weg, HTML (und CSS/JS) zu lernen, ist machen, machen, machen! Nimm dieses Tutorial, öffne deinen Code-Editor, erstelle eine index.html-Datei und beginne direkt mit dem Grundgerüst aus Kapitel 2. Baue die Beispiele nach, experimentiere, ändere Dinge und schau, was passiert. Viel Erfolg!

Hinweis: Dieses Tutorial wurde mit Unterstützung von KI erstellt.

Schlagwörter:

Wolfgang Walk

Ingenieur, Programmierer und Schriftsteller aus Leidenschaft. Geboren in den goldenen 80ern, viel erlebt und immer mit den Aufgaben gewachsen.

Das könnte dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert