HTML/Universalattribute
Universalattribute 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.
Inhaltsverzeichnis
id[Bearbeiten]
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.
<div id="footnote-collection">
| |
|
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
Idausgelesen und geändert werden kann.
class[Bearbeiten]
Der Titel dieses Artikels ist mehrdeutig. Für das gleichnamige Schlüsselwort siehe JavaScript/class.
Das class-Attribut ordnet ein Element einer oder mehreren 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.
Klassen werden in der Regel für Styling (siehe auch Klassenselektor) oder als Selektor für Javascript verwendet. Andere Prozesse können solche Elemente ebenfalls anhand der Klasse erkennen.
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.
<style>
.warnung {
color: red;
}
p.warnung {
border: 1px solid red;
background-color: peachpuff;
}
</style>
<body>
<h1 class="warnung">
Dies sind einige Möglichkeiten, die Klasse Warnung auf einige HTML-Elemente anzuwenden.
</h1>
<p class="warnung">Bitte die AGB lesen!</p>
<p><strong class="warnung">Achtung:</strong> Bitte die AGB lesen!</p>
</body>
Das Beispiel klassifiziert alle Elemente mit der Textfarbe rot; einen Absatz mit der Klasse warnung zusätzlich mit einem rotem Rand und einem hautfarbenen Hintergrund.
| |
|
accesskey[Bearbeiten]
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[Bearbeiten]
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
[Bearbeiten]
Das contextmenu-Attribut legt fest, ob Sie mit der rechten Maustaste ein Kontextmenü öffnen können.
Details: caniuse.com
<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>
dir[Bearbeiten]
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.
<q dir="rtl">עברית</q>
| |
|
Hinweis
Das dir-Attribut kann mit Element.dir ausgelesen oder verändert werden.
draggable[Bearbeiten]
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 werdenfalse: das Element kann nicht gezogen und verschoben werden
dropzone[Bearbeiten]
Das dropzone-Attribut sollte festlegen, ob ein Element beim Ziehen mit Drag & Drop bewegt, kopiert oder verlinkt wird.
[Bearbeiten]
Das hidden-Attribut zeigt an, dass ein Element nicht länger relevant ist und deshalb ausgeblendet wird.
lang[Bearbeiten]
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.
<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
|
- 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
langfestgelegt wurde.) - JavaScript Element.lang
spellcheck[Bearbeiten]
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 werdenfalse
Dieses Attribut können Sie in folgenden Elementen verwenden:
style[Bearbeiten]
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.
<img src="" style="left:247px; top:83px">
| |
|
tabindex[Bearbeiten]
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.
<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>
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.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
0aktiviert 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.
title[Bearbeiten]
Der Titel dieses Artikels ist mehrdeutig. Für das gleichnamige Element siehe HTML/Kopfdaten/title.
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.
<a href="http://example.org" title="external link">
href-Attribut nicht sofort ersichtlich ist, wird im title-Attribut angezeigt.<abbr title="International Panel for Climate Change">IPCC</abbr>
title-Attribut erklärt.
| |
|
