Keine doppelten IDs
Eindeutige IDs sorgen für sauberes DOM-Verhalten.
Das Thema dieser Seite: Doppelte IDs führen zu Konflikten bei Ankern, JS und CSS.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check sucht doppelte IDs im DOM und bewertet deren Häufigkeit.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| Keine Duplikate | DOM sauber | OK |
| Einzelne Duplikate | Konflikte möglich | Warnung |
| Viele Duplikate | Strukturproblem | Kritisch |
Kontext & Problemraum
Duplikate entstehen oft durch wiederholte Komponenten oder dynamisch generierte IDs.
| Situation | Symptom | Risiko |
|---|---|---|
| Komponenten-Listen | IDs wiederholt | Anker springen falsch |
| Formulare | Labels verlinken falsch | Accessibility leidet |
| CMS-Module | Gleiche IDs | JS-Fehler |
Entscheidungslogik
| Wenn | Dann | Empfehlung |
|---|---|---|
| Duplikate vorhanden | DOM konfliktbehaftet | IDs eindeutig machen |
| Nur einzelne Duplikate | Fehlerquellen isolieren | Komponenten prüfen |
| Keine Duplikate | Signal ok | Beibehalten |
Erklärende Details
IDs müssen im gesamten Dokument eindeutig sein. Doppelte IDs führen zu falschen DOM-Referenzen.
<div id="product">...</div>| Detail | Warum relevant | Hinweis |
|---|---|---|
| IDs in Listen | Duplikate möglich | Index anhängen |
| Labels | Form-Usability | for/id matchen |
| JS Hooks | Selektoren brechen | Data-Attribute nutzen |
Risiken, Grenzen & Einschränkungen
| Grenze | Woran erkennbar | Was tun |
|---|---|---|
| JS-generierte IDs | Duplikate nur im DOM | After-render prüfen |
| Legacy-Code | Feste IDs | Refactor planen |
| Testabdeckung | Fehler unentdeckt | Automatische Checks |
Gültiges HTML
Strukturfehler vermeiden.
UTF-8 gesetzt
Kodierung sauber halten.
Lang-Attribut gesetzt
Sprache korrekt markieren.