Zum Inhalt

Semantischer Seitenaufbau

mozaikoo folgt den Empfehlungen des W3C zum semantischen Aufbau einer Webseite mit den entsprechenden HTML5-Bereichen bzw. -Tags:

HTML5 Bereichs-Tags und Layoutblöcke

  • header ist der Kopfbereich des Dokuments oder eines Bereichs
  • footer ist die Fußzeile des Dokuments oder eines Bereichs
  • nav hat alle Navigations-Links des Dokuments und ist gegliedert in
  • menu mit menuitem als einzelne Links innerhalb des Menüs
  • main umfasst den Hauptinhalt der Seite mit
  • section als thematische Gruppierung eines Inhalts mit Kopfzeile
  • article als Artikel mit eigenständigem Hauptinhalt
  • aside mit weiterführender Information zum Artikel
  • address mit Kontaktinformation zum Autor, Eigentümer
  • figure für eigenständige bildliche Information (Illustrationen, Diagramme, Fotos oder auch Code-Blöcke)

Per Definition können sections innerhalb von article, als auch article innerhalb mehrerer sections genutzt werden. Das header-Element kann mehrfach verwendet werden und wird entsprechend seiner Verschachtelungstiefe interpretiert. Zum Beispiel header eines Dokuments und header innerhalb eines article.

HTML5 Element-Tags

Für die Anzeige

  • figcaption für Bildunterschriften
  • progress für Fortschrittsanzeigen
  • dialog für Dialoganzeigen
  • details für ergänzende, einblendbare Informationen
  • summary Titel für details
  • mark für hervorgehobene Textpassagen

Für Einheiten

  • meter für skalare Maßeinheiten
  • time für Datums- und Uhrzeitangaben

Für Layoutzwecke

  • wbr möglicher Zeilenumbruch
  • bdi für einen Bereich in anderer Leserichtung
  • rt für Betonungs-Hervorhebungen (ostasiatische Typographie)

Für Grafiken

  • canvas für script-basierte Grafiken
  • svg für skalierbare Vektorgrafiken

Für Medien

  • audio für Audiodateien
  • embed für externe Nicht-HTML-Elemente
  • video für Videodateien
  • source definiert mehrere Medienressourcen für video und audio
  • track für Textspuren von video und audio

HTML5 Formularelemente

Form-Elemente und -Attribute

  • autocomplete für automatische Vervollständigung des Formulars

  • novalidate für das Aufheben der Validierung des Formulars

  • formaction, formenctype, formmethod, formtarget für die Beschreibung der Übermittlungsart des Formulars.

Input-Elemente

  • datalist für eine Liste vordefinierter Optionen

  • list als Attribut für die Zuweisung einer datalist

  • output für Kalkulationsergebnisse aus Inputfeldern

<input list=“browsers“>
<datalist id=“browsers“>
    <option value=“Internet Explorer“>
    <option value=“Firefox“>
    <option value=“Chrome“>
    <option value=“Opera“>
    <option value=“Safari“>
</datalist>

<form oninput=“x.value=parseInt(a.value)+parseInt(b.value)“>0
  <input type=“range“ id=“a“ value=“50“>100
  +<input type=“number“ id=“b“ value=“50“>
  =<output name=“x“ for=“a b“></output>
</form>

Input-Standard-Attribute

  • button für Inputfelder, die als Buttons angezeigt werden
  • checkbox für Ankreuzfelder mit keiner, einer, mehreren Optionen
  • radio für eine einzelne Auswahlmöglichkeit, gruppiert über name
  • password für Passwortfelder (Textanzeige als Punkte)
  • text für einzeilige Texteingaben
  • submit für das Absenden des Formularinhalts
  • reset für das Zurücksetzen aller Formularfeld-Inhalte

Input-HTML5-Attribute

(für Browser ohne HTML5, wird der Inhalt wie ein Inputfeld text ausgegeben)

  • date für eine Datumsangabe, die in Tag, Monat, Jahr gegliedert ist
  • datetime-local für grupperte Datums- und Zeiteingabe
  • month für die Auswahl eines Monats und Jahres
  • week für die EIngabe einer Kalenderwoche und Jahr

  • time für Zeiteingaben in Stunden, Minuten und Sekunden

  • image für die Angabe eines Bildes (src) zum Rendern des Feldes

  • number für numerische Eingaben
  • range für die Eingabe eines Wertes innerhalb eines Bereichs
  • search für Suchfelder (verhält sich wie ein Textfeld)
  • tel für Telefonnummern (Angabe der Gliederung mit pattern)
  • url für Webadressen
  • color für eine Farbauswahl mit Color-Picker
  • email für E-Mail-Adressen
  • file für Dateien, mit Dateiauswahldialog

Input Restriktionen und Erweiterungen

  • autofocus fokussiert das Feld bei Seitenaufruf
  • disabled für ein Feld, dass nicht aktiv ist (keine Eingabe möglich)
  • hidden für versteckte, nicht angezeigte Felder

  • formnovalidate für Submit. Überschreibt die Formularvalidierung

  • min, max für vorgegebene numerische Minimal- / Maximalwerte

  • maxlength für die maximale Anzahl an Ziffern oder Buchstaben
  • multiple für die Eingabe meherer Werte in einem Inputfeld
  • pattern zur Eingabevalidierung mit „regular Expression“ (RegEx)
  • placeholder für eine Textanzeige. Wird bei Eingabe überschrieben.
  • readonly für externe Nicht-HTML-Elemente
  • required für Pflichtfelder
  • step für die Angabe eines Intervalls bei numerische Feldern