HTML Attribute - id, class, data-* und mehr

Attribute geben HTML-Elementen zusätzliche Informationen und Eigenschaften. Sie sind essentiell für CSS-Styling, JavaScript-Interaktionen und Accessibility.

Was sind HTML-Attribute?

Attribute stehen im Opening-Tag eines Elements und bestehen aus einem Namen und einem Wert:

<tagname attribut="wert">Inhalt</tagname>
           ↑          ↑
        Name       Wert

Syntax-Regeln:

• Attribut-Name in Kleinbuchstaben
• Wert in Anführungszeichen (doppelt oder einfach)
• Mehrere Attribute mit Leerzeichen trennen
• Reihenfolge ist egal

Die wichtigsten globalen Attribute

id - Eindeutige Identifikation

Das id-Attribut gibt einem Element einen einzigartigen Bezeichner. Eine ID darf auf einer Seite nur einmal vorkommen!

<div id="header">Kopfbereich</div>
<p id="intro">Einleitungstext</p>

<!-- FALSCH: ID doppelt verwenden! -->
<div id="box">Box 1</div>
<div id="box">Box 2</div> ❌

<!-- RICHTIG: Verschiedene IDs -->
<div id="box1">Box 1</div>
<div id="box2">Box 2</div> ✅

Verwendung:

• CSS: #header { ... }
• JavaScript: document.getElementById('header')
• Anker-Links: <a href="#intro">Zum Intro</a>

Naming-Konventionen:

• Nur Buchstaben, Zahlen, Unterstriche, Bindestriche
• Muss mit Buchstaben beginnen
• Keine Leerzeichen!
• Sprechende Namen: main-navigation statt nav1

class - Wiederverwendbare Klassifizierung

Classes können mehrfach verwendet werden und ein Element kann mehrere Classes haben.

<!-- Ein Element, eine Class -->
<p class="highlight">Wichtiger Text</p>

<!-- Ein Element, mehrere Classes -->
<button class="btn btn-primary btn-large">
  Klick mich
</button>

<!-- Mehrere Elemente, gleiche Class -->
<div class="card">Karte 1</div>
<div class="card">Karte 2</div>
<div class="card">Karte 3</div>

Verwendung:

• CSS: .highlight { ... }
• JavaScript: document.querySelectorAll('.card')
• Mehrere Classes mit Leerzeichen trennen

Best Practices:

• Beschreibende Namen: error-message statt red-text
• BEM-Notation: card__title, button--primary
• Wiederverwendbare Classes für häufige Styles

style - Inline-Styles (mit Vorsicht!)

Mit style kannst du CSS direkt im HTML schreiben:

<p style="color: red; font-size: 20px;">
  Roter großer Text
</p>

<div style="background-color: #f0f0f0; padding: 20px;">
  Box mit Hintergrund und Abstand
</div>

⚠️ Vorsicht:

• Nur für schnelle Tests verwenden
• Trennt nicht Struktur und Design
• Schwer zu warten
• Überschreibt externe CSS-Regeln
• Besser: Separate CSS-Dateien nutzen

title - Tooltip beim Hover

Das title-Attribut zeigt einen Tooltip, wenn man mit der Maus über das Element fährt:

<abbr title="HyperText Markup Language">HTML</abbr>

<button title="Speichert deine Änderungen">💾</button>

<a href="#" title="Mehr Informationen über HTML">
  Lies mehr
</a>

Verwendung:

• Erklärung von Abkürzungen
• Zusätzliche Infos für Links
• Icon-Buttons beschreiben

Data-Attribute - Eigene Daten speichern

Mit data-* Attributen kannst du eigene Daten im HTML speichern:

<article
  data-id="123"
  data-author="Max Mustermann"
  data-category="html"
  data-published="2025-01-15"
>
  Artikel-Inhalt...
</article>

<button
  data-action="delete"
  data-confirm="true"
>
  Löschen
</button>

Zugriff mit JavaScript:

const article = document.querySelector('article');

// Daten auslesen
console.log(article.dataset.id);        // "123"
console.log(article.dataset.author);    // "Max Mustermann"
console.log(article.dataset.category);  // "html"

// Daten ändern
article.dataset.views = "1000";

// Daten löschen
delete article.dataset.published;

Best Practices:

• Nutze für JavaScript-spezifische Daten
• Vermeide es für CSS-Styling (nutze classes)
• Sprechende Namen: data-user-id statt data-uid

ARIA-Attribute - Accessibility

ARIA (Accessible Rich Internet Applications) Attribute machen deine Website für Screenreader und Menschen mit Behinderungen besser zugänglich:

<!-- Rolle des Elements definieren -->
<nav aria-label="Hauptnavigation">
  <ul role="menu">
    <li role="menuitem"><a href="/">Home</a></li>
    <li role="menuitem"><a href="/about">Über uns</a></li>
  </ul>
</nav>

<!-- Beschreibung für Screenreader -->
<button aria-label="Menü öffnen">
  ☰
</button>

<!-- Zustand kommunizieren -->
<button
  aria-expanded="false"
  aria-controls="dropdown"
>
  Dropdown
</button>

<!-- Versteckter Text für Screenreader -->
<span aria-hidden="true">🔍</span>
<span class="sr-only">Suchen</span>

Wichtige ARIA-Attribute:

• aria-label: Beschreibung für Screenreader
• aria-labelledby: Verweist auf beschreibendes Element
• aria-describedby: Zusätzliche Beschreibung
• aria-hidden: Element vor Screenreader verstecken
• aria-expanded: Ausgeklappt/Eingeklappt Status
• aria-live: Änderungen werden vorgelesen

Weitere wichtige Attribute

lang - Sprache definieren

<html lang="de">...</html>

<p>Das ist Deutsch</p>
<p lang="en">This is English</p>
<p lang="fr">C'est français</p>

hidden - Element verstecken

<div hidden>
  Dieser Inhalt ist versteckt
</div>

<!-- Mit JavaScript toggle -->
<button onclick="document.getElementById('box').hidden = !document.getElementById('box').hidden">
  Toggle
</button>

<div id="box" hidden>
  Jetzt siehst du mich!
</div>

contenteditable - Bearbeitbar machen

<p contenteditable="true">
  Klick mich an und bearbeite diesen Text!
</p>

<div contenteditable="true" style="border: 1px solid #ccc; padding: 10px;">
  Dies ist ein bearbeitbarer Bereich, wie ein Texteditor!
</div>

tabindex - Keyboard-Navigation

<!-- Normale Tab-Reihenfolge -->
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">

<!-- Fokussierbar mit Tab -->
<div tabindex="0">Ich kann fokussiert werden</div>

<!-- Nicht fokussierbar -->
<div tabindex="-1">Kein Tab-Fokus</div>

/* Element mit bestimmter ID */
#header { ... }

/* Element mit bestimmter Class */
.card { ... }

/* Element mit bestimmtem data-Attribut */
[data-theme="dark"] { ... }

/* Input mit type="email" */
input[type="email"] { ... }

/* Links die mit https beginnen */
a[href^="https"] { ... }

<div id="box">Box 1</div>
<div id="box">Box 2</div>

<div id="box1">Box 1</div>
<div id="box2">Box 2</div>

<!-- Oder mit class -->
<div class="box">Box 1</div>
<div class="box">Box 2</div>

<div id="main header">...</div>
<p class="error message">...</p>

<div id="main-header">...</div>
<p class="error-message">...</p>

<!-- Oder mehrere Classes -->
<p class="error message">...</p>

<p style="color: red; font-size: 18px; margin: 20px; padding: 10px;">Text</p>
<p style="color: red; font-size: 18px; margin: 20px; padding: 10px;">Text</p>
<p style="color: red; font-size: 18px; margin: 20px; padding: 10px;">Text</p>

<!-- CSS-Datei oder <style>-Block -->
<style>
  .highlight-text {
    color: red;
    font-size: 18px;
    margin: 20px;
    padding: 10px;
  }
</style>

<p class="highlight-text">Text</p>
<p class="highlight-text">Text</p>
<p class="highlight-text">Text</p>

<img src="logo.png">

<img src="logo.png" alt="Firmenlogo">
<img src="deko.png" alt="">  <!-- Leerer alt für dekorative Bilder -->

const element = document.getElementById('myElement');

// Alle Attribute ausgeben
console.log(element.attributes);

// Bestimmtes Attribut prüfen
console.log(element.getAttribute('data-id'));

// Hat Element bestimmtes Attribut?
console.log(element.hasAttribute('hidden'));

// Attribut setzen
element.setAttribute('data-status', 'active');

// Attribut entfernen
element.removeAttribute('hidden');

// Alle Elemente mit class="card"
document.querySelectorAll('.card');

// Element mit id="header"
document.getElementById('header');

// Alle Elemente mit data-category="html"
document.querySelectorAll('[data-category="html"]');

Praktische Übungen

Übung 1: ID vs Class

Erstelle eine HTML-Seite mit:

• Einem Header mit eindeutiger ID
• Drei Karten mit derselben Class
• Einem Button mit mehreren Classes

Übung 2: Data-Attribute

Erstelle eine Produkt-Liste mit data-Attributen:

• data-id für Produkt-ID
• data-price für Preis
• data-category für Kategorie

Übung 3: ARIA für Accessibility

Erstelle eine Navigation mit:

• aria-label für Screenreader
• role="navigation"
• Button mit aria-expanded

Übung 4: Custom Tooltips

Erstelle mehrere Elemente mit title-Attribut:

• Links mit Beschreibung
• Abkürzungen mit Bedeutung
• Icons mit Erklärung