HTML Academy · Lektion

id, class, style und title

Wenden Sie zentrale globale Attribute auf beliebige HTML-Elemente an.

Lektion 1 von 413 Schritte

id, class, style und title ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Globale Attribute

Globale Attribute können auf jedes HTML-Element angewendet werden:

id – eindeutiger Bezeichner
class – eine oder mehrere CSS-Klassen
style – Inline-CSS
title – Tooltip-Text
Und viele weitere: lang, hidden, tabindex, data-* …

Das id-Attribut

Das Attribut id weist einem Element einen eindeutigen Bezeichner zu:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

Verwendungszwecke von id

Das Attribut id dient mehreren Zwecken:

CSS-Auswahl: #hero-banner { ... }
JavaScript-Auswahl: document.getElementById('signup-form')
Fragmentnavigation: <a href="#installation">
ARIA-Beschriftung: aria-labelledby="modal-title"

Das class-Attribut

Das Attribut class weist einem Element eine oder mehrere CSS-Klassen zu:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id vs. class

Wann Sie welches Attribut verwenden:

id – ein bestimmtes Element auf der Seite
class – ein auf mehrere Elemente angewendetes Formatierungsmuster

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

Das style-Attribut

Das Attribut style fügt Inline-CSS hinzu:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

Wann Sie Inline-style verwenden sollten

Inline-style ist in diesen Fällen vertretbar:

Von JavaScript gesetzte dynamische Werte
Werte, die beim Schreiben des CSS noch nicht bekannt sein können (vom Benutzer festgelegte Farben, Breiten)
HTML für E-Mails (E-Mail-Clients entfernen externes CSS)

Verwenden Sie style nicht für statische Darstellungsentscheidungen – diese gehören in CSS.

Das title-Attribut

Das Attribut title stellt beim Überfahren mit dem Mauszeiger einen Tooltip-Text bereit:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

Einschränkungen von title bei der Barrierefreiheit

Das Attribut title weist erhebliche Probleme bei der Barrierefreiheit auf:

Über die Tastaturnavigation nicht zugänglich
Auf Touchscreens nicht sichtbar
Verhalten bei Screenreadern uneinheitlich
Wichtige Informationen niemals ausschließlich in title hinterlegen

Verwenden Sie aria-label oder sichtbaren Text für wichtige Informationen.

Spezifität: id vs. class vs. Inline-CSS

CSS-Spezifität von niedrig nach hoch:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

Namenskonventionen für class

Beliebte Namenskonventionen für class:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

Kurztest

Was ist die wichtigste Regel für das id-Attribut?

Beantworte es in der interaktiven Lektion

Zusammenfassung: id class style title

Die wichtigsten globalen Attribute:

id – pro Seite eindeutig; für CSS, JavaScript, Fragmente und ARIA verwendet
class – wiederverwendbar; mehrere Klassen werden durch Leerzeichen getrennt
style – Inline-CSS (sparsam verwenden; externes CSS bevorzugen)
title – Tooltip; für Tastatur- und Touchbenutzer nicht barrierefrei
id-Spezifität > class-Spezifität in CSS

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 40
Lektionen: 159

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „id, class, style und title“ kostenlos?

Ja — der vollständige Text von „id, class, style und title“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „id, class, style und title“?

Wenden Sie zentrale globale Attribute auf beliebige HTML-Elemente an. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „id, class, style und title“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

id, class, style und title
Das hidden-Attribut
tabindex und accesskey
Benutzerdefinierte Datenattribute: data-*

← Zurück zu HTML Academy