HTML Survival-Training (nach dem aktuellsten Standard)

Seiten für das World Wide Web
© adobe stock

HTML ist die Grundlage jeder Webseite. Oft bestehen moderne Webseiten aus unzähligen unnötigen und nichtssagenden Elementen.

Das schadet der Barrierefreiheit, der Performanz und der Wartbarkeit einer Website. Händisch sind solche Ungetüme meist gar nicht mehr zu pflegen.

In der HTML-Schulung, zeige ich, worum es bei HTML ursprünglich und seit HTML5 wieder geht: die Beschreibung von Inhalten.

HTML5-Elemente haben nicht nur eine Bedeutung, die von Software verstanden wird, sie haben auch Rollen und Zustände und sind Wegweiser auf einer virtuellen Landkarte.

as soon as I saw you, I knew an adventure was going to happen

winnie the pooh

Ich lade herzlich ein zum Survival-Training „Back to the roots“ – erlaubt sind nur ein einfacher Editor und ein Browser ohne PlugIns, ohne Frameworks, ohne JS, ohne Builder – geht nicht? – Geht doch. Und zwar ab wie Schmitz Katze!

Funktioniert mit Google, mit Screenreadern und dank progressive enhancement in jedem Browser!

Lust auf das Abenteuer? – Dann meldet Euch!

HTML5 so, wie es gedacht ist!

html-adventure@mhis.de

HTML-Survival-Programm

  • Das Grundgerüst
  • Seitenaufteilung mit Semantik (und wie die Google und Screenreader unterstützt)
  • Konzept (was muss gedruckt werden, was muss wann wem zur Verfügung stehen, z.B. Sehenden auf kleinen oder großen Displays, Blinden wie Suchmaschinen oder Nutzern von Screenreader usw)
  • Wechselwirkung von Tab-Reihenfolge und DOM, HTML und CSS (z.B. order-Eigenschaft von flexbox und grid oder grid-auto-flow: dense)
  • Rollen und Zustände
    • Die impliziten Rollen
    • Ein Button ist ein button, ein Link ist ein a
    • Zustände von Elementen am Beispiel von details und summary
    • Das W3C über roles, states and properties (https://www.w3.org/TR/html-aria/#aria-table)
  • Formulare
    • Eingabefelder gruppieren (thematisch, checkbox, radio)
    • Eingabe-Typen
    • Browser-Validierung
    • Pflichtfelder, autofocus, placeholder
    • Formular-Design (Ausblick auf das CSS-Abenteuer)
      • mehrspaltige Formulare
    • Fehlervermeidung durch Beschreibungen (kein title oder andere Tooltipps)
    • Hilfe bei Fehlern

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.