HTML Classes: So funktioniert das class-Attribut

Ein HTML-Element kann mithilfe des class-Attributes zu einer HTML-Klasse hinzugefügt werden. Diese kann in CSS oder JavaScript angesprochen werden, um die zugehörigen Elemente auf identische Art zu manipulieren.

HiDrive Cloud-Speicher
Ihr sicherer Online-Speicher
  • Daten zentral speichern, teilen und bearbeiten
  • Serverstandort Deutschland (ISO 27001-zertifiziert)
  • Höchste Datensicherheit im Einklang mit der DSGVO

Was sind HTML Classes?

HTML-Klassen werden in HTML genutzt, um Elemente in einer Webseite zu identifizieren und zu gruppieren. Es handelt sich bei class um eines der wichtigsten HTML-Attribute, das Sie kennen sollten, wenn Sie HTML lernen. Klassen ermöglichen es Entwicklerinnen und Entwicklern, mehrere Elemente zu stylen oder zu manipulieren, ohne sie einzeln ansprechen zu müssen.

Tipp

Das class-Attribut kann auf jedes HTML-Element angewendet werden.

Wofür benötigt man HTML Classes?

HTML-Klassen gehören zum Standardrepertoire von Webentwickelnden. Sie sind insbesondere für zwei Anwendungsbereiche unerlässlich:

  1. Styling von Elementen mit CSS: Wenn Sie CSS in Ihr HTML einbinden, ermöglichen Klassen es, Stile zu definieren, die auf mehrere Elemente gleichzeitig angewendet werden können. Dadurch kann man das Design einer Website konsistent halten und gleichzeitig den CSS-Code modular gestalten.
  2. Manipulation von Elementen mit JavaScript: Durch die Verwendung von HTML Classes können Programmierende spezifische Gruppen von Elementen leicht auswählen und durch JavaScript-Code manipulieren. Dies ist besonders nützlich für dynamische Interaktionen und Benutzeroberflächen, die auf das Verhalten der User reagieren müssen.

Syntax von HTML-Klassen

Die Syntax zur Definition einer Klasse in HTML ist denkbar einfach: Fügen Sie dem Element, das Sie einer Klasse zuweisen möchten, das class-Attribut hinzu und spezifizieren Sie den zugehörigen Klassennamen. Im Code sieht das wie folgt aus:

<p class="Testklasse">Dieser Text ist gehört der Klasse namens „Testklasse“ an.</p>
html

Im obigen Beispiel wurde der HTML-Paragraph der Klasse „Testklasse“ zugeordnet.

Tipp

Die Klassennamen von HTML-Klassen sind case-sensitiv. Das bedeutet, dass die Groß- und Kleinschreibung eine Rolle spielt. Im Beispiel wären „testklasse“ und „Testklasse“ zwei verschiedene HTML Classes.

Ein ausführlicheres Beispiel zeigt den Nutzen von Klassen exemplarisch:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Beispiel für HTML-Klassen</title>
    <style>
        .highlight {
            background-color: blue;
        }
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="center">Willkommen zum HTML-Klassen-Beispiel</h1>
    <p class="highlight">Dieser Text ist hervorgehoben, denn er gehört der Klasse namens „highlight“ an.</p>
    <p class="highlight center">Dieser Text ist hervorgehoben und zentriert, denn er gehört den Klassen „highlight“ und „center“ an.</p>
</body>
</html>
html

Die Position sowie das Styling der Absätze und Überschriften werden im obigen Codebeispiel mithilfe der verwendeten HTML-Klassen beeinflusst, indem die Klassen im CSS-Code referenziert werden. Beachten Sie, dass Sie auf eine HTML-Klasse in CSS zugreifen, indem sie einen Punkt (.) vor den Klassennamen setzen.

Tipp

Ein einziges HTML-Element kann mehreren Klassen angehören. Diese werden einfach hintereinander, ohne Trennzeichen, aufgelistet.

Was unterscheidet HTML Classes von HTML IDs?

Neben dem class-Attribut kennt HTML noch das HTML-Attribut id. Obwohl beide Attribute ähnliche Zwecke erfüllen, sollte man sie nicht verwechseln, denn es gibt es einige zentrale Unterschiede zwischen ihnen:

  • Einzigartigkeit: Eine ID muss in einem HTML-Dokument eindeutig sein, sodass zwei Elemente niemals dieselbe ID haben können. Klassen hingegen können von mehreren Elementen im selben Dokument geteilt werden.
  • Referenzierung in CSS: Für das Styling von Klassen in CSS nutzt man den voranstehenden Punkt (.), für das Styling von IDs den voranstehenden Hashtag (#).
  • Spezifität: IDs haben eine höhere Spezifität als Klassen. Das bedeutet, dass, wenn sowohl eine ID als auch eine Klasse auf dasselbe HTML-Element angewendet werden und widersprüchliche Stile definieren, die Stile der ID Vorrang haben. Die Klasse kann so gesehen also überschrieben werden.
Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?