HTML (Hypertext Markup Language)

Die Auszeichnungssprache des World Wide Web – entwickelt und gepflegt vom W3C (World Wide Web Consortium) und der WHATWG (Web Hypertext Application Technology Working Group).

Erstveröffentlichung: 1993 Aktuelle Version: HTML5 Gremium: W3C/WHATWG

Was ist HTML?

HTML (Hypertext Markup Language) ist die Standard-Auszeichnungssprache für Webseiten. Sie beschreibt die Struktur und den Inhalt eines Dokuments durch sogenannte Tags. Browser interpretieren diese Tags und stellen die Seite für den Benutzer dar.

W3C vs. WHATWG

Das W3C (World Wide Web Consortium) entwickelte HTML bis zur Version 4.01. Seit 2004 arbeitet die WHATWG an der Weiterentwicklung. 2019 einigten sich beide Organisationen auf eine Zusammenarbeit – die WHATWG pflegt den "Living Standard", das W3C veröffentlicht stabile "Snapshots".

Bedeutung

HTML ist die Grundlage des World Wide Web. Zusammen mit CSS (Gestaltung) und JavaScript (Interaktivität) bildet es die Basis jeder Website. Jeder Browser implementiert HTML, und die Standardisierung sorgt dafür, dass Webseiten überall gleich aussehen.

Historische Entwicklung

1989 - 1991

Die Geburt des Web

Tim Berners-Lee entwickelt am CERN das World Wide Web und die erste Version von HTML. Es gab etwa 18 Elemente, darunter <h1>, <p>, <a> und <img>.

1993 - HTML 1.0

Erste informelle Spezifikation

Die erste öffentliche Beschreibung von HTML erscheint als Internet-Draft. Sie wird nie zum offiziellen Standard, legt aber die Grundlagen.

1995 - HTML 2.0

Erster offizieller Standard

RFC 1866 definiert HTML 2.0 als ersten IETF-Standard. Enthalten sind Formulare, Tabellen und grundlegende Strukturelemente.

1997 - HTML 3.2

W3C übernimmt

Die erste vom W3C veröffentlichte Version. Sie integriert Browser-spezifische Erweiterungen wie Applets, Textfluss um Bilder und verbesserte Tabellen.

1997 - HTML 4.0

Trennung von Inhalt und Design

HTML 4.0 führt strikte, transitional und frameset Document Type Definitions (DTDs) ein. CSS wird empfohlen, um das Design von der Struktur zu trennen.

1999 - HTML 4.01

Korrekturen und Stabilität

Eine kleine Aktualisierung von HTML 4.0, die lange Zeit die stabilste HTML-Version war und bis heute als Basis dient.

2000 - XHTML 1.0

HTML als XML

XHTML (Extensible HTML) formuliert HTML 4.01 als XML-Anwendung. Strengere Syntax-Regeln sollten die Weiterverarbeitung erleichtern.

2004 - Gründung der WHATWG

Reaktion auf das langsame W3C

Apple, Mozilla und Opera gründen die WHATWG, um HTML als "Living Standard" weiterzuentwickeln, während das W3C an XHTML 2.0 arbeitet.

2008 - HTML5 (erster Entwurf)

Der große Wurf

Der erste öffentliche Entwurf von HTML5 erscheint. Neue Elemente wie <video>, <audio>, <canvas> und <section> werden eingeführt.

2014 - HTML5 (offiziell)

HTML5 wird W3C-Empfehlung

Nach über fünf Jahren Arbeit wird HTML5 zum offiziellen W3C-Standard erklärt. Alle modernen Browser unterstützen ihn vollständig.

2019 - Einigung

W3C und WHATWG arbeiten zusammen

W3C und WHATWG einigen sich auf eine gemeinsame Weiterentwicklung: Die WHATWG pflegt den "Living Standard", das W3C veröffentlicht stabile "Snapshots" (wie HTML 5.2, 5.3).

HTML-Grundgerüst

                <!DOCTYPE html>

                <html lang="de">

                <head>

                    <meta charset="UTF-8">

                    <title>Titel der Seite</title>

                </head>

                <body>

                    <h1>Überschrift</h1>

                    <p>Ein Absatz Text.</p>

                </body>

                </html>

Erklärung

<!DOCTYPE html> – Deklariert HTML5 (keine DTD mehr nötig)
<html> – Wurzelelement der Seite, lang-Attribut für Sprache
<head> – Metadaten, nicht sichtbar (Titel, Zeichensatz, CSS-Links)
<body> – Sichtbarer Inhalt der Seite

Wichtige HTML-Elemente

Element	Bedeutung	Beispiel	HTML5-neu?
`<h1> - <h6>`	Überschriften (1 wichtigste, 6 unwichtigste)	<h1>Titel</h1>	❌ Nein
`<p>`	Absatz (Paragraph)	<p>Text</p>	❌ Nein
`<a>`	Link (Anchor)	<a href="url">Link</a>	❌ Nein
`<img>`	Bild (Image)	<img src="bild.jpg" alt="Beschreibung">	❌ Nein
`<ul> / <ol>`	Unsortierte / sortierte Liste	<ul><li>Punkt</li></ul>	❌ Nein
`<table>`	Tabelle	<table><tr><td>Zelle</td></tr></table>	❌ Nein
`<form>`	Formular	<form action="..."><input></form>	❌ Nein
`<header>`	Kopfbereich einer Sektion	<header><h1>Titel</h1></header>	✅ Ja
`<nav>`	Navigationsbereich	<nav><ul><li><a>...</a></li></ul></nav>	✅ Ja
`<section>`	Thematischer Abschnitt	<section><h2>...</h2><p>...</p></section>	✅ Ja
`<article>`	In sich abgeschlossener Inhalt	<article><h2>...</h2><p>...</p></article>	✅ Ja
`<aside>`	Randnotiz / Seitenleiste	<aside>Werbung</aside>	✅ Ja
`<footer>`	Fußbereich	<footer>© 2024</footer>	✅ Ja
`<video>`	Video-Einbettung	<video src="video.mp4" controls></video>	✅ Ja
`<audio>`	Audio-Einbettung	<audio src="audio.mp3" controls></audio>	✅ Ja
`<canvas>`	Zeichenfläche für JavaScript	<canvas id="canvas" width="300" height="150"></canvas>	✅ Ja

Semantisches HTML

Warum Semantik?

Semantische Elemente geben dem Inhalt eine Bedeutung – nicht nur für Menschen, sondern auch für Maschinen:

SEO – Suchmaschinen verstehen die Struktur besser
Barrierefreiheit – Screenreader können Inhalte vorlesen
Wartbarkeit – Code ist lesbarer und verständlicher

Nicht-semantisch vs. semantisch

Nicht-semantisch: <div>, <span> – sagen nichts über den Inhalt aus.

Semantisch: <article>, <nav>, <section>, <header>, <footer> – beschreiben die Rolle des Inhalts.

Barrierefreiheit (ARIA)

Für komplexe UI-Komponenten können ARIA-Attribute (Accessible Rich Internet Applications) zusätzliche semantische Informationen liefern:

<button aria-label="Schließen">×</button>

HTML5 APIs

Geolocation API

Zugriff auf den Standort des Benutzers (mit Erlaubnis).

                            navigator.geolocation.getCurrentPosition(pos => {

                              console.log(pos.coords.latitude);

                            });

Web Storage

Lokale Datenspeicherung im Browser:

localStorage – dauerhaft
sessionStorage – pro Tab

                            localStorage.setItem('key', 'value');

                            let val = localStorage.getItem('key');

WebSockets

Bidirektionale Echtzeit-Kommunikation zwischen Browser und Server.

                            let ws = new WebSocket('ws://server.com');

                            ws.onmessage = e => console.log(e.data);

HTML-Validierung

W3C Validator

Der offizielle W3C Markup Validation Service prüft HTML auf Syntaxfehler und Einhaltung der Standards. Eine gültige HTML-Datei ist die Grundlage für barrierefreie und suchmaschinenoptimierte Webseiten.

Häufige Fehler:

Fehlende alt-Attribute bei Bildern
Nicht geschlossene Tags
Doppelte IDs
Falsche Verschachtelung (z.B. <h1> in <p>)

Zukunft von HTML

Living Standard

HTML wird heute als "Living Standard" entwickelt – es gibt keine Versionsnummern mehr. Neue Features werden kontinuierlich hinzugefügt, sobald sie stabil sind und von Browsern implementiert werden.

Neue Elemente

Aktuelle und zukünftige Entwicklungen:

<dialog> – native Modalfenster
<search> – semantische Suche
<datatemplate> – HTML-Templates
Verbesserte Formular-Elemente

Integration mit CSS/JS

HTML bleibt die Grundlage, aber die Integration mit CSS (Houdini, Container Queries) und JavaScript (Web Components, Shadow DOM) wird immer enger – das Web wird zur App-Plattform.

Praxisaufgabe: Ihre erste HTML-Seite

Erstellen Sie eine einfache HTML-Seite über sich selbst. Sie sollte enthalten:

Einen Titel "Meine Vorstellung"
Eine Hauptüberschrift mit Ihrem Namen
Einen Absatz über Ihre Interessen
Eine ungeordnete Liste Ihrer Hobbys
Ein Bild von Ihnen (oder ein Platzhalter-Bild)
Einen Link zu Ihrer Lieblingswebsite

Weiterführende Themen

CSS

Gestaltung von HTML-Seiten mit Cascading Style Sheets.

Zu CSS

JavaScript

Interaktivität und dynamische Funktionen für HTML.

Zu JavaScript

JSON

Datenaustauschformat für Web-APIs.

Zu JSON

HTTP/HTTPS

Das Protokoll für den Transport von HTML-Seiten.

Zu HTTP

HTML - Hypertext Markup Language