Was ist HTML5?

HTML5 ist die fünfte und aktuellste Version der Hypertext Markup Language (HTML), die grundlegende Sprache des Webs zur Strukturierung von Inhalten auf Webseiten. Mit HTML5 wurden zahlreiche neue Features und Funktionen eingeführt, die es Entwicklern ermöglichen, moderne, interaktive und plattformübergreifende Webanwendungen zu erstellen. Es wurde von der Web Hypertext Application Technology Working Group (WHATWG) entwickelt und ist seit 2014 ein offizieller Standard des World Wide Web Consortiums (W3C).

HTML
HTML

Hintergrund und Entwicklung von HTML5

HTML wurde ursprünglich von Tim Berners-Lee im Jahr 1991 eingeführt und hat sich über die Jahre weiterentwickelt. Die letzte große Version vor HTML5 war HTML4, das 1999 standardisiert wurde. Mit der rasanten Entwicklung des Internets und den Anforderungen an moderne Webanwendungen wurden die Schwächen von HTML4 immer deutlicher.

HTML5 wurde entwickelt, um:

  • Die Anforderungen an multimediale Inhalte wie Audio und Video zu erfüllen.
  • Eine bessere Integration mit CSS und JavaScript zu gewährleisten.
  • Die Benutzererfahrung (UX) auf mobilen Geräten zu verbessern.
  • Interaktive und dynamische Inhalte zu erleichtern.

Wichtige Features von HTML5

HTML5 bringt viele neue Elemente, Attribute und APIs (Application Programming Interfaces) mit sich, die die Webentwicklung revolutioniert haben. Hier sind die wichtigsten Neuerungen:

1. Neue Semantische Elemente

HTML5 hat mehrere neue semantische Elemente eingeführt, die den Code lesbarer machen und die Struktur einer Webseite besser definieren:

  • <header>: Definiert den Kopfbereich einer Webseite oder eines Abschnitts.
  • <footer>: Repräsentiert den Fußbereich einer Seite oder eines Abschnitts.
  • <article>: Beschreibt unabhängige Inhalte wie Blog-Posts oder Nachrichtenartikel.
  • <section>: Gruppiert thematisch zusammenhängende Inhalte.
  • <aside>: Für Nebeninhalte wie Randnotizen oder Werbung.
  • <nav>: Enthält Navigationselemente wie Menüs oder Links.

2. Multimedia-Unterstützung

HTML5 macht die Integration von Audio und Video einfacher und plattformunabhängig:

  • <audio>: Ermöglicht das Einbinden von Audioinhalten ohne Plugins wie Flash.
  • <video>: Für die Einbindung von Videoinhalten, mit Unterstützung für Untertitel und mehrere Formate.

Beispiel:

<video controls>
    <source src="video.mp4" type="video/mp4">
    Ihr Browser unterstützt kein HTML5-Video.
</video>

3. Formularelemente

HTML5 verbessert Formulare durch neue Eingabetypen und Validierungsfunktionen:

  • Neue Eingabetypen: email, url, tel, number, date.
  • Eingebaute Validierung: Browser können Felder automatisch überprüfen.
  • Neue Attribute: placeholder, required, pattern.

Beispiel:

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Absenden</button>
</form>

4. Canvas und SVG

Mit HTML5 können Entwickler Grafiken und Animationen direkt im Browser erstellen, ohne auf externe Plugins angewiesen zu sein:

  • <canvas>: Ermöglicht das Zeichnen von 2D- und 3D-Grafiken mit JavaScript.
  • SVG (Scalable Vector Graphics): Für skalierbare Vektorgrafiken.

Beispiel für Canvas:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 50);
</script>

5. Offline-Funktionalität

HTML5 führt Technologien ein, die es Webseiten und Webanwendungen ermöglichen, offline zu funktionieren:

  • Web Storage: Mit localStorage und sessionStorage können Daten lokal gespeichert werden.
  • Cache API: Speichert Ressourcen für den Offline-Zugriff.

6. APIs für moderne Webanwendungen

HTML5 bietet zahlreiche APIs, die die Entwicklung komplexer Anwendungen erleichtern:

  • Geolocation API: Zugriff auf den Standort des Nutzers.
  • Drag-and-Drop API: Ermöglicht das Ziehen und Ablegen von Objekten.
  • WebSockets: Für Echtzeitkommunikation zwischen Client und Server.
  • Web Workers: Für die Ausführung von Skripten im Hintergrund.

Vorteile von HTML5

  • Plattformübergreifend: HTML5-Anwendungen funktionieren auf verschiedenen Geräten und Betriebssystemen.
  • Barrierefreiheit: Verbesserte semantische Elemente erleichtern die Nutzung durch Screenreader.
  • Zukunftssicher: HTML5 ist der aktuelle Standard und bleibt relevant.
  • Bessere Performance: Native Unterstützung für Multimedia und Grafiken verbessert die Ladezeiten.

Die wichtigsten HTML5-Befehle (Tags) in der Übersicht

TagBeschreibung
<article>Definiert eigenständigen Inhalt, der unabhängig vom Rest der Seite ist.
<section>Definiert eine thematische Gruppierung von Inhalten, typischerweise mit einer Überschrift.
<nav>Repräsentiert einen Abschnitt mit Navigationslinks.
<aside>Definiert Inhalte, die in Bezug zu den umliegenden Inhalten stehen.
<header>Gibt einleitende Inhalte oder Navigationslinks für den nächstgelegenen Vorfahrenabschnitt an.
<footer>Gibt den Fußbereich für den nächstgelegenen Vorfahrenabschnitt an.
<figure>Kapselt Inhalte wie Bilder, Illustrationen oder Diagramme ein.
<figcaption>Bietet eine Bildunterschrift oder Legende für ein <figure>-Element.
<audio>Betten Sie Audioinhalte ein.
<video>Betten Sie Videoinhalte ein.
<canvas>Bietet eine Zeichenfläche für Grafiken über JavaScript.
<mark>Hebt Text hervor, um Bedeutung oder Relevanz zu kennzeichnen.
<time>Repräsentiert einen bestimmten Zeitpunkt oder eine Dauer.
<progress>Zeigt den Fortschritt der Fertigstellung einer Aufgabe an.
<meter>Zeigt eine skalare Messung innerhalb eines bekannten Bereichs an.
<details>Bietet zusätzliche Details, die der Benutzer anzeigen oder ausblenden kann.
<summary>Bietet eine Zusammenfassung, Legende oder Titel für das <details>-Element.
<dialog>Definiert ein Dialogfeld oder interaktives Widget.
<main>Gibt den dominanten Inhalt des <body>-Elements an.
<template>Hält clientseitige Inhalte, die beim Laden der Seite nicht gerendert werden.

Unterschiede zwischen HTML5 und seinem Vorgänger XHTML

AspektHTML5XHTML
DoctypeEinfach und kurz:
<!DOCTYPE html>
Komplex und länger:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
SyntaxFlexible Syntax, erlaubt kleine Fehler wie fehlende Tags oder ungeschlossene Elemente.Strenge Syntax, alle Tags müssen korrekt geschlossen sein und Attribute müssen in Anf\u00fchrungszeichen stehen.
Case SensitivityTags und Attribute sind nicht case-sensitive (z. B. <BODY> und <body> sind gleichwertig).Tags und Attribute sind case-sensitive (müssen klein geschrieben werden, z. B. <body>).
ParsingHTML5 verwendet ein robusteres Parsing-Modell, das auch fehlerhaften Code sinnvoll interpretiert.XHTML verlangt korrektes XML-Parsing und scheitert bei Syntaxfehlern.
MedientypKann mit dem Medientyp text/html oder application/xhtml+xml ausgeliefert werden.Muss als application/xhtml+xml ausgeliefert werden, um die XML-Spezifikationen zu erfüllen.
BrowserkompatibilitätUnterstützt von allen modernen Browsern und abwärtskompatibel.Strikte Anforderungen führen zu Problemen in älteren Browsern, die XHTML nicht unterstützen.
Neue FeaturesEnthält neue semantische Elemente (<header>, <article>, etc.), Multimedia-Tags (<audio>, <video>) und APIs.Keine neuen Features im Vergleich zu HTML4. Fokus auf strikte XML-Kompatibilität.
BarrierefreiheitVerbesserte Barrierefreiheit durch semantische Tags und ARIA-Rollen.Unterstützt Barrierefreiheit durch ordnungsgemäße XML-Struktur, jedoch keine nativen semantischen Elemente.

HTML 5
HTML 5

Fazit

HTML5 ist ein leistungsstarkes Werkzeug für Entwickler und der Kern moderner Webentwicklung. Es bietet eine Vielzahl von Möglichkeiten, um interaktive, ansprechende und benutzerfreundliche Webseiten und Webanwendungen zu erstellen. Durch die ständige Weiterentwicklung bleibt HTML5 die Grundlage für das Web der Zukunft.

Letzte Bearbeitung am Montag, 30. Dezember 2024 – 11:41 Uhr von Alex, Webmaster für Google und Bing SEO.

Konnten wir deine Fragen zu HTML5 beantworten? Lass es uns gerne wissen, falls etwas nicht stimmen sollte. Feedback ist gerne gesehen, auch zum Thema HTML5.