Kapitel 11: HTML5-Neuerungen

🚀 Lernziel: Moderne HTML5-Features nutzen - aktuell für 2026!

11.1 HTML5 semantische Tags im Detail

HTML5 brachte semantische Tags, die die SEO und Barrierefreiheit verbessern.

Wichtige semantische Tags:

Tag	Bedeutung	Verwendung
<header>	Kopfbereich	Logo, Navigation, Titel
<nav>	Navigation	Hauptnavigationslinks
<main>	Hauptinhalt	Einmalig pro Seite!
<section>	Abschnitt	Thematisch zusammengehörig
<article>	Artikel	Eigenständiger Inhalt
<aside>	Seitenleiste	Zusatzinformationen
<footer>	Fußbereich	Copyright, Kontakt
<figure>	Bild/Video-Container	Mit <figcaption>
<figcaption>	Bildunterschrift	Beschreibung zu figure
<time>	Zeitangabe	Veröffentlichungsdatum
<mark>	Hervorgehoben	Textmarker-Effekt

Beispiel - Blog-Post mit semantischen Tags:

<article>
  <header>
    <h2>Wie ich HTML gelernt habe</h2>
    <time datetime="2026-05-26">26. Mai 2026</time>
  </header>
  
  <section>
    <p>Ich started mit...</p>
    <figure>
      <img src="screenshot.jpg" alt="Mein erster Code">
      <figcaption>Mein erstes HTML-Programm</figcaption>
    </figure>
  </section>
  
  <footer>
    <p>Tags: <mark>HTML</mark>, <mark>Lernen</mark></p>
  </footer>
</article>

---

11.2 HTML5 Medien-Tags: video und audio

video-Tag (Video einbinden)

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Dein Browser unterstützt kein Video.
</video>

Wichtige Attribute:

Attribut	Funktion
controls	Bedienelemente anzeigen
autoplay	Automatisch abspielen
loop	Endlosschleife
muted	Stummgeschaltet
poster	Vorschaubild

audio-Tag (Audio einbinden)

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Dein Browser unterstützt kein Audio.
</audio>

Beispiel - Video mit Vorschaubild:

<video controls width="800" poster="vorschaubild.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  Dein Browser unterstützt das Video-Tag nicht.
</video>

---

11.3 HTML5 Formular-neue Typen

HTML5 führte neue Input-Typen für bessere Benutzererfahrung ein.

Neue Input-Typen:

Typ	Funktion	Benutzervorteil
email	E-Mail-Validierung	Zeigt Tastatur mit @-Zeichen (Mobile)
tel	Telefonnummer	Zeigt Nummerntastatur (Mobile)
number	Zahleneingabe	Mit Hoch/Runter-Pfeilen
date	Datumsauswahl	Öffnet Datums-Picker
color	Farbauswahl	Öffnet Farbwähler
range	Schieberegler	Für Zahlenbereiche
url	URL-Validierung	Validiert URL-Format
search	Suchfeld	Mit "X" zum Löschen

Beispiele:

<!-- E-Mail mit Validierung -->
<input type="email" required>

<!-- Datumsauswahl -->
<input type="date" name="geburtstag">

<!-- Farbwähler -->
<input type="color" name="farbe" value="#ff0000">

<!-- Schieberegler -->
<input type="range" min="0" max="100" value="50">

<!-- Suchfeld -->
<input type="search" placeholder="Suchen...">

---

11.4 HTML5 neue Attribute

HTML5 führte praktische Attribute ein, die JavaScript ersetzen können.

Wichtige neue Attribute:

Attribut	Funktion	Beispiel
required	Pflichtfeld	<input required>
placeholder	Platzhaltertext	placeholder="E-Mail"
autofocus	Automatischer Fokus	<input autofocus>
autocomplete	Autovervollständigung	autocomplete="on"
pattern	Regulärer Ausdruck	pattern="[A-Za-z]{3}"
min / max	Minimale/Maximale Werte	<input type="number" min="0" max="100">
step	Schrittweite	<input type="number" step="5">

Beispiel - Formular mit HTML5-Attributen:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" required autofocus>
  
  <label for="email">E-Mail:</label>
  <input type="email" id="email" required placeholder="name@example.com">
  
  <label for="alter">Alter:</label>
  <input type="number" id="alter" min="18" max="100">
  
  <button type="submit">Absenden</button>
</form>

---

11.5 Anfänger-Falle: Browser-Kompatibilität

Problem: Nicht alle Browser unterstützen alle HTML5-Features.

Lösungen:

1. Fallback-Content verwenden

<video controls>
  <source src="video.mp4" type="video/mp4">
  <!-- Fallback -->
  <p>Dein Browser unterstützt kein Video. 
     <a href="video.mp4">Lade das Video herunter</a>
  </p>
</video>

2. Polyfills verwenden (fortgeschritten)

• Modernizr.js für Feature-Erkennung
• Fallback-Skripte für alte Browser

3. Can I Use überprüfen

• Besuche: https://caniuse.com/
• Prüfe, welche Browser ein Feature unterstützen

Tipp: Teste deine Webseite in verschiedenen Browsern!

---

11.6 Praxis: Webseite mit Video und neuen Formularen

Aufgabe: Erstelle eine Seite mit Video und HTML5-Formularen.

Lösung:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Demo-Seite</title>
</head>
<body>
  <header>
    <h1>Mein HTML5-Tutorial</h1>
  </header>
  
  <main>
    <section>
      <h2>Video-Tutorial</h2>
      <video controls width="800" poster="vorschaubild.jpg">
        <source src="tutorial.mp4" type="video/mp4">
        Dein Browser unterstützt kein Video.
      </video>
    </section>
    
    <section>
      <h2>Kontaktformular</h2>
      <form>
        <label for="name">Name:</label>
        <input type="text" id="name" required>
        
        <label for="email">E-Mail:</label>
        <input type="email" id="email" required placeholder="name@example.com">
        
        <label for="geburtstag">Geburtstag:</label>
        <input type="date" id="geburtstag">
        
        <label for="farbe">Lieblingsfarbe:</label>
        <input type="color" id="farbe" value="#ff0000">
        
        <button type="submit">Absenden</button>
      </form>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2026 Mein Tutorial</p>
  </footer>
</body>
</html>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ HTML5 semantische Tags (SEO-Optimierung)
• ✅ Medien-Tags (<video>, <audio>)
• ✅ Neue Formular-Typen (email, date, color, etc.)
• ✅ Neue Attribute (required, placeholder, autofocus)
• ✅ Browser-Kompatibilitäts-Probleme zu lösen
• ✅ Eine moderne Webseite mit HTML5 zu erstellen

🎯 Nächster Schritt: In Kapitel 12 lernst du semantische Entwicklung (SEO-Kern)!

---

← Zurück zu Kapitel 10: Formular-TagsWeiter zu Kapitel 12: Semantische Entwicklung →