HTML/Universalattribute

Universalattribute (englisch für global attributes) haben in allen Elementen, in denen sie vorkommen dürfen, eine universell konstante Rolle. Je nach Sprachstandard gibt es jedoch Abweichungen bezüglich der Elemente, in denen die Universalattribute vorkommen dürfen. Als Faustregel dürfen Sie sich merken: Universalattribute dürfen innerhalb des body-Elements in den allermeisten Elementen vorkommen. Um die Gültigkeit abzuklären, schlagen Sie bitte in der HTML-Referenz das fragliche Element nach.

• HTML/Universalattribute/data-Attribute
• HTML/Universalattribute/itemprop-Mikrodaten

id

Das id-Attribut identifiziert ein Element innerhalb eines Dokuments. Es dient vorwiegend als Ziel eines Linkfragments, als Identifikator innerhalb des CSS-Selektors oder als Identifikator für Javascript-DOM-Methoden. Beliebige andere Prozesse können solche Elemente ebenfalls identifizieren.

Der Inhalt des id-Attributes muss innerhalb des Dokuments ein-eindeutig sein, d.h. es darf kein weiteres Element den selben String als Wert seines id-Attributes haben und jedes Element darf auch nur maximal ein id-Attribut haben.

Beispiel

<div id="footnote-collection">

Identifiziert den im Dokument einzig vorkommenden Bereich, der alle Fußnoten enthält.

	Inhaltstyp Typ ID, ein Zeichen aus [A-Za-z] gefolgt von beliebig vielen Zeichen aus [A-Za-z0-9_:.-] erlaubt in allen Elemente außer: base, head, html, meta, script, style, title
	Inhaltstyp ein nicht leerer String ohne Leerzeichen erlaubt in allen Elementen

Der Titel dieses Artikels ist mehrdeutig. Für weitere Bedeutungen von id (Abkürzung für engl. identity) siehe auch

• die JavaScript-Eigenschaft Element.id, mit der die Id ausgelesen und geändert werden kann.

Beachten Sie: Die Regeln für ids in HTML und CSS sind unterschiedlich. Zum Beispiel darf man in HTML inzwischen eine Ziffer an erster Stelle haben und vieles mehr. IDs, die keine gültigen CSS-Identifier sind, müssen beim Einsatz in ID-Selektoren codiert und maskiert werden. Folgen Sie dem Link, um darüber näheres zu erfahren.

class

Der Titel dieses Artikels ist mehrdeutig. Für das gleichnamige Schlüsselwort siehe JavaScript/class.

Das class-Attribut ordnet ein Element einer oder mehreren (durch Leerzeichen getrennten) Klassen zu. Klassen sind ein HTML-Konzept, um gleichartige Elemente im Markup zu kennzeichnen mit dem (nicht alleinigen!) Ziel, diese mit einem Klassenselektor ansprechen zu können. Dabei müssen es nicht unbedingt gleichartige Elemente sein.

Empfehlung: Vergeben Sie informative Klassennamen, die Auskunft über den Inhaltstyp oder seine Rolle, nicht aber über irgendwelche Eigenschaften der visuellen Präsentation geben. Der Klassenname bleibt daher sinnvoll, wenn sich die visuelle Präsentation ändert oder er innerhalb eines JavaScripts verwendet wird.

Anwendung mehrerer Klassen ansehen …

<p class="aktuell">
  Mit <kbd>F12</kbd> können Sie im Seiteninspektor die einzelnen Klassen und ihre CSS-Zuweisungen untersuchen.
</p>
<p id="tipp" class="sicherheitshinweis aktuell">
  Bitte überprüfen Sie Ihre Sicherheitseinstellungen!
</p>

ansehen …

Das Beispiel enthält zwei Textabsätze. Der untere Absatz ist 2 Klassen zugeordnet. Die CSS-Festlegungen der ersten Klasse aktuell für border-left und background-color werden von den Regelsätzen der zweiten Klasse sicherheitshinweis überschrieben.

	Inhaltstyp Text darf vorkommen in allen Elementen außer base, basefont, head, html, meta, param, script, style, title
	Inhaltstyp Text (Klassennamen, mehrere Klassen werden durch Leerzeichen getrennt) darf vorkommen in allen Elementen

accesskey

Mit accesskey können Sie ein Zeichen auf der Tastatur bestimmen, das der Anwender drücken kann, um Elemente direkt anzuspringen (accesskey = Zugriffstaste).

• siehe auch: Tastaturkürzel als Verweise

contenteditable

Das contenteditable-Attribut legt fest, ob Sie den Inhalt eines Elements editieren (verändern) dürfen.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Mögliche Werte sind:

• true
• false

Hauptartikel: HTML/Universalattribute/contenteditable

contextmenu

Das contextmenu-Attribut legt fest, ob Sie mit der rechten Maustaste ein Kontextmenü öffnen können.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Beispiel

<body contextmenu="info">
  <menu type="context" id="info">
    <menu label="info">
      <menuitem label="Referenz:HTML" onclick="window.open('http://wiki.selfhtml.org/wiki/Referenz:HTML');"></menuitem>
      <menuitem label="Referenz:CSS" onclick="window.open('http://wiki.selfhtml.org/wiki/Referenz:CSS');"></menuitem>
    </menu>
  </menu>
</body>

Beachten Sie: Das hier gezeigte menu-Element wurde aus dem Standard entfernt. Daneben existiert aber das gleichnamige JavaScript/DOM/Event/contextmenu-Element.

dir

Das dir-Attribut definiert die Schreibrichtung innerhalb des Dokuments. Sprachen wie Arabisch oder Hebräisch schreiben sich von rechts nach links. Im Unicode-System besteht jedoch bereits Information zur Schreibrichtung. Verwenden Sie dieses Element dann, wenn in einem Element die Schreibrichtung kontrolliert werden muss. CSS verfügt über zusätzliche Möglichkeiten zur Kontrolle der Schreibrichtung.

Beispiel

<q dir="rtl">עברית</q>

	Inhaltstyp entweder die Zeichenfolge ltr oder rtl erlaubt in allen Elementen außer: applet, base, basefont, br, frame, frameset, hr, iframe, param, script
	Inhaltstyp entweder die Zeichenfolge ltr oder rtl erlaubt in allen Elementen

Hinweis

Obwohl diese Attribute in HTML5 für alle Elemente formal erlaubt sind, ist ihre Verwendung für die früher verbotenen Elemente unter Umständen sinnfrei.

Das dir-Attribut kann mit Element.dir ausgelesen oder verändert werden.

draggable

Das draggable-Attribut zeigt an, ob das Element mit der Drag & Drop API gezogen (gedraggt) werden kann.

• 
• 
• 
• 
• 
• 

Folgende Werte sind erlaubt:

• true: das Element kann gezogen und verschoben werden
• false: das Element kann nicht gezogen und verschoben werden

dropzone

Das dropzone-Attribut sollte festlegen, ob ein Element beim Ziehen mit Drag & Drop bewegt, kopiert oder verlinkt wird.

• 
• 
• 
• 
• 
• 

hidden

Das hidden-Attribut zeigt an, dass ein Element nicht länger relevant ist und deshalb ausgeblendet wird.

• 
• 
• 
• 
• 
• 

Beachten Sie: Sie dürfen das hidden-Attribut keinesfalls dafür verwenden um Inhalte zu verstecken, die aktuell für den User nicht sichtbar sein sollen, wie etwa ausgeblendete Untermenüs.

Beachten Sie: Mittels CSS können Elemente angezeigt werden, auch wenn sie das hidden-Attribut tragen.

inputmode

Das inputmode-Attribut hilft mobilen Geräten, die richtige Tastatur(-belegung) zu wählen.

Hauptartikel: HTML/Formulare/Gestaltung#inputmode

lang

Das lang-Attribut legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest. Das Attribut sollte auch bei einsprachigen Dokumenten im root-Element (html) definiert werden und für mehrsprachige Dokumente in jedem Element, ab welchem ein Wechsel der Sprache stattfindet.

Sprachangabe

<html lang="de">

	Inhaltstyp	erlaubt in
	Genau ein IANA-Sprachkürzel	allen Elementen
	Genau ein IANA-Sprachkürzel	allen Elementen außer: applet, base, basefont, br, frame, frameset, hr, iframe, meta, param, script

Empfehlung:

• Verwenden Sie immer das Sprachattribut im html-Tag, um die Sprache des Textes auf Ihrer Seite anzugeben.
• Für Seiten, die als XML ausgeliefert werden, verwenden Sie das xml:lang-Attribut.

Siehe auch:

• Internationalisierung
• :lang() (Pseudoklasse, die Elemente selektiert, deren Sprache mittels des Universalattributs lang festgelegt wurde.)
• JavaScript Element.lang

spellcheck

Das spellcheck-Attribut legt fest, ob die browserinterne Rechtschreibprüfung aktiviert werden soll.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Mögliche Werte sind:

• true: Eingabe soll auf Rechtschreibung überprüft werden
• false

Dieses Attribut können Sie in folgenden Elementen verwenden:

• input
• textarea

style

Das style-Attribut hat als Inhalt CSS-Code. Normalerweise notiert man CSS in eigenen CSS-Files oder in style-Elementen im Head. Für manche Zwecke ist es jedoch sinnvoll, styles direkt in einem Element zu notieren, zum Beispiel, wenn viele Bilder auf einer Karte platziert werden und die Positionen direkt notiert werden. Diese sogenannten Inline-Styles haben einige Beschränkungen im Vergleich zu den global notierten Varianten. So sind Definitionen von Pseudoattributen und Medientyp-Kontext nicht möglich. Man sollte style-Attribute also nur in begründeten Ausnahmen verwenden.

Beispiel

<img src="" style="left:247px; top:83px">

	Inhaltstyp CSS-Code erlaubt in allen Elementen außer: base, basefont, head, html, meta, param, script, style, title
	Inhaltstyp CSS-Code erlaubt in allen Elementen

tabindex

Der Titel dieses Artikels ist mehrdeutig. Für tabindex Tabulator-Reihenfolge siehe auch

• das Universalattribut tabindex
• das Universalattribut tabindex bei SVG-Elementen
• Änderung/Auslesen durch JavaScript mit Element.tabIndex
• Tabulator-Reihenfolge für Verweise

Das tabindex-Attribut ermöglicht mit Hilfe der Tabulator-Taste ( ↹ ) neben Verweisen, Buttons und input-Elementen beliebige Elemente einer HTML-Datei anzuspringen.

Beispiel ansehen …

<a href="http://german.imdb.com/" tabindex="4">Movie Database</a>
<a href="http://www.theonlineblues.com/" tabindex="2">Chart Lyrics</a>
<a href="http://www.meinestadt.de/" tabindex="1">Meine Stadt</a>
<a href="http://paperball.fireball.de/" tabindex="3">Paperball</a>

Mit dem Attribut tabindex können Sie Angaben zur Tabulator-Reihenfolge machen. Beim Anspringen der Verweise mit der Tabulator-Taste wird zuerst der Verweis mit der niedrigsten Tabindex-Nummer angesprungen, dann der mit der zweitniedrigsten usw. und als letztes der Verweis mit der höchsten Tabindex-Nummer. Im obigen Beispiel wird also zuerst der dritte Verweis angesprungen, dann der zweite, dann der vierte und zuletzt der erste.

ansehen …

Es sind ganze Zahlen erlaubt.

• Ein negativer Wert nimmt ein Element aus der Tabulator-Fokussierung, sodass es via Tabulator effektiv nicht mehr fokussierbar ist (über andere Möglichkeiten ist es aber dennoch fokussierbar).
• Ein Wert von 0 aktiviert ein Element für die Tabulator-Fokussierung, verändert aber nicht dessen Position in der Reihenfolge.
• Ein positiver Wert aktiviert die Tabulator-Fokussierung und legt die Reihenfolge fest.

Beachten Sie: Die Tabindizes beziehen sich stets auf das gesamte angezeigte Dokument. Dabei werden auch Formulare sowie Verweisbereiche in Grafiken und Objekten mit einbezogen. Wenn Sie außer normalen Verweisen auch solche Elemente in Ihrer Datei haben, sollten Sie die Tabulator-Reihenfolge für alle Elemente gemeinsam festlegen. Das bedeutet aber auch, dass es in den meisten Fällen sinnvoll ist, auf eine geänderte Tabulatorreihenfolge zu verzichten.

• Tabulator-Reihenfolge für Verweise
• Focus und Tabs bei Formularen

title

Der Titel dieses Artikels ist mehrdeutig.

• Für das gleichnamige HTML-Element siehe HTML/Kopfdaten/title.
• Für das gleichnamige SVG-Element siehe SVG/Elemente/Metadaten.

Das title-Attribut betitelt oder beschreibt ein Element. Browser blenden den Text ein, wenn der Anwender das Element hovert (mit der Maus draufzeigt, beispielsweise). Typisch ist das Kommentieren von Links, das Liefern von Zusatzinformationen zu Bildern oder die Erklärung von Abkürzungen. Das Betiteln sollte auf übergeordneten Elementen nur sparsam ausgeführt werden.

Beispiel

<a href="http://example.org" title="external link">

Zusatzinformation, die aus dem href-Attribut nicht sofort ersichtlich ist, wird im title-Attribut angezeigt.

<abbr title="International Panel for Climate Change">IPCC</abbr>

Abkürzungen werden mit dem abbr-Element ausgezeichnet und im title-Attribut erklärt.

Beachten Sie: Browser stellen den Inhalt des title-Attributs verschieden dar. Firefox etwa schreibt eine einzige Zeile. MSIE hingegen zeigt, wenn nötig, ein mehrzeiliges Feld. Vermeiden Sie deshalb zu langen Text und Umbrüche.

Empfehlung: Sie können mithilfe von CSS den Inhalt von Attributen auslesen und beliebig darstellen. Siehe

• CSS/Eigenschaften/generierter_Inhalt/content
• CSS/Tutorials/Tooltips mit CSS