HTML5 Struktur und Semantik

Einleitung

Dieses Seminar vermittelt den sauberen und modernen Aufbau von Webseiten mit HTML5. Teilnehmer erlernen 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.

Zielgruppe / Voraussetzung

Zielgruppe: Angehende Webentwickler, Content-Manager und Quereinsteiger im Bereich Webdesign.
Voraussetzung: 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

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 responsiven Grafiken (<picture>, srcset)
Native Audio- und Video-Integration (<audio>, <video>, <track>)
Einbettung externer Inhalte (<iframe>)

Dauer: 2 Tage