HTML5 Content Authoring — Advanced Features, CSS3, Multimedia, Barrierefreiheit

HTML5 ist seit 2014 W3C-Recommendation und längst Standard — aber viele Webentwickler nutzen nur die Basis-Tags und verpassen die wirklich nützlichen Features wie semantische Strukturierung, native Video/Audio, Canvas-Zeichnungen, Barrierefreiheit. Dieser Kurs richtet sich an Anwender mit HTML-Grundlagen und vermittelt die fortgeschrittenen HTML5-/CSS3-Funktionen. Block HTML5-Inhalte erstellen: Semantische Tags (header, nav, main, article, section, aside, footer) für klare Struktur und SEO, Form-Inputs (date, email, tel, url, color, range mit nativer Browser-Validation), input-Attribute (required, pattern für RegEx-Validation, placeholder, autofocus, autocomplete, list mit datalist), Microdata und Schema.org für strukturierte Daten (Rich Snippets in Google), Web Storage (localStorage, sessionStorage als modernes Alternative zu Cookies), Web Workers für Hintergrund-Tasks. Block CSS3 Selectors: Advanced Pseudo-Classes (:nth-child, :nth-of-type, :not, :is, :where, :has — das neue „Parent Selector"), Attribute Selectors mit Wildcards (^=, $=, *=), Pseudo-Elements (::before, ::after, ::first-letter, ::selection), kombinierte Selektoren effizient nutzen. Block CSS3 Backgrounds & Borders: Multiple Backgrounds, background-size (cover, contain), background-attachment (fixed, local), Linear- und Radial-Gradients, Conic-Gradients, border-radius für abgerundete Ecken, border-image, box-shadow mit multiple Shadows, mask-image. Block CSS3 Layout: Flexbox in der Tiefe (Container vs. Items, justify-content, align-items, align-self, flex-grow/shrink/basis, gap), CSS Grid (grid-template-rows/columns, grid-area, named Grid Lines, auto-fit/auto-fill mit minmax), Container Queries (modern), Subgrid. Block CSS3 Transforms & Transitions: 2D-Transforms (rotate, scale, translate, skew), 3D-Transforms mit perspective, Transitions (transition-property, duration, timing-function, delay), Cubic-Bezier-Easings. Block CSS3 Animationen: Keyframe-Animationen (@keyframes, animation-name/duration/iteration-count/direction), GPU-beschleunigte Animationen, Performance-Tipps (will-change, transform statt top/left). Block Multimedia: Video-Tag (sources, tracks für Untertitel, poster, controls, autoplay-Restrictions), Audio-Tag, Canvas-API für 2D-Zeichnungen (Pfade, Text, Bilder, Animationen mit requestAnimationFrame), SVG inline für skalierbare Grafiken. Block Barrierefreiheit (WCAG 2.1/2.2): ARIA-Roles und -Attributes für Screenreader-Support, semantische Strukturierung statt div-Suppe, Tastatur-Navigation (tabindex), Color-Contrast-Anforderungen (Level AA), Lesbarkeit für Suchmaschinen-Crawler.