Bezeichnung von IDs und Klassen

Bezeichnung von IDs und Klassen

Markus Schneider, 01.11.2006

HTML sollte insbesondere zwecks Abstraktion des Designs von Struktur und Inhalt so genannte Klassen enthalten. Die Klassen, für Websitebesucher unsichtbar, dienen der Klassierung von Elementen, Abschnitten, Bereichen etc.

Der Designer einer Website kann anschliessend mittels Stylesheets die Klassen selektieren und anderes formatieren. Klassen sind nur notwendig, wenn es sich auch um eine Klassierung zur Unterscheidung von Elementen, Abschnitten, Bereichen etc. handelt. Ein häufiger Fehler ist die Klassierung von allen Elementen eines Typs, was nichts bringt und dabei den HTML- und CSS-Code unnötig länger, komplizierter und schwerer verständlich macht. Man spricht dabei z.T. auch von "Classitis", vergleiche hierzu z.B.
http://www.bs-markup.de/blog/archiv/2005/06/30/dr-css/ .


Ein weiterer typischer Fehler ist die falsche Benennung der Klassen.
Beispiele von fehlerhaften Benennungen:
  • "FooterBlue": Hier sind gleich zwei Fehler enthalten: Erstens sollte ein HTML-Dokument nur einen Footer enthalten (der verschiedene Unterbereiche enthalten kann). Der Footer sollte in diesem Fall eine ID zur Identifikation und keine Klasse enthalten. Die ID sollte in diesem Fall aber "Footer" oder ähnlich lauten. Für eine Klasse ist dies jedoch keine sinnvolle Bezeichnung.
    Zweitens und noch wichtiger als der erste Fehler ist die Verwendung der Bezeichnung "Blue". Hier wird statt abstrahiert, ganz konkret bereits festgelegt, welche Farbe ein Objekt haben soll. Bei einem Redesign oder auch nur einer kleinen Anpassung der Farben muss nun statt lediglich der CSS-Dateien auch die HTML-Ausgabe angepasst werden. Dies ist sehr viel aufwändiger und auch mühsam. Zudem verfügt unter Umständen der Designer gar nicht über die erforderlichen Berechtigungen oder Kenntnisse. Derartige Bezeichnungen gilt es in jedem Fall zu vermeiden.
  • "Head": Head steht in diesem Beispiel für Überschrift. Überschriften haben in HTML jedoch bereits zugeordnete Tags, nämlich: h1-h6. Diese sollten in jedem Fall zwecks Zugänglichkeit, Suchmaschinenoptimierung, Übersichtlichkeit, Unabhängigkeit von Stylesheets etc. verwendet werden. Bei der Verwendung von h1-h6 ist eine zusätzliche Klassierung absolut unnötig und verwirrend. Gleichzeitig bläst sie den HTML-Code der Website unnötig auf.
  • "XYClass": Es wird empfohlen die Bezeichnung "Class" nicht zu verwenden, da es sich durch die Position offensichtlich um eine Klasse handelt und nun der Name definiert werden soll.

Nachfolgend einige gute Beispiele für Klassennamen.
Weitere lassen sich beim Einhalten der erwähnten Regeln einfach ableiten.

  • "StartPage": Ermöglicht eine andere Formatierung auf der Startseite als auf Folgeseiten. Achtung: diese Klasse nicht auf allen Elementen definieren, sondern gleich am Anfang eines Dokuments und nur ein Mal.
  • "Button": Knöpfe lassen sich insbesondere für Internet Explorer nicht separat von den meisten anderen Formularelementen selektieren. So lange dies so ist, schafft dieser "Trick" Abhilfe.
  • "parent": Bei Listen für die Bezeichnung von Elternelementen.
  • "selected": Bei Listen für die Bezeichnung von ausgewählten Elementen.

Die erwähnten Regeln die für Klassen gelten, gelten weitgehend auch für IDs.

Insbesondere wird empfohlen keine Farben in den ID-Namen zu verwenden!

Kommentare von Benutzern

2/6/2017 10:36:36 PM Administrator
Kommentare erwünscht
Wir freuen uns über alle Arten von Fragen, Kommentaren und Kritik wie beispielsweise:
  • Lob & Tadel
  • Ergänzungen
  • Meldung von (Schreib-)Fehlern
  • Meldung von toten Links
Wenn Sie nicht möchten, dass Ihr Kommentar unter Umständen publiziert wird, senden Sie uns doch eine E-Mail-Nachricht.

Kommentar schreiben/Frage stellen

CAPTCHA Code Image Speak the code

News und Tipps

PDF Funktion für Ihre Website
html2pdf generiert schnell und zuverlässig ein PDF aus der URL oder dem HTML, welche Sie diesem Dienst übermitteln. CSS wird optimal berücksichtigt - mit oder ohne Print Styles. http://www.html2pdf.solutions

Verbessern Sie die Verfügbarkeit Ihrer Website

  • Erhalten Sie Ausfallwarnungen per E-Mail, SMS und Push-Benachrichtigung.
  • Verfolgen Sie die Verfügbarkeit und Performance Ihrer Website.
  • Publlizieren Sie optional die Verfügbarkeits-Reports um die Verkaufszahlen zu steigern.

 

Wir überwachen Ihre Websites und Server rund um die Uhr über ein Netzwerk, welches aus über  Überwachungsstationen besteht. Mehr Infos/kostenlos testen unter http://monitoring.seven49.net/de/

Der Qualidator SiteAnalyzer hat die "Windows 8 App Certification" bestanden (Feb 2014)
Qualidator SiteAnalyzer auf Heft-DVD von Unternehmer WISSEN
In der aktuellen Ausgabe von "Unternehmer Wissen" finden Sie auf der beiliegenden DVD die aktuelle Version des Qualidator SiteAnalyzer. Das Magazin erscheint deutschlandweit im Bahnhofs- und Flughafenbuchhandel seit dem 18.02.2014. Mehr Informationen zum Magazin finden Sie unter: magazin.unternehmer.de
HTML5 Validator für SiteAnalyzer
Tipp: Beim Umstieg auf HTML 5 hilft Ihnen der SiteAnalyzer gerne weiter. Laden Sie dazu die aktuelle Version herunter um die ganze Website auf Fehler und Probleme zu prüfen.
Mehr Infos und Download
Brandneues SiteAnalyzer Video online
Lernen Sie den SiteAnalyzer (noch) besser kennen:
zum neuen Qualidator® SiteAnalyzer Video
Neues Forum auf XING
Neu gibt es zusätzlich zur Facebook Page auch ein Qualidator Forum auf XING. Wir freuen uns auf Ihr Feedback und spannende Kontakte.
https://www.xing.com/net/qualidator-projekt-forum
Entwickler gesucht
seven49.net/ Qualidator sucht laufend Software Engineer ASP.NET / Sharepoint wie auch Partnerfirmen, die solche Dienste anbieten.
Zum Stelleninserat
Facebook Page
Bist Du bereits ein Qualidator® -Fan?
Besuch uns auf Facebook!
HTTP Komprimierung testen
Die HTTP Komprimierung kann neu direkt im SiteAnalyzer getestet werden. Dies auch mit verschiedenen Browsern resp. User Agents. Mehr Infos und einen Screenshot finden Sie unter Know-how - HTTP Komprimierung Gzip/Deflate testen
Kantonsranking
Schweizer-Kantonsranking der Fachzeitschrift "Computerworld" mit Hilfe von Qualidator.
Zum Artikel
Zum Kantonsranking
Qualidator für SmartPhones
Die Website wurde in den letzten Monaten stetig weiter fürs iPhone und andere SmartPhones optimiert. Probieren Sie es aus. Feedback willkommen.
Generators
Weltweite Qualidator® Generator-Studie: Welche Generators (Content Management Systeme, Editoren und Wikis) führen zu erfolgreichen Webauftritten?
Zur Studie
Websites der öffentlichen Hand
2. Qualidator-Studie: Websites der öffentlichen Hand überzeugen mit Top-Qualität
Graubünden sticht im DACH-Vergleich Wien und Nordrhein-Westfalen aus
Zur Pressemeldung
Zweite Qualidator®-Studie: Die Webauftritte der eidgenössischen Departemente, der Kantone und der grössten Schweizerstädte im Vergleich zum deutschsprachigen Ausland
Download der Studie

Follow us on Twitter
Qualidator-Ranking der Firmenwebsites der registrierten "Swiss Made Software"- Mitglieder. Swiss Made Software ist ein Label für schweizerische Software-Unternehmen, initiiert von Luc Haldimann.
Exklusiv und kostenlos - Kennen Sie den neuen Qualidator HTML Optimizer bereits?
Ein weiteres hilfreiches Tool für Sie!
Schon gesehen? Neu gibt es auf Qualidator.com Branchen- und Gruppenratings. Diese werden nun laufend ausgebaut.

Empfehlung: Vertiefte Website-Qualitätsanalyse

Empfehlung: Uptime Monitoring

Partner

  • SwissMadeSoftware
  • ZTPrentner IT
Copyright © seven49.net GmbH
Quelle: http://www.qualidator.com/de/Know-how/Bezeichnung_von_IDs_und_Klassen.htm
CMS Login schliessen

CMS Login

Melden Sie sich an, um die Inhalte der Website zu bearbeiten.
loading and processing data Verarbeite Anforderung ...