Grafika ilustrująca błąd "duplicate ID" w HTML.
Obraz podzielony jest na dwie części. Po lewej stronie znajduje się ilustracja problemu: fragment kodu HTML z wyraźnie zaznaczonymi zduplikowanymi atrybutami ID w różnych elementach. Kod jest zaprezentowany w edytorze z kolorowaniem składni, a zduplikowane ID są podświetlone czerwonymi okręgami i symbolami ostrzeżenia.
Po prawej stronie grafiki przedstawione są konsekwencje błędu duplicate ID:
1. Okno DevTools przeglądarki pokazujące błąd w konsoli
2. Wizualizacja konfliktu selektorów JavaScript (getElementById zwracający tylko pierwszy element)
3. Problem z dostępnością (ikona czytnika ekranu z symbolem błędu)
Na dole grafiki umieszczona jest ilustracja poprawnego rozwiązania:
- Ten sam fragment kodu z unikalnymi identyfikatorami
- Alternatywne podejście z użyciem klas CSS zamiast ID
- Symbol "✓" oznaczający poprawne implementacje
Grafika wykorzystuje profesjonalną kolorystykę, z czerwonym oznaczeniem błędów i zielonym oznaczeniem poprawnych rozwiązań. Całość utrzymana jest w stylistyce związanej z programowaniem i tworzeniem stron internetowych, z elementami interfejsu edytora kodu i narzędzi deweloperskich.