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.
Klassen werden in der Regel für Styling oder als Selektor für Javascript verwendet. Andere Prozesse können solche Elemente ebenfalls anhand der Klasse erkennen.
Vergeben Sie bitte informative Klassennamen. Informative Klassennamen geben Auskunft über den Inhaltstyp oder seine Rolle, nicht aber über irgendwelche Eigenschaften der visuellen Präsentation.
Quelle: https://wiki.selfhtml.org/wiki/HTML/Universalattribute#class
Mit einem class-Attribut kann ich mehrere Elemente, die immer wieder benutzt werden, gleich formatieren. Beispiel:
<p class="klein"> Ein Absatz mit kleinerem Text. </p>
In meiner CSS-Datei formatiere ich Klassen folgendermaßen:
p.klein {
font-size:10px;
}
Das id-Attribut identifiziert ein Element innerhalb eines Dokuments. Es dient vorwiegend als Ziel eines Linkfragments, als Identifikator innerhalb des CSS-Selektors oder als Identifikator für Javascript-DOM-Methoden. Beliebige andere Prozesse können solche Elemente ebenfalls identifizieren.
Der Inhalt des id-Attributes muss innerhalb des Dokuments einzig sein.
Quelle: https://wiki.selfhtml.org/wiki/HTML/Universalattribute#id
Mit einem id kann ich Elemente innerhalb meiner HTML-Seite einzeln identifizieren. Eine id muss einzig sein. Beispiel:
<div id="footer"> </div>
In meiner CSS-Datei formatiere ich id's folgendermaßen:
div#footer {
width: 800px;
background-color: maroon;
}