HTML/Attribute/class

Der Begriff class ist mehrdeutig.
Für das gleichnamige Schlüsselwort siehe JavaScript/class.

Das class-Attribut ordnet ein Element einer oder mehreren Klassen zu. Klassen sind ein HTML-Konzept, um gleichartige Elemente im Markup zu kennzeichnen mit dem (nicht alleinigen!) Ziel, diese mit einem Klassenselektor ansprechen zu können. Dabei müssen es nicht unbedingt gleichartige Elemente sein. Mehrere Klassennamen werden durch Leerzeichen getrennt.

erlaubte Werte	eine Zeichenkette
default-Wert
erlaubt in	allen Elementen

Beispiel

<p class="warnung">

legt für den Absatz die Klasse warnung fest

Beachten Sie: In älteren HTML-Versionen war die Wahl der Zeichen eingeschränkt: ein Zeichen aus [A-Za-z], gefolgt von beliebig vielen Zeichen aus [A-Za-z0-9_:.-]

Empfehlung: Vergeben Sie informative Klassennamen, die Auskunft über den Inhaltstyp oder seine Rolle, nicht aber über irgendwelche Eigenschaften der visuellen Präsentation geben. Der Klassenname bleibt daher sinnvoll, wenn sich die visuelle Präsentation ändert oder er innerhalb eines JavaScripts verwendet wird.

Siehe auch

• CSS/Selektoren/Klassenselektor
• CSS/Tutorials/Selektoren
• JavaScript/DOM/Element/className (ermittelt oder ändert Klassennamen)

Weblinks

W3C: the id and class attributes

Liste der HTML-Attribute

• Universalattribute
  • accesskey
  • contenteditable
  • class
  • data-*
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inputmode
  • itemprop
  • lang
  • nonce
  • on*
  • part
  • popover
  • popovertarget
  • popovertargetaction
  • role
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
• Aria-Attribute
• Formular-Attribute
• Listen-Attribute
• Medien-Attribute
• Meta-Attribute
• Tabellen-Attribute
• Verweis-Attribute
• obsolet oder gelöscht

Exkurs: Klassen in Frameworks

Empfehlung: Auch wenn dieser im Internet verbreitete Screenshot einer angeblich mit Bootstrap geschriebenen Seite wahrscheinlich nicht echt ist, sollten Sie die Verwendung einer Vielzahl präsentationsbezogener Klassen vermeiden!
Weniger ist mehr!