Attribut "Globale Attribute"

Attribut "Globale Attribute"

Definition

Das Attribut "Globale Attribute" steht für Globale Attribute (Global = überall verwendbar).

Globale Attribute sind Attribute, die auf (nahezu) jedes HTML-Element angewendet werden dürfen, unabhängig von dessen Semantik (z. B. <div>, <p>, <img>, <section>, <article>, <button>, <span>, <a>, <input>, …). Sie gehören zur Core DOM-Interoperabilität von HTML und werden von Parser, CSSOM, Accessibility-Tree und JavaScript-DOM gemeinsam ausgewertet.

Syntax


    Attribut = "[werte]" ("Schüssel = Wert", "key = value")

Gültige Tag

Gültig für:

Globale Attribute

id: Definiert eine dokumentweit eindeutige Kennung
class: Weist dem Element eine oder mehrere CSS-Klassen zu.
style: Ermöglicht Inline-CSS-Anweisungen direkt am Element.
title: Erzeugt einen Tooltip, wenn der Nutzer mit der Maus über das Element fährt.
lang: Gibt die Sprache des Elements an.
dir: Gibt die Schreibrichtung des Elements an.
translate: Gibt an, ob der Inhalt übersetzt werden soll.
hidden: Versteckt das Element vor der Anzeige.
tabindex: Steuert die Reihenfolge bei der Navigation mit der Tab-Taste.
contenteditable: Ermöglicht das Bearbeiten des Elements im Browser.
draggable: Gibt an, ob das Element per Drag-and-Drop verschoben werden kann.
data-*: Dient zum Speichern eigener, benutzerdefinierter Daten für Skripte.
accesskey: Definiert ein Tastaturkürzel für das Element.
autofocus: Setzt den Fokus auf das Element beim Laden der Seite.
spellcheck: Aktiviert oder deaktiviert die Rechtschreibprüfung.

Beispiele

= Tag

= Attribut

= Wert

Wichtig!

= Wichtig!

Beispiel Globale Attribute

Der Code:


<div id="beispiel" class="container"
style="color: red;" title="Dies ist ein Tooltip"
lang="de" dir="ltr" translate="no" tabindex="0"
contenteditable="true" draggable="true" data-info="benutzerdefinierte Daten"
accesskey="b" spellcheck="true">Beispiel-Text</div>

Ergebnis:

Vorschau: Globale Attributedemo.php

Hier werden nun einige globale Attribute in einem einzigen <div>-Element kombiniert. Man kann nun mit dem Tastaturkürzel "b" den Fokus auf dieses Element setzen, es ist editierbar, und zeigt einen Tooltip an, wenn man mit der Maus darüber fährt.

Das Tastaturkürzel immer in Verwendung mit einer Steuertaste verwenden (Chrome: Alt + b, Firefox: Alt + Shift + b), da sonst Konflikte mit Browser- oder Betriebssystem-Shortcuts auftreten können.