HTML5 Struktur und Semantik

Q: Warum ist semantisches HTML5 für modernes SEO und Barrierefreiheit (a11y) so wichtig?

Semantische Tags wie , , und verraten Suchmaschinen und Screenreadern die inhaltliche Bedeutung der Seitenbereiche. Das erleichtert Suchmaschinen und KI-Systemen die Einordnung der Inhalte und ist die fachliche Grundlage für WCAG-orientierte Barrierefreiheit.

Q: Welche Formular-Features bietet HTML5 nativ ohne JavaScript?

HTML5 bietet native Validierungstypen (type="email", type="date", required, pattern), die Nutzereingaben direkt im Browser validieren, Fehlerhinweise anzeigen und auf mobilen Geräten die passende Tastatur öffnen.

Dieses Seminar vermittelt dir in zwei Tagen den sauberen und modernen Aufbau von Webseiten mit HTML5. Du lernst die semantische Strukturierung von Inhalten, die Einbindung von Multimedia-Elementen sowie die Erstellung zugänglicher und suchmaschinenfreundlicher Web-Dokumente als solides Fundament für die weitere Frontend-Entwicklung.

Für wen ist dieses Seminar

Angehende Webentwickler, Content-Manager und Quereinsteiger im Bereich Webdesign.

Das Angebot richtet sich an Unternehmen, Behörden und Selbstständige.

Was du mitbringen solltest

Allgemeines technisches Verständnis, keine Programmierkenntnisse erforderlich.

Detaillierte Inhalte

HTML-Grundlagen und Dokumentenstruktur

Aufbau eines HTML5-Dokuments (<!DOCTYPE html>, <html>, <head>, <body>)
Meta-Tags für Viewport, Zeichensatz (UTF-8) und SEO
Grundlegende Textformatierung (Überschriften, Absätze, Listen)
Links und Navigation (Absolute vs. relative Pfade, Anker-Links)

Semantisches HTML5

Bedeutung und Einsatz semantischer Tags (<header>, <nav>, <main>, <article>, <section>, <footer>, <aside>)
Vorteile für Barrierefreiheit (Accessibility/a11y) und Suchmaschinenoptimierung (SEO)
Strukturierung komplexer Seitenlayouts

Barrierefreiheit (Accessibility) und ARIA

WCAG 2.1 AA als fachlicher Referenzstandard für zugängliche Webseiten
ARIA-Rollen und -Attribute für nicht-native Interaktionselemente
Tastaturbedienbarkeit und sinnvolle Fokus-Reihenfolge
Kontraste und alternative Texte (alt) für Bilder
Das Barrierefreiheitsstärkungsgesetz (BFSG) als aktueller Anlass, warum das Thema für viele Websites praxisrelevant geworden ist

Formulare und Benutzereingaben

Aufbau von Web-Formularen (<form>, <input>, <textarea>, <select>, <button>)
Neue HTML5-Input-Typen (email, date, number, range, color)
Formularvalidierung direkt im Browser (required, pattern, min, max)
Labels und Zugänglichkeit von Formularfeldern

Tabellen und Datenstrukturierung

Aufbau von Datentabellen (<table>, <tr>, <td>, <th>)
Strukturierung mit <thead>, <tbody>, <tfoot>
Verbinden von Zellen (colspan, rowspan)

Multimedia und externe Inhalte

Einbinden von Bildern (<img>) und Grafiken für Responsive Design (<picture>, srcset)
Native Audio- und Video-Integration (<audio>, <video>, <track>)
Einbettung externer Inhalte (<iframe>)
Performance-Attribute: loading="lazy" für Bilder/iframes und fetchpriority zur Steuerung der Ladepriorität

Strukturierte Daten und Social-Media-Vorschau

Auszeichnung von Inhalten mit schema.org und JSON-LD
Open-Graph-Tags für Vorschaubilder in sozialen Netzwerken und Messengern

Validierung

Markup mit dem W3C-Validator prüfen
Typische Fehlerquellen erkennen: nicht geschlossene Tags, doppelte IDs, falsche Verschachtelung

Dauer: 2 Tage

Was du danach kannst

Webseiten mit semantischem HTML5 sauber strukturieren
Zugängliche, an WCAG 2.1 AA orientierte Inhalte mit ARIA-Grundlagen umsetzen
Formulare mit nativer Browser-Validierung bauen
Strukturierte Daten (schema.org/JSON-LD) und Open-Graph-Tags einbinden
Bilder und Multimedia performant und responsiv einbinden
Markup mit dem W3C-Validator prüfen

Dein Dozent

Frank Glück schult seit mehr als 30 Jahren und programmiert seit fast 40 Jahren. Seit 1999 ist er auch als Dozent für die GFU tätig.

Häufige Fragen (FAQ)

Warum ist semantisches HTML5 für modernes SEO und Barrierefreiheit (a11y) so wichtig?

Semantische Tags wie <main>, <article>, <header> und <nav> verraten Suchmaschinen und Screenreadern die inhaltliche Bedeutung der Seitenbereiche. Das erleichtert Suchmaschinen und KI-Systemen die Einordnung der Inhalte und ist die fachliche Grundlage für WCAG-orientierte Barrierefreiheit.

Welche Formular-Features bietet HTML5 nativ ohne JavaScript?

HTML5 bietet native Validierungstypen (type="email", type="date", required, pattern), die Nutzereingaben direkt im Browser validieren, Fehlerhinweise anzeigen und auf mobilen Geräten die passende Tastatur öffnen.

Ist dieser Kurs auch für Redakteure und Content-Manager geeignet?

Ja, der Kurs richtet sich an Webentwickler, Designer und Content-Verantwortliche, die barrierefreien, sauberen und suchmaschinenfreundlichen HTML-Code erstellen möchten.