Informationen


HTML-Elemente
[Materialsammlung]

Der korrekte Einsatz von HTML-Elementen ist eine zentrale Aufgabe zur Gewährleistung digitaler Barrierefreiheit.

Der Einsatz verfügbarer HTML-Elemente erleichtert darüber hinaus vielfach die technische Realisierung von Webkomponenten. Deren Spektrum wurde insbesondere durch HTML5 erweitert.

Elemente des täglichen Gebrauchs

Komplexe Komponenten auf Webseiten

Ausklappmechanismus (Akkordeon)

In der Standarddarstellung steht bei einer ausklappbaren Komponente gewöhnlich lediglich ein Schalter zur Verfügung, der beim Aktivieren zusätzliche Inhalte einblendet. Technisch kann der Mechanismus ohne zusätzliche Scripts und ARIA-Anweisungen mit folgenden HTML-Elementen realisiert werden:

Beschriftung einer Darstellung (figure)

Alphabetische Liste verfügbarer HTML-Elemente

a (Anker / Link)

MDN | <a>: The Anchor element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

abbr (Abkürzung)

MDN | <abbr>: The Abbreviation element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

address (Kontaktaddresse)

MDN | <address>: The Contact Address element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

area (Fläche einer Kartengrafik)

MDN | <area>: The Image Map Area element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

article (Artikel)

Abschnittskennzeichung für Eine in sich geschlossene Zusammenführung von Inhalt ("Komposition") in einem Dokument, einer Webseite, einer Anwendung oder einem Webauftritt. Die Komposition sollte unabhängig verbreitet oder wiederverwendet werden können (beispielsweise bei einer Mehrfachverwendung).

Als Beispiele werden ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, eine Produktbeschreibung, ein Kommentar, eine interaktive Komponente oder Schnickschnack oder sonst ein unabhängiges Stück Inhalt angeführt.

Typischerweise beginnt ein Artikel mit einer Überschrift.

Links zum article-Element

WHATWG | The article element
Die Spezifikation aus dem Living Standard mit Beispielen.
MDN | <article>: The Article Contents element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

aside (Nebenregion)

MDN | <aside>: The Aside element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

audio (Eingebetteter Audioinhalt)

MDN | <audio>: The Embed Audio element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

b (Aufmerksammachung)

Aufmerksammachung auf einen Textbereich (bring attention to ).

Früher war das b-Element für die visuelle Formatierung bold (fett) vorgesehen. Die saubere visuelle Darstellung Fett sollte jedoch über CSS font-weight erfolgen, weshalb der Einsatzbereich nun wenig intuitiv formuliert ist.

strong (Vorrangiger Text)

WHATWG | The b element
Die Spezifikation aus dem Living Standard.
MDN | <b>: The Bring Attention To element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

base (Grundlegende URL)

MDN | <base>: The Document Base URL element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

bdi (Leserichtung eines Abschnitts)

MDN | <bdi>: The Bidirectional Isolate element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

bdo (Bidirektionalen Text überschreiben)

MDN | <bdo>: The Bidirectional Text Override element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

blockquote (Zitatblock)

blockquote-Element (Zitatblock)
Verwendung und Missbrauch des blockquote-Elements
MDN | <blockquote>: The Block Quotation element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

body (Dokumenteninhalt)

Links zum body-Element

MDN | <body>: The Document Body element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

br (Zeilenumbruch)

MDN | <br>: The Line Break element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

button (Schalter)

MDN | <button>: The Button element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

canvas (Zeichnungen und Animationen)

MDN | <canvas>: The Graphics Canvas element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

caption (Tabellentitel)

MDN | <caption>: The Table Caption element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

cite (Titel eines zitierten Werks)

Mit dem cite-Element wird in HTML der Titel eines Werks gekennzeichnet.

cite-Element (Quellenangabe)
Verwendung und Missbrauch des cite-Elements
MDN | <cite>: The Citation element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

code (Codesegment im Text)

MDN | <code>: The Inline Code element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

col (Tabellenspalte)

Definition einer Spalte in einer Tabelle zum Festlegen allgemeiner Semantik für gewöhnliche Zellen.
Beispiel: CSS-Anweisungen für jede Zelle in der spalte festlegen.

Generell in einem colgroup-Element zu finden.

JAWS scheint das Element bei der Ermittlung der Spaltenzahl zu ignorieren.

MDN | <col>: The Table Column element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

colgroup (Gruppe von Tabellenspalten)

Festlegen einer gruppe von Spalten in einer Tabelle.

In einem span-Attribut kann die Anzahl der Spalten festgelegt werden, sofern Spalten nicht durch enthaltene col-Elemente festgelegt sind.

MDN | <colgroup>: The Table Column Group element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

data (Verlinkung zu maschinenlesbarem Inhalt)

MDN | <data>: The Data element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

datalist (Liste verfügbarer Optionen)

MDN | <datalist>: The HTML Data List element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

dd (Beschreibung in einer Beschreibungsliste)

MDN | <dd>: The Description Details element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

del (Gelöschter Text)

Dies kann zur Kennzeichnung von Korrekturen oder Versionsunterschieden verwendet werden.

Testdatei für DEL und INS-Element [zu aktualisieren]
Unterstützung des Elements durch Screen Reader?
MDN | <del>: The Deleted Text element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

details (Container für Ausklappmechanismus)

summary (Steuerelement zum Ausklappen)

MDN | <details>: The details element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

dfn (Definition)

Mit dem dfn-Tag kann in HTML ein Ausdruck gekennzeichnet werden, dessen Definition sich im title-Attribut des jeweiligen Inline-Elements befindet.

Die Kennzeichnung eines Ausdrucks als beschrieben im title-Attribut ist enig hilfreich für die Barrierefreiheit.

MDN | <dfn>: The dfn element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

dialog (Dialogbox)

MDN | <dialog>: The Dialog element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

div (Inhaltsbereich)

MDN | <div>: The Content Division element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

dl (Beschreibungsliste)

MDN | <dl>: The Description List element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

dt (Begriff in einer Beschreibungsliste)

MDN | <dt>: The Description Term element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

em (Schwerpunkt)

Kennzeichnung von Schwerpunkten in einem Text (stress emphasis).

MDN | <em>: The Emphasis element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

embed (Einbetten externer Inhalte)

MDN | <embed>: The Embed External Content element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

fieldset (Gruppe von Formularkomponenten)

Steuerelemente und Beschriftungen in einem webformular gruppieren.

legend (Beschriftung eines fieldset)

MDN | <fieldset>: The Field Set element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

figcaption (Beschriftung in einer beschrifteten Darstellung)

Mit dem figcaption-Element sollte ein figure-Element mit einer Beschriftung versehen werden.

figure (Container für Darstellung mit Beschriftung)

MDN | <figcaption>: The Figure Caption element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

figure (Container für eine Darstellung mit Beschriftung)

Zweckmäßig wird mit dem figure-Element eine Abbildung, ein Codebeispiel oder ähnliches mit einer Beschriftung und Zusatzinformationen gruppiert.

figcaption (Beschriftung in einer beschrifteten Darstellung)

MDN | <figure>: The Figure with Optional Caption element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.
MDN | <footer>: The Footer element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

form (Formularbereich)

MDN | <form>: The form element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

h1 - h6 (Überschriften)

Blockelement für Abschnittsüberschriften.
Die Ziffer gibt die hierarchische Ebene der Überschrift an, wobei h1 die oberste Ebene darstellt.

strong-Element (Vorrangiger Text)

Überschriften barrierefrei
Technische, redaktionelle und grafische Anforderungen zur barrierenfreien Gestaltung von Überschriften.
WHATWG | 4.3.6 The h1, h2, h3, h4, h5, and h6 elements
Die Spezifikation aus dem Living Standard.
MDN | <head>: The Document Metadata (Header) element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.
MDN | <header>
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

hgroup (Gruppieren von Überschrift mit Teaser)

Gruppieren einer Überschrift mit Zusatzinformationen oder alternativen Überschriftn als Absätze

Überschrift mit Zusatz
hgroup-Element (Überschriftengruppe)
WHATWG | The hgroup element
Die Spezifikation aus dem Living Standard.
MDN | <hgroup>
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

hr (Themenwechsel)

MDN | <hr>: The Thematic Break (Horizontal Rule) element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

html (Technischer Ursprung)

MDN | <html>: The HTML Document / Root element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

i (Abgehobener Text)

Textabschnitte mit einer Bedeutung, die visuell vom umgebenden Text abgehoben werden sollte, wie Idiomatische Inhalte (et cetera), Stimmungswechsel, taxonomische Fachausdrücke (Homo sapiens) et cetera.

Historisch wurde das <i>-Element zur kursiven Formatierung vorgesehen (italic). Fälschlich wird es vielfach zur Kennzeichnung von Icons etwa aus Font Awesome verwendet.

MDN | <i>: The Idiomatic Text element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

iframe (Eingebetteter HTML Inhalt)

MDN | <iframe>: The Inline Frame element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

img (Bild)

MDN | <img>: The Image element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

input (Eingabefeld)

MDN | <input>: The Input (Form Input) element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

ins (Einfügung)

Dies kann zur Kennzeichnung von Korrekturen oder Versionsunterschieden verwendet werden.

Testdatei für DEL und INS-Element [zu aktualisieren]
Unterstützung des Elements durch Screen Reader?
MDN | <ins>: The Insert element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

kbd (Tastaturelement)

MDN | <kbd>: The Keyboard Input element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

label (Beschriftung eines Steuerelements)

MDN | <label>: The Label element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

legend (Beschriftung eines Eingabebereichs)

MDN | <legend>: The Field Set Legend element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

li (Listenelement)

MDN | <li>: The List Item element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.
MDN | <link>: The External Resource Link element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

main (Hauptinhalt eines Dokuments)

MDN | <main>: The Main element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

map (Link in einer Kartendarstellung)

MDN | <map>: The Image Map element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

mark (Markierung von Text)

Das mark-Elementdient dazu, Textabschnitte als markiert zu kennzeichnen. Das kann etwa in Trefferlisten zu Suchanfragen hilfreich sein, wie im folgenden Beispiel.

Ihre Suche nach „Würde“ lieferte folgendes Ergebnis:

Alle Menschen sind gleich an Würde.

Bei der Erklärung der Verwendung eines Codes kann in einem Codebeispiel der entscheidende Bereich mit dem mark-Element gekennzeichnet werden:

Verwenden Sie das Attribut aria-label, um die besondere Funktion eines Navigationsbereichs zu beschreiben:

<nav aria-label="Position">

MDN | <mark>: The Mark Text element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

Das menu-Element kennzeichnet eine unnummerierte Liste und wird von Browsern semantisch wie eine ul interpretiert.

Um vorangestellte Aufzählungszeichenzu entfernen, muss die CSS-Anweisung list-style-type: none eingesetzt werden kann.

MDN | <menu>: The Menu element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

meta (Metanagaben)

MDN | <meta>: The metadata element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

meter (Maßbalken)

MDN | <meter>: The HTML Meter element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.
MDN | <nav>: The Navigation Section element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

noscript (Alternativen bei nicht-verfügbaren Scripts )

object (Externe Ressource)

MDN | <object>: The External Object element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

ol (Geordnete Liste)

MDN | <ol>: The Ordered List element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

optgroup (Gruppieren von Optionen in einem Auswahlelement)

MDN | <optgroup>: The Option Group element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

option (Auswahlmöglichkeit)

MDN | <option>: The HTML Option element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

output (Ergebnisse)

samp (Programmmeldung)

MDN | <output>: The Output element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

p (Absatz)

MDN | <p>: The Paragraph element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

picture (Container für Bildalternativen)

MDN | <picture>: The Picture element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

portal (Einbauen einer HTML-Seite) experimentell!

MDN | <portal>: The Portal element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

pre (Code-Darstellung)

MDN | <pre>: The Preformatted Text element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

progress (Fortschrittsdarstellung)

MDN | <progress>: The Progress Indicator element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

q (Kurzes Zitat)

q-Element (Inline-Zitat)
Verwendung des q-Elements und Alternativen
MDN | <q>: The Inline Quotation element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

rp (Ersatzdarstellung ostasiatischer Schriftzeichen)

MDN | <rp>: The Ruby Fallback Parenthesis element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

rt (Aussprachetext)

MDN | <rt>: The Ruby Text element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

ruby (Hinweisbereich für Aussprache)

MDN | <ruby>: The Ruby Annotation element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

s (Durchgestrichener Text)

MDN | <s>: The Strikethrough element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

samp (Programmmeldung)

Darstellung der Meldung eines Computerprogramms innerhalb einer Zeile. Typischerweise verwenden Browser eine monospace-Schriftart.

Trotz der assoziativen Bezeichnung sample ist das Element nicht dafür geeignet, ein Beispiel zu kennzeichnen.

output (Ergebnis eines Prozesses)

MDN | <samp>: The Sample Output element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

script (Einbetten von ausführbarem Code oder von Daten)

MDN | <script>: The The Script element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.
MDN | <search>: The generic search element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

section (Allgemeiner Abschnitt)

MDN | <section>: The Generic Section element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

select (Container für Auswahl)

MDN | <select>: The HTML Select element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

slot (Platzhalter für eigene Komponenten)

MDN | <slot>: The Web Component Slot element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

small (Verkleinerte Kommentare)

MDN | <small>: The side comment element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

source (Festlegen alternativer Medienquellen)

MDN | <source>: The Media or Image Source element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

span (Allgemeiner Bereich innerhalb einer Zeile)

MDN | <span>: The Content Span element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

strong (Vorrangiger Text)

MDN | <strong>: The strong element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

style (Container für CSS-Anweisungen)

MDN | <style>: The Style Information element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

sub (Tiefgestellt)

MDN | <sub>: The Subscript element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

summary (Beschriftung des Schalters zum Ausklappen in einem Akkordeon-Element)

details (Container für den Ausklappmechanismus)

MDN | <summary>: The Disclosure Summary element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

sup (hochgestellt)

MDN | <sup>: The Superscript element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

table (Tabelle)

MDN | <table>: The Table element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

tbody (Wertebereich einer Tabelle)

MDN | <tbody>: The Table Body element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

td (Datenzelle einer Tabelle)

MDN | <td>: The Table Data Cell element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

template (Vorlage)

MDN | <template>: The Content Template element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

textarea (Mehrzeiliges Eingabefeld)

MDN | <textarea>: The Textarea element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

tfoot (Fußbereich einer Tabelle)

MDN | <tfoot>: The Table Foot element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

th (Tabellenzelle mit Überschriftenfunktion)

MDN | <th>: The Table Header element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

thead (Kopfbereich einer Tabelle)

MDN | <thead>: The Table Head element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

time (Zeitangabe)

MDN | <time>: The (Date) Time element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

title (Dokumententitel)

MDN | <title>: The Document Title element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

tr (Tabellenzeile)

MDN | <tr>: The Table Row element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

track (Container für Untertitel)

MDN | <track>: The Embed Text Track element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

u (Indikator für nicht-textuelle Anmerkung)

MDN | <u>: The Unarticulated Annotation (Underline) element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

ul (Ungeordnete Liste)

MDN | <ul>: The Unordered List element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

var (Variablenname)

MDN | <var>: The Variable element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

video (Videoinhalt)

MDN | <video>: The Video Embed element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

wbr (Sollbruchstelle für allfällige Silbentrennung)

MDN | <wbr>: The Line Break Opportunity element
Informationen und Praxisbeispiele aus dem Mozilla Developer Network.

Verpönte Elemente (deprecated)

Die folgenden Elemente aus älteren HTML-Versionen dürfen auf neu erstellten Seiten nicht mehr verwendet werden:

Hervorhebungen mittels HTML-Inline-Elementen

Hervorgehobene Textabschnitte innerhalb eines Absatzes können zu einem besseren Verständnis beitragen. Zentrale Aussagen können damit visuell durch semantische Kennzeichnungen als inhaltliche Schwerpunkte erscheinen.