HTML Id
Nach class kommt id als einzigartiges Türschild.
Warum einzigartige Namen zählen
Fragment-Links erwarten genau einen Treffer.
Direkte Antwort
id="faq" einmal. href="#faq". CSS #faq. Kein id="#faq". Für geteilte Styles class nutzen.
📊 id versus class
| Feature | id | class |
|---|---|---|
| Uniqueness | One per page (ideally) | Many elements may share |
| HTML attribute | id="faq" (no #) | class="tip" (no .) |
| CSS selector | #faq | .tip |
| Common uses | Bookmarks, unique hooks, script targets | Reusable styles and groups |
Fragment-Link zu einer Überschrift
Sprunglink oben, id unten.
Unique id and fragment link
html<p><a href="#faq">Jump to FAQ</a></p>
<h2 id="faq">FAQ</h2>
<p>Answers go here.</p>
Fragmentbeispiel lesen
-
nur im Link
- nackter Name im Attribut
Einzigartiger CSS-Hook mit #id
Ein Panel — sparsam einsetzen.
Unique id with CSS
html<div id="promo">
<h2>Limited offer</h2>
<p>One panel, one unique hook.</p>
</div>
<style>
#promo { border: 2px solid #0a7; padding: 12px; }
</style>
Unique-Style lesen
-
promo in CSS
- kein # im Attribut
id oder class wählen
Mehrere Elemente? class. Ein Ziel? id.
Übung
- Überschrift mit id
- Link # und springen
- Duplikate entfernen
- class für Tipps
Typische Fehler
- doppelte id
-
im Attribut
- id für jeden Shared-Style
Kurzfassung
- id einzigartig
-
in href/CSS
- class zum Teilen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt