Attribute

Attribute wurden bereits kurz im Abschnitt HTML-Übersicht behandelt. Jetzt ist es an der Zeit, sich genauer damit zu befassen.

Attribute machen HTML so leistungsstark. Attribute sind durch Leerzeichen getrennte Namen und Name/Wert-Paare, die im Starttag enthalten sind und Informationen über das Element und seine Funktionen liefern.

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 empfehlen wir immer, Zitate zu verwenden.

Bei HTML wird nicht zwischen Groß- und Kleinschreibung unterschieden, bei einigen Attributwerten jedoch schon. Bei Werten, die Teil der HTML-Spezifikation sind, wird die Groß-/Kleinschreibung nicht beachtet. Für definierte String-Werte 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 Teil eines Attributselektors in CSS und in JavaScript verwendet wird. Andernfalls nicht.

<!-- 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");

In XML-Sprachen wie SVG muss für alle Attribute ein Wert angegeben werden, auch für boolesche Attribute.

Aufgezählte Attribute

Aufgezählte Attribute werden manchmal mit booleschen Attributen verwechselt. Dabei handelt es sich um HTML-Attribute mit einer begrenzten Anzahl vordefinierter gültiger Werte. Wie boolesche Attribute 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.

Anders als bei booleschen Attributen bedeutet das Weglassen des Attributs jedoch nicht, dass es „false“ ist. Ein vorhandenes Attribut mit einem fehlenden Wert ist nicht unbedingt „true“. Der Standardwert für ungültige Werte ist nicht unbedingt derselbe wie ein Nullstring. Im Beispiel wird contenteditable standardmäßig auf inherit gesetzt, wenn es fehlt oder ungültig ist. Es kann aber auch explizit auf false gesetzt werden.

Der Standardwert hängt vom Attribut ab. Im Gegensatz zu booleschen Werten sind Attribute nicht automatisch „true“, 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 wird standardmäßig auf inherit festgelegt.

Bei Attributen mit Aufzählungstypen sind fehlende und ungültige Werte in den meisten Fällen identisch. Wenn beispielsweise 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 nicht die 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. Sie 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 aber 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, sondern können auch Fragmentkennungen für Abschnitte der Seite im aktuellen Dokument (oder in anderen Dokumenten) sein.

Auf der Website des Workshops zum maschinellen Lernen 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" (Groß-/Kleinschreibung wird nicht beachtet) oder einfach href="#" festlegen, wird der Nutzer zum Seitenanfang gescrollt.

Das Hash-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 ID-Selektor wie #feedback auf die einzelnen Abschnitte verweisen. Wenn Sie weniger Spezifität benötigen, können Sie auch einen Attributselektor wie [id="feedback"] verwenden, bei dem die Groß- und Kleinschreibung beachtet wird.

Skripting

Auf MLW.com gibt es nur für Mausnutzer ein Easter Egg. Durch Klicken auf den Lichtschalter wird die Seite ein- und ausgeschaltet.

Das Markup für das Bild des Lichtschalters lautet: html <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 js, so we us onoff instead */
  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 zugewiesen 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 für Barrierefreiheit und Nutzerfreundlichkeit ist nicht auf Labels beschränkt. In der Einleitung zum Text wurde ein <section> in ein Regions-Landmark umgewandelt, indem auf das id eines <h2> als Wert des aria-labelledby des <section> verwiesen 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, mit denen die Barrierefreiheit gewährleistet werden kann. aria-labelledby, aria-describedby, aria-details und aria-owns verwenden als Wert eine durch Leerzeichen getrennte id-Referenzliste. aria-activedescendant, das das derzeit 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 werden).

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ß-/Kleinschreibung beachtet wird.

Wenn Sie eine solide semantische Struktur erstellen, können Sie Elemente basierend auf ihrer Platzierung und Funktion ausrichten. Die Soundstruktur ermöglicht die Verwendung von Selektoren für untergeordnete Elemente, relationalen Selektoren und Attributselektoren. In diesem Abschnitt erfahren Sie mehr über Attribute und 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 Formatierungsdeklarationen 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 separaten Datei oder in 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“ und fügen Sie ihn in die verknüpfte CSS-Datei ein.

tabindex

Das Attribut tabindex kann jedem Element hinzugefügt werden, damit es den Fokus erhalten kann. 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 erhalten kann, z. B. über 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 Reihenfolge des Quellcodes 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 mehr enthält, werden sie in eine separate Tab-Reihenfolge aufgenommen. Wie Sie im Codepen sehen, beginnt die Tab-Reihenfolge 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 das zu einer sehr schlechten Nutzererfahrung führen. Es ist dann schwierig, sich mit Hilfstechnologien wie Tastaturen und Screenreadern in Ihren Inhalten zu bewegen. Auch für Entwickler ist es schwierig, sie zu verwalten und zu warten. Der Fokus ist wichtig. Es gibt ein ganzes Modul, in dem es um den Fokus und die 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 informiert werden.

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 Tabbed-Designmuster erstellen, können Sie die Rollen tab, tablist und tabpanel verwenden. Nutzer, die die Benutzeroberfläche sehen können, wissen aus Erfahrung, wie sie das Widget bedienen und verschiedene Bereiche sichtbar machen, indem sie auf die zugehörigen Tabs klicken. 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. Es wird also keine typische Schaltflächenfunktion implementiert.

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 eingefügt 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. Der Standardwert ist inherit, wenn das Attribut nicht vorhanden ist oder einen ungültigen Wert hat.

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 der Wert 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. Ändern Sie dann den style-Selektor in einen p-Selektor. Entfernen Sie die Display-Eigenschaft nicht, da sonst der Stilblock verschwindet.

Benutzerdefinierte Attribute

Wir haben globale 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 Ihr Attribut beliebig benennen, solange der Name mit data- beginnt, gefolgt von einer beliebigen Reihe von Kleinbuchstaben, die nicht mit xml beginnen und keinen Doppelpunkt (:) enthalten.

HTML ist zwar fehlertolerant 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 gibt jedoch Vorteile, wenn Sie gültige benutzerdefinierte Attribute 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 kein 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 über 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 entsprechende 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

Wissen zu Attributen testen