HTML/Universalattribute

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

[Bearbeiten] 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 einzig sein.

Beispiel
<div id="footnote-collection">
Identifiziert den im Dokument einzig vorkommenden Bereich, der alle Fußnoten enthält.
  • HTML 4.0
  • XHTML 1.0
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
  • HTML5
Inhaltstyp
ein nicht leerer String ohne Leerzeichen
erlaubt in
allen Elementen

[Bearbeiten] 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 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 oder als Selektor für Javascript verwendet. Andere Prozesse können solche Elemente ebenfalls anhand der Klasse erkennen.

Vergeben Sie bitte informative Klassennamen. Informative Klassennamen geben Auskunft über den Inhaltstyp oder seine Rolle, nicht aber über irgendwelche Eigenschaften der visuellen Präsentation.

Beispiel
<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.

  • HTML 4.0
  • XHTML 1.0
Inhaltstyp
Text
darf vorkommen in
allen Elementen außer base, basefont, head, html, meta, param, script, style, title
  • HTML5
Inhaltstyp
Text
darf vorkommen in
allen Elementen

[Bearbeiten] accesskey

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

[Bearbeiten] contenteditable

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

  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Mögliche Werte sind:

  • true
  • false
Beispiel ansehen …
    <section contenteditable="true">
      <h2>Diese Überschrift kann verändert werden.</h2>
      <p>Dieser Absatz kann verändert werden.</p>
    </section>

Das section-Element hat das Universalattribut contenteditable mit dem Wert true. Da für die Kindelemente h2 und p kein Attribut gesetzt wurde, vererbt sich die Editierfähigkeit.


[Bearbeiten] contextmenu

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

  • HTML5
  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer

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>


[Bearbeiten] 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>
  • HTML 4.0
  • XHTML 1.0
Inhaltstyp
entweder die Zeichenfolge ltr oder rtl
erlaubt in
allen Elementen außer: applet, base, basefont, br, frame, frameset, hr, iframe, param, script
  • HTML5
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.

[Bearbeiten] draggable

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

  • HTML5
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Werte sind erlaubt:

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

[Bearbeiten] dropzone

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

  • HTML5
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

[Bearbeiten] hidden

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

  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
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.


[Bearbeiten] 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.

Beispiel
<html lang="de">
  • HTML 4.0
  • XHTML 1.0
Inhaltstyp
Genau ein IANA-Sprachkürzel
erlaubt in
allen Elementen außer: applet, base, basefont, br, frame, frameset, hr, iframe, meta, param, script
  • HTML5
Inhaltstyp
Genau ein IANA-Sprachkürzel
erlaubt in
allen Elementen
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 bitte das xml:lang-Attribut.

[Bearbeiten] spellcheck

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

  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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:


[Bearbeiten] 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">
  • HTML 4.0
  • XHTML 1.0
Inhaltstyp
CSS-Code
erlaubt in
allen Elementen außer: base, basefont, head, html, meta, param, script, style, title
  • HTML5
Inhaltstyp
CSS-Code
erlaubt in
allen Elementen

[Bearbeiten] tabindex

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><br>
  <a href="http://www.theonlineblues.com/" tabindex="2">Chart Lyrics</a><br>
  <a href="http://www.meinestadt.de/" tabindex="1">Meine Stadt</a><br>
  <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.

Es sind Zahlen zwischen -1 und 32767 erlaubt.

  • Ein Wert von -1 nimmt ein Element aus der Tabulator-Fokussierung, sodass es via Tabulator effektiv nicht mehr fokussierbar ist.
  • Ein Wert von 0 aktiviert ein Element für die Tabulator-Fokussierung, verändert aber nicht dessen Position in der Reihenfolge.
  • Ein Wert >0 aktiviert die Tabulator-Fokussierung und legt die Reihenfolge fest.

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.

Beachten Sie: Obwohl in SVG 2 geplant, können Sie derzeit noch keine SVG-Elemente mit tabindex fokussierbar machen.

[Bearbeiten] title

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.

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 im title-Attribut erklärt.
  • HTML 4.0
  • XHTML 1.0
Inhaltstyp
Text
erlaubt in
allen Elementen außer: base, basefont, head, html, meta, param, script, style, title
  • HTML5
Inhaltstyp
Text
erlaubt in
alle Elementen
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
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML