Technik und Wissenschaft

6 grundlegende HTML-Konzepte, die jeder Webentwickler beherrschen sollte. | von Mostafa Ibrahim | Januar 2024

Mir ist aufgefallen, dass die meisten Webentwickler gerade so viel HTML lernen, dass sie zurechtkommen, bevor sie sich JavaScript und Frameworks zuwenden. Aber HTML hat noch viel mehr zu bieten! Wenn Sie es besser verstehen, können Sie viel mehr in Ihren Projekten tun und sie für Benutzer noch besser machen.

Deshalb werde ich in diesem Artikel versuchen, über einige Konzepte zu sprechen, die meiner Meinung nach in HTML unterschätzt werden.

Benutzerdefinierte Datenattribute sind Attribute, die mit „data-“ beginnen und zu HTML-Elementen hinzugefügt werden können, um benutzerdefinierte Daten zu speichern. Sie eignen sich zum Speichern von Informationen, die für die Seite oder Anwendung privat sind und auf die mithilfe von JavaScript zugegriffen und diese bearbeitet werden können.

Nehmen wir zum Beispiel an, wir haben eine

Element, das ein Produkt auf einer E-Commerce-Website darstellt. Wir können ein benutzerdefiniertes Datenattribut hinzufügen, z data-product-id um die eindeutige Kennung dieses Produkts zu speichern:

Mit benutzerdefinierten Datenattributen können wir problemlos auf diese Informationen zugreifen und sie in Ihrem JavaScript-Code verwenden. Wir können den Wert des benutzerdefinierten Datenattributs mithilfe von abrufen dataset Eigenschaft des Elements:

const productElement = document.querySelector('.product');
const productId = productElement.dataset.productId;
console.log(productId); // Output: 12345

Benutzerdefinierte Datenattribute können zum Speichern verschiedener Datentypen verwendet werden, z. B. IDs, Konfigurationseinstellungen oder andere benutzerdefinierte Informationen, die für Ihre Anwendung spezifisch sind. Sie bieten eine Möglichkeit, die Funktionalität von HTML-Elementen zu erweitern und die Arbeit mit dynamischen Daten in Ihrer Webanwendung zu erleichtern.

Hinweis: Wenn im Zusammenhang mit benutzerdefinierten Datenattributen „privat für die Seite“ erwähnt wird, bedeutet dies, dass die im Attribut gespeicherten Daten spezifisch und nur für diese bestimmte Webseite relevant sind. Andere Webseiten oder Anwendungen können nicht auf diese Daten zugreifen oder diese ändern. Es soll intern innerhalb der Seite oder Anwendung verwendet werden, um die Funktionalität zu verbessern oder Informationen zu speichern, die nicht für die Weitergabe oder den Zugriff durch externe Quellen bestimmt sind.