# HTML Classes: So funktioniert das class-Attribut
Ein [HTML-Element](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-element/) kann mithilfe des `class`-Attributes zu einer HTML-Klasse hinzugefügt werden. Diese kann in [CSS](https://www.ionos.at/digitalguide/websites/webdesign/was-ist-css/) oder JavaScript angesprochen werden, um die zugehörigen Elemente auf identische Art zu manipulieren.
## Was sind HTML Classes?
HTML-Klassen werden in [HTML](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-html/) genutzt, um **Elemente in einer Webseite zu identifizieren und zu gruppieren**. Es handelt sich bei `class` um eines der wichtigsten [HTML-Attribute](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-attribute/), das Sie kennen sollten, wenn Sie [HTML lernen](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-lernen-das-grosse-einsteiger-tutorial/). 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](https://www.ionos.at/digitalguide/websites/webdesign/css-in-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:
```html
Dieser Text ist gehört der Klasse namens „Testklasse“ an.
```
Im obigen Beispiel wurde der [HTML-Paragraph](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-absatz/) 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:
```html
Beispiel für HTML-Klassen
Willkommen zum HTML-Klassen-Beispiel
Dieser Text ist hervorgehoben, denn er gehört der Klasse namens „highlight“ an.
Dieser Text ist hervorgehoben und zentriert, denn er gehört den Klassen „highlight“ und „center“ an.
hash_0e5ece38686513d80ae1a7c47c9ef615669a839a
```
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](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-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.
This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/html-classes/](https://www.ionos.at/digitalguide/websites/web-entwicklung/html-classes/) for AI/LLM consumption.