HTML-Class: So setzen Sie HTML-Klassen richtig ein und optimieren Ihr Webdesign

Veröffentlicht am 03.10.2025

Was ist eine HTML-Class?

HTML-Class ist ein HTML-Attribut, das jedem HTML-Element zugewiesen werden kann, um dieses zu gruppieren. Das Element setzt sich aus der Bezeichnung "class" und dem Klassennamen zusammen. 

Beispiele für HTML-Klassen mit CSS- und JavaScript-Formatierung

CodePen zeigt Auswirkungen von HTML, CSS und JavaScript direkt im Browser.

Der Beispielcode zeigt die Zuweisung von HTML-Klassen zu Überschriften 1. und 2. Ordnung sowie Abschnitten und die Veränderung des Aussehens in CSS und JavaScript. In CSS werden Textgrößen für die Klassen "ueberschrift1", "ueberschrift2" und "abschnitt" definiert und von den HTML-Elementen genutzt, die diese Klassen verwenden. Das JavaScript-Beispiel zeigt, wie sich Text alternativ mit JavaScript zentrieren und in blauer Farbe darstellen lässt.

HTML:
<h1 class="ueberschrift1">Überschrift1</h1>
<p class="abschnitt">Lorem ipsum…</p>
<h2 class="ueberschrift2">Überschrift 2</h2>
<p class="abschnitt">Lorem ipsum…</p>
<h2 class="ueberschrift2">Weitere Überschrift</h2>
<p class="abschnitt">Lorem ipsum…</p>

CSS:
.ueberschrift1{
  font-size: 20px;
}
.ueberschrift2{
  font-size:16px;
}

.abschnitt{
  font-size: 12px;
}

.centerBlue{
  text-align: center;
  color: blue;
}

Die Klasse "ueberschrift1" könnte dabei für beliebige HTML-Elemente verwendet werden, beispielsweise für div- oder span-Elemente. Die Verwendung einer Klasse für verschiedene Zwecke sollte jedoch vermieden werden, damit der Code leicht lesbar und wartbar bleibt.

Ein HTML-Element und mehrere HTML-Klassen

Zudem kann ein HTML-Element mehreren HTML-Klassen zugewiesen sein:

HTML:
<h1 class="ueberschrift1 centerBlue">Zentrierte blaue Überschrift</h1>

Mit einem Leerzeichen zwischen den Klassennamen lassen sich Elemente mehreren Klassen zuweisen. Im Beispiel hat die H1-Überschrift eine Größe von 20 px, ist zentriert und hat eine blaue Textfarbe.

Zugriff in JavaScript

In JavaScript erhält man mit "document.getElementsByClassName" eine Referenz auf alle HTML-Elemente, die den Klassennamen enthalten:

JavaScript:

var meineAbschnitte = document.getElementsByClassName("abschnitt");
for(var i = 0; i < meineAbschnitte.length; i++) {
  meineAbschnitte[i].style.color = "blue";
}
Dieser Weg ist offensichtlich etwas umständlich. Im modernen Webdesign kommen zunehmend native JavaScript-Funktionen wie querySelectorAll zum Einsatz:

JavaScript:
var meineAbschnitte = document.querySelectorAll(".abschnitt");
meineAbschnitte.forEach(function(element) {
  element.style.color = "red";
});

Eine Alternative ist die Verwendung einer externen JavaScript-Bibliothek wie jQuery, um Elemente über ihre HTML-Class auszuwählen und zu manipulieren.

JavaScript mit JQuery:
$(".abschnitt").css("color","blue");

Gründe für die Verwendung nativer JavaScript-Funktionen sind eine schnellere Leistung, der Verzicht auf das Herunterladen großer Dateien wie der jQuery-Bibliothek und die sehr gute native JavaScript-Unterstützung moderner Browser.

Unterschied zwischen ID und Class in HTML

Eine HTML-ID identifiziert ein HTML-Element eindeutig. Es muss einzigartig sein und darf nur für ein HTML-Element verwendet werden. Eine HTML-Class kann hingegen mehreren HTML-Elementen zugewiesen werden, zum Beispiel, um deren Aussehen zu vereinheitlichen. In CSS erfolgt die Ansprache einer HTML-Class mit einem Punkt wie in ".ueberschrift1", bei einer ID ist eine Raute nötig wie zum Beispiel "#eindeutigesElement".

Best Practices zur Verwendung von HTML-Klassen

Gutes Webdesign ist übersichtlich, sauber strukturiert und folgt dem DRY-Prinzip (Don’t repeat yourself). Nutzen Sie die folgenden Tipps.

HTML-Klassen sparsam einsetzen

Webdesigner sollten HTML-Klassen sparsam nutzen, da zu viele Klassen den Code unübersichtlich und schlecht wartbar machen. 

Logische Klassennamen verwenden

Wichtig ist die Verwendung aussagekräftiger und logischer Klassennamen, damit der Code leicht lesbar ist. Wenn div-Elemente einen Link enthalten und als klickbare Buttons agieren, sollte dies auch durch die Klassenbeschreibung klar werden:
HTML:

<div class="primaryButton">
  <a href="https://meine-seite.de/kontakt">Kontakt</a>
</div>

Die Klassennamen können für verschiedene Bereiche im Layout stehen, zum Beispiel ".nav-bar" für den Navigationsbereich und ".footer" für den Footer-Bereich.

Namenskonventionen verwenden

Für bessere Lesbarkeit und Codestruktur bietet sich die Verwendung von Namenskonventionen wie BEM (Block, Element, Modifier): block__element--modifier. Jedes Website-Element wird als „Block“ betrachtet, in dem „Elemente“ definiert sein können und optionale „Modifier“ für verschiedene Versionen des Blocks stehen, zum Beispiel für einen aktivierten oder inaktiven Zustand. So strukturieren Sie Styles nachvollziehbar und modular.

Beispiel für eine aktive und inaktive Schaltfläche in einer Navigationsleiste:
HTML:
<div class="nav">
<button class="nav__button--active">Home</button>
<button class="nav__button--inactive">Über uns</button>
</div>

HTML-Klassen mit Media Queries kombinieren

Für responsive Layouts eignet sich die Verwendung von HTML-Klassen zusammen mit Media Queries. Im folgenden Beispiel wird die Größe von Elementen mit der HTML-Klasse "container" bei einer Bildschirmbreite von maximal 600px auf eine maximale Breite von 590px begrenzt:
@media (max-width: 600px) {
  .container {
    width: 590px;
  }
}

Häufige Fehler mit HTML-Klassen vermeiden

Achten Sie darauf, Klassennamen nicht doppelt zu vergeben und nicht für verschiedene Zwecke zu nutzen. Ein Klassenname sollte nicht für unterschiedliche Stile oder Funktionen verwendet werden. Denken Sie zudem an den Unterschied zwischen HTML-Class und HTML-ID und setzen Sie beides korrekt ein. IDs sind für eindeutige Elemente, Klassen für mehrere Elemente.

HTML-Class - Fazit

HTML-Klassen sind ein wichtiges Werkzeug für übersichtliches Webdesign. Sie ermöglichen den Zugriff auf HTML-Elemente per CSS und JavaScript für die Steuerung des Designs und der Funktionalität. Probieren Sie die Verwendung jetzt selbst aus, auf der Website CodePen können Sie Code eingeben und die Auswirkungen sofort testen. Für Ihre modernen Webprojekte ist DomainFactory Ihr zuverlässiger Partner mit sicherem und rasend schnellem Webhosting!

Titelmotiv: Bild von Gerd Altmann auf Pixabay