Attribute

Attribute wurden kurz in Übersicht über HTML behandelt. Sehen wir uns das mal genauer an.

Attribute machen HTML so leistungsstark. Attribute sind durch Leerzeichen getrennte Namen und Name/Wert-Paare, die im öffnenden Tag enthalten sind und Informationen zum Element sowie Funktionen für das Element bereitstellen.

Attribute definieren das Verhalten, die Verknüpfungen und die Funktionalität von Elementen. Einige Attribute sind global, d. h., sie können im öffnenden Tag eines beliebigen Elements vorkommen. Andere Attribute gelten für mehrere, aber nicht alle Elemente, während wieder andere elementspezifisch sind und nur für ein einzelnes Element relevant sind. In HTML benötigen alle Attribute außer booleschen und in gewissem Maße aufgezählten Attributen einen Wert.

Wenn ein Attributwert ein Leerzeichen oder Sonderzeichen enthält, muss der Wert in Anführungszeichen gesetzt werden. Aus diesem Grund und zur besseren Lesbarkeit sind Zitate immer empfehlenswert.

Bei HTML wird die Groß- und Kleinschreibung nicht berücksichtigt, bei einigen Attributwerten jedoch schon. Bei Werten, die Teil der HTML-Spezifikation sind, wird die Groß-/Kleinschreibung nicht berücksichtigt. Bei definierten Stringwerten wie Klassen- und ID-Namen wird die Groß- und Kleinschreibung berücksichtigt. Wenn ein Attributwert in HTML die Groß- und Kleinschreibung berücksichtigt, ist dies auch der Fall, wenn er als Attributselektor in CSS und in JavaScript verwendet wird. Andernfalls wird die Groß- und Kleinschreibung nicht berücksichtigt.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the ID attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

Boolesche Attribute

Wenn ein boolesches Attribut vorhanden ist, ist es immer „true“. Boolesche Attribute sind autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default,, loop, autoplay, controls, muted, readonly, multiple, und selected. Wenn eines (oder mehrere) dieser Attribute vorhanden ist, ist das Element deaktiviert, erforderlich, schreibgeschützt usw. Wenn nicht, ist es das nicht.

Boolesche Werte können entweder weggelassen, auf einen leeren String gesetzt oder der Name des Attributs sein. Der Wert muss jedoch nicht auf den String true gesetzt werden. Alle Werte, einschließlich true, false und 😀, werden als „wahr“ ausgewertet, auch wenn sie ungültig sind.

Diese drei Tags sind gleichwertig:

<input required>
<input required="">
<input required="required">

Wenn der Attributwert „false“ ist, lassen Sie das Attribut weg. Wenn das Attribut „true“ ist, fügen Sie es ein, geben Sie aber keinen Wert an. required="required" ist beispielsweise kein gültiger Wert in HTML. Da required jedoch ein boolescher Wert ist, werden ungültige Werte in „true“ aufgelöst. Da ungültige Aufzählungsattribute jedoch nicht unbedingt denselben Wert wie fehlende Werte haben, ist es einfacher, sich anzugewöhnen, Werte wegzulassen, als sich zu merken, welche Attribute boolesch und welche aufgezählt sind und möglicherweise einen ungültigen Wert anzugeben.

Wenn Sie zwischen „true“ und „false“ wechseln, sollten Sie das Attribut mit JavaScript hinzufügen und entfernen, anstatt den Wert zu ändern.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

Aufgezählte Attribute

Aufgezählte Attribute werden manchmal mit booleschen Attributen verwechselt. Sie sind HTML-Attribute mit einer begrenzten Anzahl vordefinierter gültiger Werte. Wie bei booleschen Attributen haben sie einen Standardwert, wenn das Attribut vorhanden ist, der Wert jedoch fehlt. Wenn Sie beispielsweise <style contenteditable> einfügen, wird standardmäßig <style contenteditable="true"> verwendet.

Im Gegensatz zu booleschen Attributen bedeutet das Auslassen des Attributs jedoch nicht, dass es „false“ ist. Ein vorhandenes Attribut mit einem fehlenden Wert ist nicht unbedingt wahr und der Standardwert für ungültige Werte ist nicht unbedingt derselbe wie ein Nullstring. Im Beispiel ist contenteditable standardmäßig inherit, wenn es fehlt oder ungültig ist. Es kann explizit auf false gesetzt werden.

Der Standardwert hängt vom Attribut ab. Im Gegensatz zu booleschen Werten sind Attribute nicht automatisch „wahr“, wenn sie vorhanden sind. Wenn Sie <style contenteditable="false"> einfügen, kann das Element nicht bearbeitet werden. Wenn der Wert ungültig ist, z. B. <style contenteditable="😀"> oder überraschenderweise <style contenteditable="contenteditable">, ist der Wert ungültig und es wird standardmäßig inherit verwendet.

In den meisten Fällen mit aufgezählten Attributen sind fehlende und ungültige Werte identisch. Wenn das Attribut type für ein <input> fehlt, vorhanden, aber ohne Wert ist oder einen ungültigen Wert hat, wird standardmäßig text verwendet. Das ist zwar häufig der Fall, aber keine Regel. Daher ist es wichtig zu wissen, welche Attribute boolesch und welche aufgezählt sind. Lassen Sie Werte nach Möglichkeit weg, damit Sie sie nicht falsch angeben, und suchen Sie den Wert bei Bedarf nach.

Globale Attribute

Globale Attribute können für jedes HTML-Element festgelegt werden, auch für Elemente im <head>. Es gibt mehr als 30 globale Attribute. Theoretisch können diese alle jedem HTML-Element hinzugefügt werden. Einige globale Attribute haben jedoch keine Auswirkungen, wenn sie für bestimmte Elemente festgelegt werden. Wenn Sie beispielsweise hidden für ein <meta> als Meta-Inhalt festlegen, wird es nicht angezeigt.

id

Mit dem globalen Attribut id wird eine eindeutige Kennung für ein Element definiert. Es dient vielen Zwecken, darunter:

• Das Ziel der Fragment-ID eines Links.
• Elemente für das Scripting identifizieren
• Ein Formularelement mit seinem Label verknüpfen
• Ein Label oder eine Beschreibung für assistive Technologien angeben.
• Targeting-Stile mit hoher Spezifität oder als Attributselektoren in CSS.

Der Wert id ist ein String ohne Leerzeichen. Wenn es ein Leerzeichen enthält, wird das Dokument nicht unterbrochen, aber Sie müssen in Ihrem HTML-, CSS- und JS-Code Escapezeichen für das id verwenden. Alle anderen Zeichen sind gültig. Ein id-Wert kann 😀 oder .class sein, was jedoch nicht empfehlenswert ist. Um die Programmierung für Sie und andere zu vereinfachen, sollte das erste Zeichen von id ein Buchstabe sein. Verwenden Sie nur ASCII-Buchstaben, Ziffern, _ und -. Es empfiehlt sich, eine id-Namenskonvention zu entwickeln und dann daran festzuhalten, da bei id-Werten die Groß-/Kleinschreibung berücksichtigt wird.

Die id sollte für das Dokument eindeutig sein. Das Layout Ihrer Seite wird wahrscheinlich nicht beschädigt, wenn ein id mehrmals verwendet wird. Ihr JavaScript, Ihre Links und Ihre Elementinteraktionen funktionieren dann aber möglicherweise nicht wie erwartet.

Link-Fragment-ID

Die Navigationsleiste enthält vier Links. Das Link-Element wird später behandelt. Links sind jedoch nicht auf HTTP-basierte URLs beschränkt. Sie können auch Fragment-IDs für Abschnitte der Seite im aktuellen Dokument (oder in anderen Dokumenten) sein.

Auf der Website des Machine-Learning-Workshops enthält die Navigationsleiste in der Seitenkopfzeile vier Links:

Das Attribut „href“ enthält den Hyperlink, zu dem der Nutzer weitergeleitet wird, wenn er den Link aktiviert. Wenn eine URL ein Rautezeichen (#) gefolgt von einer Zeichenfolge enthält, ist diese Zeichenfolge eine Fragmentkennung. Wenn dieser String mit einem id eines Elements auf der Webseite übereinstimmt, ist das Fragment ein Anker oder ein Lesezeichen für dieses Element. Der Browser scrollt dann zu der Stelle, an der der Anker definiert ist.

Diese vier Links verweisen auf vier Abschnitte unserer Seite, die durch ihr id-Attribut identifiziert werden. Wenn der Nutzer auf einen der vier Links in der Navigationsleiste klickt, wird das Element, auf das mit dem Fragmentbezeichner verwiesen wird, also das Element mit der entsprechenden ID ohne #, in den sichtbaren Bereich gescrollt.

Der <main>-Inhalt des Machine-Learning-Workshops besteht aus vier Abschnitten mit IDs. Wenn der Websitebesucher auf einen der Links in <nav> klickt, wird der Abschnitt mit dieser Fragment-ID eingeblendet. Das Markup sieht etwa so aus:

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

Wenn Sie die Fragmentkennzeichnungen in den <nav>-Links vergleichen, werden Sie feststellen, dass jede mit dem id eines <section> in <main> übereinstimmt. Der Browser bietet uns einen kostenlosen Link „Oben auf der Seite“. Wenn Sie href="#top" (nicht zwischen Groß- und Kleinschreibung wird unterschieden) oder href="#" festlegen, wird der Nutzer zum Seitenanfang gescrollt.

Das Rautezeichen als Trennzeichen in href ist nicht Teil des Fragmentbezeichners. Die Fragmentkennung ist immer der letzte Teil der URL und wird nicht an den Server gesendet.

CSS-Selektoren

In CSS können Sie mit einem Selektor wie #feedback auf die einzelnen Abschnitte verweisen. Für weniger Spezifität verwenden Sie eine Attributauswahl, [id="feedback"], bei der die Groß-/Kleinschreibung beachtet wird.

Skripting

Auf MLW.com gibt es ein Easter Egg, das nur mit der Maus aufgerufen werden kann. Durch Klicken auf den Lichtschalter wird die Seite ein- und ausgeschaltet.

Das Markup für das Bild des Lichtschalters lautet:

<img src="svg/switch2.svg" id="switch"
  alt="light switch" class="light" />

Das Attribut id kann als Parameter für die Methode getElementById() und mit dem Präfix # als Teil eines Parameters für die Methoden querySelector() und querySelectorAll() verwendet werden.

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

Unsere JavaScript-Funktion nutzt diese Möglichkeit, um Elemente anhand ihres id-Attributs auszurichten:

<script>
  /* Switch is a reserved word in JavaScript, so instead, we use onoff */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

Das HTML-Element <label> hat ein for-Attribut, dessen Wert die id des zugehörigen Formularsteuerelements ist. Wenn Sie ein explizites Label erstellen, indem Sie in jedes Formularsteuerelement ein id einfügen und jedes mit dem for-Attribut des Labels verknüpfen, hat jedes Formularsteuerelement ein zugehöriges Label.

Jedes Label kann genau einem Formularsteuerelement zugeordnet werden, ein Formularsteuerelement kann jedoch mehrere zugeordnete Labels haben.

Wenn das Formularsteuerelement zwischen dem öffnenden und dem schließenden <label>-Tag verschachtelt ist, sind die Attribute for und id nicht erforderlich. Dies wird als „implizites“ Label bezeichnet. Labels informieren alle Nutzer darüber, wofür die einzelnen Steuerelemente für Formulare gedacht sind.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

Durch die Verknüpfung von for und id werden die Informationen für Nutzer von unterstützenden Technologien verfügbar. Außerdem wird durch Klicken auf ein Label das zugehörige Element in den Fokus gerückt, wodurch der Klickbereich des Steuerelements erweitert wird. Das ist nicht nur für Menschen mit feinmotorischen Störungen hilfreich, die das Klicken mit der Maus erschweren, sondern auch für alle Nutzer von Mobilgeräten, deren Finger breiter als ein Optionsfeld sind.

In diesem Codebeispiel ist die gefälschte fünfte Frage eines gefälschten Quiz eine Single-Select-Multiple-Choice-Frage. Jedes Formularsteuerelement hat ein explizites Label mit einer eindeutigen id für jedes. Damit wir IDs nicht versehentlich duplizieren, besteht der ID-Wert aus der Kombination aus der Fragensummer und dem Wert.

Wenn Sie Optionsfelder einfügen, werden alle gleichnamigen Schaltflächen in einem <fieldset> zusammengefasst, wobei das <legend> das Label oder die Frage für die gesamte Gruppe ist, da die Labels den Wert der Optionsfelder beschreiben.

Andere Verwendungen für Bedienungshilfen

Die Verwendung von id in Bezug auf Barrierefreiheit und Nutzerfreundlichkeit geht über Labels hinaus. In Einführung in Text wurde ein <section> in ein Regions-Landmark umgewandelt, indem der id eines <h2> als Wert des aria-labelledby des <section> referenziert wurde, um den zugänglichen Namen bereitzustellen:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Es gibt über 50 aria-*-Status und -Attribute, die verwendet werden können, um die Barrierefreiheit zu gewährleisten. aria-labelledby, aria-describedby, aria-details und aria-owns verwenden als Wert eine durch Leerzeichen getrennte id-Referenzliste. aria-activedescendant, das das fokussierte untergeordnete Element identifiziert, hat als Wert eine einzelne id-Referenz: die des einzelnen Elements, das den Fokus hat (jeweils nur ein Element kann fokussiert sein).

class

Das Attribut class bietet eine zusätzliche Möglichkeit, Elemente mit CSS (und JavaScript) anzusprechen, hat aber in HTML keinen anderen Zweck (obwohl Frameworks und Komponentenbibliotheken es möglicherweise verwenden). Das Attribut „class“ akzeptiert als Wert eine durch Leerzeichen getrennte Liste der Klassen für das Element, bei denen die Groß- und Kleinschreibung beachtet werden muss.

Durch eine solide semantische Struktur können Elemente basierend auf ihrer Platzierung und Funktion ausgerichtet werden. Die Soundstruktur ermöglicht die Verwendung von Selektoren für untergeordnete Elemente, relationalen Selektoren und Attributselektoren. Wenn Sie mehr über Attribute erfahren, sollten Sie überlegen, wie Elemente mit denselben Attributen oder Attributwerten formatiert werden können. Es geht nicht darum, dass Sie das Klassenattribut nicht verwenden sollten, sondern darum, dass die meisten Entwickler nicht wissen, dass es oft nicht erforderlich ist.

Bisher wurden in MLW keine Klassen verwendet. Kann eine Website ohne einen einzelnen Klassennamen gestartet werden? Wir werden sehen.

style

Mit dem Attribut style können Inline-Stile angewendet werden. Das sind Stile, die auf das einzelne Element angewendet werden, für das das Attribut festgelegt ist. Das Attribut style akzeptiert CSS-Eigenschafts-Wert-Paare als Wert. Die Syntax des Werts entspricht dem Inhalt eines CSS-Stilblocks: Auf Eigenschaften folgt wie in CSS ein Doppelpunkt und jede Deklaration wird nach dem Wert mit einem Semikolon abgeschlossen.

Die Formatierungen werden nur auf das Element angewendet, für das das Attribut festgelegt ist. Untergeordnete Elemente erben die Werte der geerbten Attribute, sofern sie nicht durch andere Stildeklarationen für verschachtelte Elemente oder in <style>-Blöcken oder Stylesheets überschrieben werden. Da der Wert dem Inhalt eines einzelnen Stilblocks entspricht, der nur auf dieses Element angewendet wird, kann er nicht für generierte Inhalte, zum Erstellen von Keyframe-Animationen oder zum Anwenden anderer @-Regeln verwendet werden.

style ist zwar ein globales Attribut, seine Verwendung wird jedoch nicht empfohlen. Definieren Sie Stile stattdessen in einer oder mehreren separaten Dateien. Das Attribut style kann jedoch während der Entwicklung nützlich sein, um schnelles Styling zu ermöglichen, z. B. für Testzwecke. Kopieren Sie dann den Stil „solution“ in Ihre verknüpfte CSS-Datei.

tabindex

Das Attribut tabindex kann jedem Element hinzugefügt werden, damit es fokussierbar ist. Der Wert tabindex definiert, ob das Element in die Tab-Reihenfolge aufgenommen wird und optional in eine nicht standardmäßige Tab-Reihenfolge.

Das Attribut tabindex hat als Wert eine Ganzzahl. Ein negativer Wert (üblicherweise -1) ermöglicht es, dass ein Element den Fokus empfangen kann, z. B. mit JavaScript, fügt das Element aber nicht in die Tab-Reihenfolge ein. Ein tabindex-Wert von 0 macht das Element fokussierbar und über die Tabulatortaste erreichbar. Es wird in der Quellcode-Reihenfolge in die Standard-Tabulatorreihenfolge der Seite aufgenommen. Ein Wert von 1 oder mehr platziert das Element in einer priorisierten Fokusreihenfolge und wird nicht empfohlen.

Auf dieser Seite gibt es eine Freigabefunktion, die ein benutzerdefiniertes <share-action>-Element verwendet, das als <button> fungiert. Die tabindex von „0“ ist enthalten, um das benutzerdefinierte Element in die Standardtabreihenfolge der Tastatur aufzunehmen:

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

Das role von button informiert Screenreader-Nutzer darüber, dass sich dieses Element wie eine Schaltfläche verhalten sollte. JavaScript wird verwendet, um sicherzustellen, dass die Schaltflächenfunktionalität eingehalten wird. Dazu gehört die Verarbeitung von click- und keydown-Ereignissen sowie die Verarbeitung von Tastendrücken der Eingabe- und Leertaste.

Formularsteuerelemente, Links, Schaltflächen und contenteditable-Elemente können den Fokus erhalten. Wenn ein Tastaturnutzer die Tabulatortaste drückt, wird der Fokus auf das nächste fokussierbare Element verschoben, als ob tabindex="0" festgelegt wäre. Andere Elemente sind standardmäßig nicht fokussierbar. Wenn Sie diesen Elementen das Attribut tabindex hinzufügen, können sie den Fokus erhalten, was sonst nicht möglich wäre.

Wenn ein Dokument Elemente mit einem tabindex von 1 oder höher enthält, werden sie in eine separate Tabulatorreihenfolge aufgenommen. Im CodePen beginnt die Tabulatorfolge in einer separaten Sequenz, in der Reihenfolge vom niedrigsten zum höchsten Wert, bevor die Elemente in der regulären Sequenz in der Quellreihenfolge durchlaufen werden.

Wenn Sie die Tab-Reihenfolge ändern, kann dies zu einer sehr schlechten Nutzererfahrung führen. Das macht es schwierig, Hilfstechnologien, Tastaturen und Screenreader zur Navigation in Ihren Inhalten zu verwenden. Außerdem ist es für Entwickler schwierig, sie zu verwalten und zu warten. Der Fokus ist wichtig. Es gibt ein ganzes Modul, in dem es um Fokus und Fokusreihenfolge geht.

role

Das Attribut role ist Teil der ARIA-Spezifikation und nicht der WHATWG-HTML-Spezifikation. Mit dem role-Attribut kann Inhalten eine semantische Bedeutung zugewiesen werden. So können Screenreader Nutzer über die erwartete Nutzerinteraktion mit einem Objekt informieren.

Es gibt einige gängige UI-Widgets, z. B. Kombinationsfelder, Menüleisten, Tablisten und Baumstrukturen, für die es kein natives HTML-Äquivalent gibt. Wenn Sie beispielsweise ein Designmuster mit Tabs erstellen, können Sie die Rollen tab, tablist und tabpanel verwenden. Eine Person, die die Benutzeroberfläche sehen kann, hat gelernt, wie sie im Widget navigiert und verschiedene Bereiche sichtbar macht, indem sie auf die zugehörigen Tabs klickt. Wenn Sie die Rolle tab mit <button role="tab"> verwenden, wenn eine Gruppe von Schaltflächen zum Anzeigen verschiedener Bereiche verwendet wird, kann der Screenreader-Nutzer erkennen, dass mit dem <button>, das gerade den Fokus hat, ein zugehöriger Bereich ein- oder ausgeblendet werden kann, anstatt dass die Schaltfläche wie üblich funktioniert.

Das Attribut role ändert das Browserverhalten nicht und wirkt sich auch nicht auf die Interaktion mit Tastatur oder Zeigegerät aus. Wenn Sie einem <span> das Attribut role="button" hinzufügen, wird es nicht in ein <button> umgewandelt. Deshalb wird empfohlen, semantische HTML-Elemente für den vorgesehenen Zweck zu verwenden. Wenn die Verwendung des richtigen Elements jedoch nicht möglich ist, kann mit dem Attribut role Screenreader-Nutzer darüber informiert werden, dass ein nicht semantisches Element nachträglich in die Rolle eines semantischen Elements versetzt wurde.

contenteditable

Ein Element, bei dem das Attribut contenteditable auf true gesetzt ist, kann bearbeitet werden, ist fokussierbar und wird der Tab-Reihenfolge hinzugefügt, als wäre tabindex="0" festgelegt. Contenteditable ist ein aufgezähltes Attribut, das die Werte true und false unterstützt. Wenn das Attribut nicht vorhanden ist oder einen ungültigen Wert hat, wird der Standardwert inherit verwendet.

Diese drei öffnenden Tags sind gleichwertig:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

Wenn Sie <style contenteditable="false"> einfügen, ist das Element nicht bearbeitbar, es sei denn, es ist standardmäßig bearbeitbar, z. B. ein <textarea>. Wenn der Wert ungültig ist, z. B. <style contenteditable="😀"> oder <style contenteditable="contenteditable">, wird standardmäßig inherit verwendet.

Um zwischen den Status zu wechseln, fragen Sie den Wert der schreibgeschützten Eigenschaft HTMLElement.isContentEditable ab.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

Alternativ kann dieses Attribut angegeben werden, indem editor.contentEditable auf true, false oder inherit festgelegt wird.

Globale Attribute können auf alle Elemente angewendet werden, auch auf <style>-Elemente. Mit Attributen und etwas CSS können Sie einen Live-CSS-Editor erstellen.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

Versuche, das color des style in etwas anderes als inherit zu ändern. Versuchen Sie dann, style in eine p-Auswahl zu ändern. Entfernen Sie die Display-Eigenschaft nicht, da sonst der Style-Block verschwindet.

Benutzerdefinierte Attribute

Wir haben die globalen HTML-Attribute nur oberflächlich behandelt. Es gibt noch mehr Attribute, die nur für ein oder eine begrenzte Anzahl von Elementen gelten. Auch wenn Sie Hunderte von Attributen definiert haben, benötigen Sie möglicherweise ein Attribut, das nicht in der Spezifikation enthalten ist. HTML bietet hierfür die nötigen Funktionen.

Sie können beliebige benutzerdefinierte Attribute erstellen, indem Sie das Präfix data- hinzufügen. Sie können Ihrem Attribut einen beliebigen Namen geben, der mit data- beginnt und dem eine beliebige Reihe von Kleinbuchstaben folgt, die nicht mit xml beginnt und keinen Doppelpunkt (:) enthält.

HTML ist zwar tolerant und funktioniert auch dann, wenn Sie nicht unterstützte Attribute erstellen, die nicht mit data beginnen, oder wenn Sie Ihr benutzerdefiniertes Attribut mit xml beginnen oder ein : einfügen. Es hat jedoch Vorteile, gültige benutzerdefinierte Attribute zu erstellen, die mit data- beginnen. Mit benutzerdefinierten Datenattributen können Sie sicher sein, dass Sie nicht versehentlich einen vorhandenen Attributnamen verwenden. Benutzerdefinierte Datenattribute sind zukunftssicher.

Browser implementieren zwar keine Standardverhalten für Attribute mit dem Präfix data-, es gibt aber eine integrierte Dataset API, mit der Sie Ihre benutzerdefinierten Attribute durchlaufen können. Benutzerdefinierte Eigenschaften sind eine hervorragende Möglichkeit, anwendungsspezifische Informationen in JavaScript zu kommunizieren. Fügen Sie Elementen benutzerdefinierte Attribute in Form von data-name hinzu und greifen Sie über das DOM mit dataset[name] auf das jeweilige Element zu.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

Sie können getAttribute() mit dem vollständigen Attributnamen verwenden oder die einfachere Eigenschaft dataset nutzen.

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

Die dataset-Eigenschaft gibt ein DOMStringMap-Objekt mit den data--Attributen jedes Elements zurück. Es gibt mehrere benutzerdefinierte Attribute für <blockquote>. Dank der Dataset-Property müssen Sie nicht wissen, welche benutzerdefinierten Attribute vorhanden sind, um auf ihre Namen und Werte zuzugreifen:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Die Attribute in diesem Artikel sind global. Das bedeutet, dass sie auf jedes HTML-Element angewendet werden können, auch wenn sie nicht alle Auswirkungen auf diese Elemente haben. Als Nächstes sehen wir uns die beiden Attribute aus dem Einführungsbild an, die wir noch nicht behandelt haben: target und href. Außerdem gehen wir auf einige andere elementspezifische Attribute ein, wenn wir uns Links genauer ansehen.

Wissen testen

Testen Sie Ihr Wissen zu Attributen.