Web-Standards

KAPITEL 11 · IT-STANDARDS

Web-Standards

Die technologische Grundlage des World Wide Web – von HTML5 und CSS3 über JavaScript und Web-APIs bis zu Accessibility, Sicherheit und modernen Web-Technologien.

HTML5 CSS3 JavaScript WCAG OWASP

Inhaltsverzeichnis

Schnellübersicht

Auf dieser Seite lernen Sie alles über Web-Standards und Web-Technologien:

  • Definition: Was sind Web-Standards und warum sind sie wichtig?
  • Kern-Technologien: HTML5, CSS3, JavaScript (ECMAScript)
  • W3C & Standards-Gremien: Wer definiert die Standards?
  • Web-APIs: Moderne Browser-Schnittstellen
  • HTTP/HTTPS: Protokolle des Webs
  • WCAG & Accessibility: Barrierefreiheit im Web
  • OWASP & Sicherheit: Web-Sicherheitsstandards
  • Moderne Technologien: PWA, WebAssembly, JSON, REST
  • Best Practices: Semantik, Performance, SEO
  • FAQ: Häufige Fragen und Antworten

1. Was sind Web-Standards?

Definition

Web-Standards sind formalisierte technische Spezifikationen, die festlegen, wie Webinhalte erstellt, übertragen, dargestellt und interpretiert werden. Sie werden von internationalen Gremien wie dem W3C (World Wide Web Consortium), der IETF (Internet Engineering Task Force) und ECMA International entwickelt und gepflegt.

Web-Standards stellen sicher, dass Websites und Webanwendungen plattformübergreifend funktionieren – unabhängig von Browser, Betriebssystem oder Endgerät. Sie sind die Grundlage für Interoperabilität, Barrierefreiheit und langfristige Wartbarkeit im Web.

Die drei Säulen des Webs: HTML (Struktur), CSS (Darstellung) und JavaScript (Verhalten).

Warum sind Web-Standards wichtig?

  • Interoperabilität: Websites funktionieren in allen modernen Browsern
  • Barrierefreiheit: Inhalte sind für Menschen mit Behinderungen nutzbar
  • Zukunftssicherheit: Standardkonformer Code bleibt langfristig funktional
  • Performance: Standardkonformer Code wird von Browsern besser optimiert
  • SEO: Suchmaschinen können standardkonforme Seiten besser indexieren
  • Wartbarkeit: Einheitlicher Code ist leichter zu pflegen und zu erweitern

2. Kern-Technologien des Webs

Die drei fundamentalen Technologien, auf denen das gesamte World Wide Web aufbaut:

01

HTML5

HyperText Markup Language · Struktur

Die Auszeichnungssprache des Webs. Definiert die Struktur und Semantik von Webinhalten.

  • Semantische Elemente (header, nav, article, section)
  • Multimedia (audio, video, canvas)
  • Formulare mit Validierung
  • Geolocation API
  • Local Storage & Session Storage
  • Web Workers & WebSockets
Aktuelle Version: HTML5 (W3C Recommendation seit 2014, Living Standard seit 2019)
02

CSS3

Cascading Style Sheets · Darstellung

Die Stylesheet-Sprache des Webs. Steuert das visuelle Erscheinungsbild von Webseiten.

  • Flexbox & CSS Grid Layout
  • Media Queries (Responsive Design)
  • CSS Custom Properties (Variablen)
  • Animationen & Transitions
  • Container Queries (neu)
  • CSS Subgrid & Layers
Aktuelle Version: CSS3 (modulare Spezifikation, kontinuierlich erweitert)
03

JavaScript

ECMAScript · Verhalten

Die Programmiersprache des Webs. Ermöglicht Interaktivität und dynamische Inhalte.

  • ES2024 (ECMAScript 2024)
  • Async/Await & Promises
  • Modules (import/export)
  • Optional Chaining & Nullish Coalescing
  • Top-Level Await
  • Temporal API (neu)
Aktuelle Version: ECMAScript 2024 (ES15), jährliche Updates durch TC39

3. Geschichte der Web-Standards

Die wichtigsten Meilensteine in der Entwicklung der Web-Technologien.

1991

HTML 1.0 & das World Wide Web

Tim Berners-Lee veröffentlicht HTML 1.0 und das World Wide Web am CERN. Die erste Webseite geht online.

1994

W3C gegründet

Tim Berners-Lee gründet das World Wide Web Consortium (W3C) am MIT zur Standardisierung des Webs.

1996

CSS1

Die erste CSS-Spezifikation wird veröffentlicht. Trennung von Inhalt und Darstellung beginnt.

1997

ECMAScript 1

JavaScript wird als ECMAScript standardisiert (ECMA-262). Grundlage für alle JS-Entwicklung.

1999

HTML 4.01

HTML 4.01 wird W3C-Standard. Führt strikte und Frameset-Dokumenttypen ein.

2004

WHATWG gegründet

Apple, Mozilla und Opera gründen die WHATWG als Alternative zum W3C. Beginn der HTML5-Entwicklung.

2009

ECMAScript 5

ES5 bringt Strict Mode, JSON-Unterstützung und Array-Methoden. Grundlage für modernes JavaScript.

2014

HTML5 Recommendation

HTML5 wird offizielle W3C-Recommendation. Multimedia, Canvas, Web Storage und semantische Elemente.

2015

ECMAScript 2015 (ES6)

Größtes JS-Update aller Zeiten: let/const, Arrow Functions, Classes, Promises, Modules, Template Literals.

2017

CSS Grid Layout

CSS Grid wird von allen großen Browsern unterstützt. Revolution im Web-Layout.

2019

HTML Living Standard

W3C und WHATWG einigen sich auf den HTML Living Standard. Kein versionierter Standard mehr.

2023

CSS Container Queries

Container Queries ermöglichen komponentenbasiertes Responsive Design – unabhängig vom Viewport.

2024

Moderne Web-Plattform

View Transitions API, Popover API, CSS Nesting, WebGPU und weitere moderne APIs.

4. HTTP/HTTPS – Protokolle des Webs

HTTP (HyperText Transfer Protocol) ist das fundamentale Protokoll für die Datenübertragung im Web.

HTTP-Methoden

GET

Daten vom Server abrufen. Idempotent, keine Seiteneffekte.

POST

Daten an den Server senden. Erzeugt neue Ressourcen.

PUT

Ressource vollständig ersetzen. Idempotent.

DELETE

Ressource löschen. Idempotent.

PATCH

Ressource teilweise aktualisieren.

OPTIONS

Verfügbare Methoden abfragen (CORS Preflight).

HTTP-Statuscodes

2xx – Erfolg
  • 200 OK: Anfrage erfolgreich
  • 201 Created: Ressource erstellt
  • 204 No Content: Kein Inhalt
3xx – Umleitung
  • 301 Moved: Permanent verschoben
  • 302 Found: Temporär verschoben
  • 304 Not Modified: Cache gültig
4xx – Client-Fehler
  • 400 Bad Request: Ungültige Anfrage
  • 403 Forbidden: Zugriff verweigert
  • 404 Not Found: Nicht gefunden
5xx – Server-Fehler
  • 500 Internal Error: Serverfehler
  • 502 Bad Gateway: Gateway-Fehler
  • 503 Unavailable: Dienst nicht verfügbar

HTTPS vs. HTTP

  • HTTPS verschlüsselt die Verbindung via TLS (Transport Layer Security)
  • Port 443 statt Port 80 (HTTP)
  • Pflicht seit 2018: Chrome markiert HTTP-Seiten als "Nicht sicher"
  • SEO-Vorteil: Google bevorzugt HTTPS-Seiten im Ranking
  • Zertifikate: Let's Encrypt bietet kostenlose SSL-Zertifikate

5. Moderne Web-APIs

Browser bieten eine Vielzahl von APIs, die Webanwendungen leistungsfähige Funktionen bereitstellen.

01

Web Storage API

Lokale Datenspeicherung

Speichert Daten lokal im Browser – persistent (localStorage) oder sitzungsbasiert (sessionStorage).

  • localStorage: Persistent, 5-10 MB
  • sessionStorage: Sitzungsbasiert
  • IndexedDB: Große Datenmengen
  • Cache API: Offline-Caching
Standard: W3C Web Storage API, HTML Living Standard
02

Fetch API

Moderne Netzwerk-Anfragen

Moderner Ersatz für XMLHttpRequest. Promise-basiert, flexibel und leistungsfähig.

  • Promise-basiert (async/await)
  • Request/Response-Objekte
  • Streaming-Unterstützung
  • CORS-Unterstützung
Standard: WHATWG Fetch Standard
03

Service Worker API

Offline-First & Caching

Hintergrund-Scripts für Offline-Funktionalität, Push-Benachrichtigungen und Caching.

  • Offline-Caching-Strategien
  • Push Notifications
  • Background Sync
  • Grundlage für PWAs
Standard: W3C Service Workers API

6. WCAG & Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Webinhalte.

01

Wahrnehmbar

Perceivable

Inhalte müssen so dargestellt werden, dass alle Nutzer sie wahrnehmen können.

  • Alternativtexte für Bilder
  • Untertitel für Videos
  • Ausreichender Kontrast (4.5:1)
  • Skalierbarer Text (200%)
02

Bedienbar

Operable

Alle Funktionen müssen über verschiedene Eingabemethoden bedienbar sein.

  • Tastatur-Navigation
  • Keine Zeitlimits
  • Keine blinkenden Inhalte
  • Fokus-Indikatoren
03

Verständlich

Understandable

Inhalte und Bedienung müssen verständlich und vorhersehbar sein.

  • Einfache Sprache
  • Konsistente Navigation
  • Fehlermeldungen verständlich
  • Sprache deklariert (lang-Attribut)
04

Robust

Robust

Inhalte müssen von verschiedenen Technologien zuverlässig interpretiert werden können.

  • Valides HTML
  • ARIA-Labels korrekt
  • Screenreader-kompatibel
  • Abwärtskompatibel

WCAG-Konformitätsstufen

  • Level A: Minimale Barrierefreiheit (Grundvoraussetzung)
  • Level AA: Empfohlener Standard (gesetzlich vorgeschrieben in EU/DE)
  • Level AAA: Maximale Barrierefreiheit (ideal, aber nicht immer erreichbar)
  • BITV 2.0: Deutsche Umsetzung der WCAG für öffentliche Stellen
  • EN 301 549: Europäischer Standard für digitale Barrierefreiheit

7. OWASP & Web-Sicherheit

Das Open Web Application Security Project (OWASP) definiert die wichtigsten Sicherheitsstandards für Webanwendungen.

01

Injection

SQL, NoSQL, OS Injection

Angreifer injizieren schädlichen Code in Eingabefelder, um Datenbanken oder Systeme zu manipulieren.

  • Parameterized Queries nutzen
  • Input-Validierung
  • Prepared Statements
  • ORM-Frameworks verwenden
02

Broken Authentication

Authentifizierungs-Schwachstellen

Schwache Authentifizierung ermöglicht Angreifern den Zugriff auf Benutzerkonten.

  • Multi-Faktor-Authentifizierung
  • Starke Passwort-Policies
  • Session-Management
  • Rate Limiting
03

XSS (Cross-Site Scripting)

Skript-Injection im Browser

Angreifer injizieren schädliche Skripte in Webseiten, die im Browser anderer Nutzer ausgeführt werden.

  • Output-Encoding
  • Content Security Policy (CSP)
  • HttpOnly-Cookies
  • Input-Sanitization

OWASP Top 10 (2021)

  • A01: Broken Access Control
  • A02: Cryptographic Failures
  • A03: Injection
  • A04: Insecure Design
  • A05: Security Misconfiguration
  • A06: Vulnerable and Outdated Components
  • A07: Identification and Authentication Failures
  • A08: Software and Data Integrity Failures
  • A09: Security Logging and Monitoring Failures
  • A10: Server-Side Request Forgery (SSRF)

8. Moderne Web-Technologien

Neue Standards und Technologien, die die Web-Entwicklung revolutionieren.

01

Progressive Web Apps

PWA · App-ähnliche Web-Apps

Webanwendungen mit nativer App-Erfahrung – offlinefähig, installierbar, Push-Notifications.

  • Service Worker (Offline-Caching)
  • Web App Manifest
  • Push Notifications
  • Installierbar auf Desktop/Mobile
Standard: W3C Web App Manifest, Service Workers API
02

WebAssembly

Wasm · Native Performance im Browser

Binäres Instruktionsformat für hohe Performance. Ermöglicht C/C++/Rust im Browser.

  • Nahezu native Geschwindigkeit
  • C/C++/Rust/Go im Browser
  • Sandbox-Sicherheit
  • Alle modernen Browser
Standard: W3C WebAssembly Core Specification
03

JSON & REST

Datenformat & API-Architektur

JSON ist das Standard-Datenformat für Web-APIs. REST definiert die Architektur für APIs.

  • JSON: Leichtgewichtig, menschenlesbar
  • REST: Ressourcen-basierte Architektur
  • JSON Schema: Validierung
  • OpenAPI/Swagger: API-Dokumentation
Standard: ECMA-404 (JSON), RFC 7231 (HTTP/REST)

9. Best Practices für Web-Entwicklung

Die wichtigsten Empfehlungen für standardkonforme, performante und barrierefreie Web-Entwicklung.

Semantisches HTML

  • header, nav, main, footer statt div-Suppe
  • article, section, aside für Inhaltsgliederung
  • Alt-Texte für alle Bilder
  • Label-Elemente für Formulare
  • Überschriften-Hierarchie: h1 → h2 → h3

Performance

  • Core Web Vitals: LCP, FID, CLS optimieren
  • Lazy Loading: Bilder und iframes nachladen
  • Minifizierung: CSS/JS komprimieren
  • CDN: Inhalte über Content Delivery Networks
  • Caching: Cache-Header korrekt setzen

Barrierefreiheit

  • WCAG 2.1 AA: Mindeststandard einhalten
  • ARIA-Labels: Für Screenreader-Unterstützung
  • Tastatur-Navigation: Alle Funktionen erreichbar
  • Kontrast: Mindestens 4.5:1 für Text
  • Testing: Lighthouse, axe, WAVE

SEO-Optimierung

  • Meta-Tags: Title, Description, Viewport
  • Structured Data: JSON-LD Schema.org
  • Open Graph: Social Media Vorschau
  • Sitemap: XML-Sitemap für Crawler
  • Core Web Vitals: LCP < 2.5s, CLS < 0.1

Die 10 Goldenen Regeln

  1. Semantisches HTML verwenden – Struktur vor Darstellung
  2. Responsive Design – Mobile First mit CSS Grid/Flexbox
  3. HTTPS überall – Verschlüsselung ist Pflicht
  4. Performance optimieren – Core Web Vitals im Blick behalten
  5. Barrierefreiheit – WCAG 2.1 AA als Mindeststandard
  6. Progressive Enhancement – Grundfunktion ohne JavaScript
  7. Sicherheit – OWASP Top 10 beachten
  8. Validierung – HTML/CSS validieren (W3C Validator)
  9. Versionierung – Git für Quellcode-Verwaltung
  10. Testing – Automatisierte Tests und Lighthouse-Audits

10. FAQ – Häufige Fragen & Antworten

Häufige Fragen zu Web-Standards

Was ist der Unterschied zwischen W3C und WHATWG?

W3C (World Wide Web Consortium): Gegründet 1994 von Tim Berners-Lee. Entwickelt Standards wie CSS, SVG, WCAG. Arbeitet mit versionierten Spezifikationen (z.B. HTML5 Recommendation 2014).

WHATWG (Web Hypertext Application Technology Working Group): Gegründet 2004 von Apple, Mozilla und Opera. Entwickelt den HTML Living Standard – eine kontinuierlich aktualisierte Spezifikation ohne Versionierung.

Seit 2019: W3C und WHATWG haben sich geeinigt. Der WHATWG Living Standard ist nun die offizielle HTML-Spezifikation. Das W3C veröffentlicht keine eigenen HTML-Versionen mehr.

Was sind die Core Web Vitals?

Die Core Web Vitals sind drei Metriken, die Google zur Bewertung der Nutzererfahrung verwendet:

  • LCP (Largest Contentful Paint): Ladezeit des größten sichtbaren Elements. Ziel: < 2,5 Sekunden
  • INP (Interaction to Next Paint): Reaktionszeit auf Nutzerinteraktionen. Ziel: < 200 ms (ersetzt FID seit 2024)
  • CLS (Cumulative Layout Shift): Visuelle Stabilität. Ziel: < 0,1

Messbar mit Google Lighthouse, PageSpeed Insights oder der Chrome DevTools.

Was ist der Unterschied zwischen REST und GraphQL?

REST (Representational State Transfer): Ressourcen-basierte Architektur. Jeder Endpunkt liefert eine feste Datenstruktur. Mehrere Anfragen für komplexe Daten nötig.

GraphQL: Abfragesprache für APIs. Client definiert exakt, welche Daten er benötigt. Eine Anfrage, flexible Antwort. Verhindert Over- und Underfetching.

Wann was? REST für einfache CRUD-APIs, GraphQL für komplexe, verschachtelte Datenstrukturen.

Was ist eine Progressive Web App (PWA)?

Eine PWA ist eine Webanwendung, die sich wie eine native App verhält:

  • Offline-fähig: Service Worker cacht Inhalte
  • Installierbar: Kann auf Desktop/Mobile installiert werden
  • Push Notifications: Benachrichtigungen wie native Apps
  • Schnell: Sofortiges Laden durch Caching
  • Responsive: Passt sich allen Bildschirmgrößen an

Voraussetzungen: HTTPS, Web App Manifest, Service Worker.

Was ist WebAssembly und wann sollte man es nutzen?

WebAssembly (Wasm) ist ein binäres Instruktionsformat, das nahezu native Performance im Browser ermöglicht.

  • Sprachen: C, C++, Rust, Go, AssemblyScript
  • Performance: Nahezu native Geschwindigkeit
  • Sicherheit: Läuft in einer Sandbox

Einsatzgebiete: Spiele, Bild-/Videobearbeitung, CAD, wissenschaftliche Berechnungen, Kryptographie. Für normale Webanwendungen ist JavaScript meist ausreichend.

Wie validiere ich meine Website auf Standardkonformität?

Es gibt mehrere Tools zur Validierung:

  • W3C HTML Validator: validator.w3.org – prüft HTML auf Standardkonformität
  • W3C CSS Validator: jigsaw.w3.org/css-validator – prüft CSS
  • Google Lighthouse: Performance, Accessibility, SEO, Best Practices
  • axe DevTools: Barrierefreiheit-Testing
  • PageSpeed Insights: Core Web Vitals und Performance
  • web.dev/measure: Umfassender Web-Test
Was ist der Unterschied zwischen HTTP/1.1, HTTP/2 und HTTP/3?
  • HTTP/1.1 (1997): Textbasiert, eine Anfrage pro Verbindung (Head-of-Line-Blocking). Persistent Connections möglich.
  • HTTP/2 (2015): Binärprotokoll, Multiplexing (mehrere Anfragen parallel), Header-Kompression (HPACK), Server Push.
  • HTTP/3 (2022): Basiert auf QUIC (UDP statt TCP). Kein Head-of-Line-Blocking, schnellere Verbindung, bessere Performance bei schlechtem Netzwerk.

Zusammenfassung

Die wichtigsten Punkte

  • Web-Standards: Formale Spezifikationen für Interoperabilität, Barrierefreiheit und Zukunftssicherheit
  • Drei Säulen: HTML5 (Struktur), CSS3 (Darstellung), JavaScript (Verhalten)
  • Standard-Gremien: W3C, WHATWG, IETF, ECMA International
  • HTTP/HTTPS: Fundamentales Protokoll, HTTPS ist Pflicht
  • WCAG 2.1: Internationaler Standard für Barrierefreiheit (AA als Mindeststandard)
  • OWASP Top 10: Wichtigste Web-Sicherheitsrisiken und Gegenmaßnahmen
  • Moderne Technologien: PWA, WebAssembly, REST/GraphQL, Service Worker
  • Core Web Vitals: LCP, INP, CLS – Googles Performance-Metriken
  • Best Practices: Semantisches HTML, Responsive Design, Progressive Enhancement
  • Validierung: W3C Validator, Lighthouse, axe DevTools

Weiterführende Themen

Internet-Standards

TCP/IP, DNS, TLS und die Protokolle des Internets im Detail.

Zu Internet-Standards
Sicherheits-Standards

ISO 27001, OWASP, DSGVO und weitere Sicherheitsstandards.

Zu Sicherheits-Standards
ISO 27001

Informationssicherheits-Managementsystem (ISMS) – Anforderungen und Umsetzung.

Zu ISO 27001
GDPR / DSGVO

Datenschutz-Grundverordnung – Rechte, Pflichten und Compliance-Anforderungen.

Zu GDPR/DSGVO