Globale HTML-Attribute

Die globalen oder universellen HTML Attribute von class, id, style, title bis lang im Überblick

Attribute enthalten zusätzliche Informationen und erweitern die Funktion und manchmal auch die Darstellung von HTML-Tags. Die globalen HTML-Attribute id, title, class, style, lang und dir können in fast allen HTML-Tags stehen.

Die HTML-Tags des head-Elements bilden eine Ausnahme – kaum eines der globalen Attribute passt zu head-Tags wie meta und link.

HTML Attribute

Alle HTML-Tags können durch Attribute im öffnenden Tag erweitert werden. Attribute sind immer ein Paar aus einem Namen und einem Wert name="value".

Neben den speziellen Attributen für bestimmte Tags (wie src="img.png" für das img-Tag oder href="myurl" für a- und base-Tags) gibt es die globalen oder universellen Attribute, die in nahezu jedem HTML-Tag eingesetzt werden können.

<img class="framed" src="myimg.png" width="600" height="400" alt="Ein Bild"> 
Attribute des img-Tags

Globale HTML-Attribute

accesskeyShortkey oder Tastaturkürzel für den Zugriff auf ein Element
checkspellRechtschreibprüfung durchführen
classCSS-Eigenschaften aus der CSS-Datei oder einem style-Tag
contenteditableBenutzer kann den Inhalt ändern
contextmenuKontextmenü eines Elements, das sich mit einem Rechtsklick öffnen soll
data-AttributEin eigenes Attribut für individuelle Javascript-Anwendungen.
dirdefinieren Sprache und Laufrichtung von Texten.
draggableBenutzer kann das Element ziehen.
dropzoneZiel eines mit draggable gezogenen Elements.
Event Handleronclick, onsubmit, onput … Javascript Event Handler sind immer noch valide Attribute, auch wenn sie kaum noch benutzt werden.
hiddenDer inhalt ist momentan nicht relevant und verborgen
ididentifiziert ein HTML-Tag im Dokument eindeutig.
itemscope, itemid, itemprop, itemref, itemtype Mikroformate, z.B. in der von schema.org definieren Syntax.
langdefinieren Sprache und Laufrichtung von Texten.
roleAufgabe des Elements
styleCSS im style-Attribut für dieses spezielle HTML-Element
tabindexReihenfolge bei der Navigation mit der Tabulator-Taste.
titlesetzt zusätzliche Informationen als Tooltip
translateOb das Element übersetzt werden soll oder nicht

accesskey

Das Tastaturkürzel, mit dem der Benutzer direkt zu einem Bereich der Seite springen kann, weicht in den verschiedenen Betriebssystemen und Browsern leicht voneinander ab.

<a href="#role" accesskey="r">role</a>
<a href="#role" accesskey="r">role</a>
<a href="#style" accesskey="s">style</a>

Unter Windows ist es [alt] zusammen mit dem festgelegten Zeichen, auf dem Mac [ctrl][alt], In Firefox Windows und Unix [alt][shift].

Benutzer müssen über die Existenz der accesskeys und der jeweiligen Shortcodes unterrichtet werden.

Zurück zur Liste

class-Attribut

Alle Tags außer base, basefont, head, html, meta, param, script, style, title

class transportiert CSS-Eigenschaften zu einem Tag und weist dem Tag den Namen eines Klassenselektors zu.

 <style type="text/css"> 
 .rot { color: red; } 
 </style> 
 ... 
 <p class="rot"> Der HTML-Code in diesem Beispiel ist rot. </p>

Zurück zur Liste

dir – Laufrichtung von Texten

Alle Tags außer base, bdo, br, iframe, param, script

Das HTML dir-Attribut gibt die Richtung des Textes an. Dazu passt das Kernattribut lang, das die verwendete Sprache definiert. Die Angabe der Sprache durch das Attribut lang reicht aber alleine nicht aus, um auch die Richtung des Textflusses zu steuern.

Die folgenden Werte können verwendet werden:

  • dir="ltr" ltr (Vorgabe) und setzt den Textfluss von links nach rechts.
  • dir="rtl" rtl Textfluss im Browser von rechts nach links.
<html dir="rtl" lang="he">
<body> 
  hier wird ein Text eingesetzt, 
  der von rechts nach links läuft
  …
</body>
</html>

Wenn das dir-Attribut im html-Tag des HTML-Dokuments angegeben ist, wird es auf das gesamte Dokument angewandt. In allen anderen Tags wirkt sich dir ausschließlich auf die Texte innerhalb des jeweiligen Tags aus. Beim <table>-Tag wird die erste Spalte der Tabelle auf der rechten Seite liegen und weitere Spalten werden sich zur linken Seite hin anschließen.

Dieser Text läuft mit dir="rtl" von rechts nach links.

HTML dir funktioniert nicht wie die Ausrichtung durch die CSS-Eigenschaft text-align: Der Punkt liegt auf der linken Seite vor dem Text.

Zurück zur Liste

HTML id-Attribut

Alle Tags außer base, head, html, meta, script, style, title

id (Identifier) weist einem Tag einen Namen zu. id-Attribute werden als Ziel für CSS-Eigenschaften, interne Links innerhalb einer Seite und zur eindeutigen Identifizierung eines HTML-Elements in Javascript verwendet.

CSS ID Selector
<button type="button" id="littleBox">Klick!</button>
              …
<script>
let littleBox = document.getElementById('littleBox');
littleBox.onclick = function() {
   document.getElementById("demobox").classList.toggle("showbox");
}
</script>

Zurück zur Liste

HTML lang

Alle Tags außer base, br, iframe, param, script

lang definiert die Basissprache für den Text und die Zeichen einer Webseite.

Sprachen werden durch einen Code aus zwei Buchstaben zugewiesen, z.B. "en" für Englisch und "el" für Griechisch. Ein oder mehrere Werte können durch einen Bindestrich angehängt werden, um eine regionale oder ethnische Ausprägung der Sprache zu deklarieren, z.B. "en-us" für US-Englisch.

<span lang="el"> hier wird ein Text in einer fremden Sprache eingesetzt </span> 

Und wenn der Text in keiner Sprache ist, sondern lange Artikelnummern oder Blindtext? Selbst für keine Sprache gibt es einen Language Code bei IANA:

<span lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
Type: language
Subtag: zxx
Description: No linguistic content

Zurück zur Liste

role="Aufgabe"

Die Accessible Rich Internet Applications Suite (ARIA) steuert das Attribut role zu, das in vielen Browsern bereits funktioniert. Wenn nicht, dann richtet role auch nichts an.

Diese role-Attribute werden in die relevaten HTML-Tags gesetzt:

  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

Diese role-Atribute beschreiben die Struktur der Seite:

  • article
  • columnheader
  • definition
  • directory
  • document
  • group
  • heading
  • img
  • list
  • listitem
  • math
  • note
  • presentation
  • region
  • row
  • rowheader
  • separator
  • toolbar

Mehr bei WAI-ARIA Overview

<hr role="separator">

In Tags wie nav oder aside ist das role-Attribut überflüssig. Das nav-Tag trägt die Rolle navigation bereits in sich, header braucht kein zusätzliches role="heading", aside braucht kein role="complementary":

<nav role="navigation">
<aside role="complementary">

Erste Regel für die Benutzung von ARIA:

Wenn ein natives HTML-Element oder -Attribut mit der Bedeutung und dem Verhalten des ARIA-Attributs existiert, das HTML-Element anstelle von role="[ARIA]" benutzt werden.

Einige role-Attribute sollten nur einmal auf der Seite vorkommen – so z.B. banner und contentinfo. Wir können also mehrere header-Tags pro Seite aufführen, aber nur einem Header sollte die Rolle des banner zugewiesen werden.

header role="banner" footer role="contentinfo" nav role="navigation" div role="main" aside role="complementary" form role="search"

Zurück zur Liste

style-Attribut

Alle Tags außer base, basefont, head, html, meta, param, script, style, title

style erzeugt CSS-Inlinestile innerhalb eines HTML-Tags, um die Darstellung des HTML-Elements zu ändern oder um Werte der globalen CSS-Datei an einer Stelle zu überschreiben.

Das Attribut style darf nicht mit dem <style>-Tag verwechselt werden. Das HTML style-Tag wird im head-Tag des HTML-Dokuments benutzt, um einer HTML-Seite globale Stile zuzuweisen oder CSS-Regeln aus der CSS-Datei zu importieren.

Zurück zur Liste

tabindex

tabindex legt fest, in welcher Reihenfolge Elemente bei einer Navigation mit der Tastatur (und zwar mit der Tabulator-Taste) angesteuert oder fokussiert werden. Diese Navigation ist unabhängig von der Reihenfolge der Elemente im HTML und wird auch durch eine Positionierung mit CSS nicht beeinflusst.

  • Mit tabindex="0" ist ein Element fokussierbar und wird mit der Tabulator-Taste in der Reihenfolge der Elemente erreicht.
  • Mit tabindex="-1" ist ein Element fokussierbar, aber soll beim Drücken der Tabulator-Taste nicht erreicht werden.

Größere Werte als 0 sind nicht mehr empfehlenswert, denn sie führen zu Sprüngen, die der Benutzer nicht nachvollziehen kann.

Formulare: input-Attribute für Eingabefelder

Zurück zur Liste

title-Attribut

Alle Tags außer base, basefont, head, html, meta, param, script, style, title

HTML title weist einem HTML-Tag einen kurzen Text zu und wird vom Browser als Tooltip benutzt. Die Browser zeigen ein kleines Fenster mit einem Hilfetext, wenn der Mauszeiger über dem HTML-Element liegt. Innerhalb der Zeichenkette können HTML-Zeichen benutzt werden – &#10;&#13; z.B. erzeugen einen Textumbruch bei der Darstellung.

Das title-Attribut darf nicht mit dem <title>-Tag im Header der Seite verwechselt werden, der einer HTML-Seite einen Titel für die Browserleiste zuweist.

<a href="title.html" title="Extern: Mehr zum title-Tag im Kopf des Dokuments">title • Titel des Dokuments</a>

Das title-Attribut sollte nicht denselben Text haben wie der Inhalt des HTML-Tags – die Wiederholung bringt weder Besuchern noch den Suchmaschinen einen Informationsgewinn, sondern ist sinnlose Last für die Ladezeit der Seite.

Davon abgesehen ist es überhaupt eine Frage, was ein Title-Attribut bringt. Auf Touchscreens wird es nicht angezeigt.

Zurück zur Liste

HTML-Attribute 1