Ein HTML-Element kann mithilfe des class-At­tri­bu­tes zu einer HTML-Klasse hin­zu­ge­fügt werden. Diese kann in CSS oder Ja­va­Script an­ge­spro­chen werden, um die zu­ge­hö­ri­gen Elemente auf iden­ti­sche Art zu ma­ni­pu­lie­ren.

HiDrive Cloud-Speicher
Ihr sicherer Online-Speicher
  • Daten zentral speichern, teilen und be­ar­bei­ten
  • Ser­ver­stand­ort Deutsch­land (ISO 27001-zer­ti­fi­ziert)
  • Höchste Da­ten­si­cher­heit im Einklang mit der DSGVO

Was sind HTML Classes?

HTML-Klassen werden in HTML genutzt, um Elemente in einer Webseite zu iden­ti­fi­zie­ren und zu grup­pie­ren. Es handelt sich bei class um eines der wich­tigs­ten HTML-Attribute, das Sie kennen sollten, wenn Sie HTML lernen. Klassen er­mög­li­chen es Ent­wick­le­rin­nen und Ent­wick­lern, mehrere Elemente zu stylen oder zu ma­ni­pu­lie­ren, ohne sie einzeln an­spre­chen zu müssen.

Tipp

Das class-Attribut kann auf jedes HTML-Element an­ge­wen­det werden.

Wofür benötigt man HTML Classes?

HTML-Klassen gehören zum Stan­dard­re­per­toire von Web­ent­wi­ckeln­den. Sie sind ins­be­son­de­re für zwei An­wen­dungs­be­rei­che un­er­läss­lich:

  1. Styling von Elementen mit CSS: Wenn Sie CSS in Ihr HTML einbinden, er­mög­li­chen Klassen es, Stile zu de­fi­nie­ren, die auf mehrere Elemente gleich­zei­tig an­ge­wen­det werden können. Dadurch kann man das Design einer Website kon­sis­tent halten und gleich­zei­tig den CSS-Code modular gestalten.
  2. Ma­ni­pu­la­ti­on von Elementen mit Ja­va­Script: Durch die Ver­wen­dung von HTML Classes können Pro­gram­mie­ren­de spe­zi­fi­sche Gruppen von Elementen leicht auswählen und durch Ja­va­Script-Code ma­ni­pu­lie­ren. Dies ist besonders nützlich für dy­na­mi­sche In­ter­ak­tio­nen und Be­nut­zer­ober­flä­chen, die auf das Verhalten der User reagieren müssen.

Syntax von HTML-Klassen

Die Syntax zur De­fi­ni­ti­on einer Klasse in HTML ist denkbar einfach: Fügen Sie dem Element, das Sie einer Klasse zuweisen möchten, das class-Attribut hinzu und spe­zi­fi­zie­ren Sie den zu­ge­hö­ri­gen Klas­sen­na­men. 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 „Test­klas­se“ zu­ge­ord­net.

Tipp

Die Klas­sen­na­men von HTML-Klassen sind case-sensitiv. Das bedeutet, dass die Groß- und Klein­schrei­bung eine Rolle spielt. Im Beispiel wären „test­klas­se“ und „Test­klas­se“ zwei ver­schie­de­ne HTML Classes.

Ein aus­führ­li­che­res Beispiel zeigt den Nutzen von Klassen ex­em­pla­risch:

<!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 Über­schrif­ten werden im obigen Code­bei­spiel mithilfe der ver­wen­de­ten HTML-Klassen be­ein­flusst, indem die Klassen im CSS-Code re­fe­ren­ziert werden. Beachten Sie, dass Sie auf eine HTML-Klasse in CSS zugreifen, indem sie einen Punkt (.) vor den Klas­sen­na­men setzen.

Tipp

Ein einziges HTML-Element kann mehreren Klassen angehören. Diese werden einfach hin­ter­ein­an­der, ohne Trenn­zei­chen, auf­ge­lis­tet.

Was un­ter­schei­det 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 ver­wech­seln, denn es gibt es einige zentrale Un­ter­schie­de zwischen ihnen:

  • Ein­zig­ar­tig­keit: 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.
  • Re­fe­ren­zie­rung in CSS: Für das Styling von Klassen in CSS nutzt man den vor­an­ste­hen­den Punkt (.), für das Styling von IDs den vor­an­ste­hen­den Hashtag (#).
  • Spe­zi­fi­tät: IDs haben eine höhere Spe­zi­fi­tät als Klassen. Das bedeutet, dass, wenn sowohl eine ID als auch eine Klasse auf dasselbe HTML-Element an­ge­wen­det werden und wi­der­sprüch­li­che Stile de­fi­nie­ren, die Stile der ID Vorrang haben. Die Klasse kann so gesehen also über­schrie­ben werden.
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü