Im Nachhinein und Live-Betrieb meines neuen Layouts ist mir aufgefallen, dass ich für ein paar Elemente das Styling völlig vergessen habe. Dadurch kam ich auf die Idee, eine Liste zu mit den wohl meist gebrauchten Elementen zu schreiben.
- Elemente zur Dokumentstrukturierung:
div
im Zusammenspiel mit aussagekräftigen IDs wie zum Beispiel<div id="#content">
- Überschriften zur Dokumentgliederung
h1
,h2
,h3
,h4
,h5
,h6
- Absätze
p
- Links und verschiede Link-Zustände
a(:link)
,a:visited
,a:focus
,a:hover
,a:active
.
Diese Reihenfolge sollte man sich einprägen, beispielsweise durch den Satz Lord Vaders former handle, Anakin. Siehe auch Website in an hour von Andrew Krespanis.- hervorgehobene Textstellen
em
,strong
- Abkürzungen
abbr
,acronym
- ungeordnete Listen (Ulli)
ul
,li
- geordnete Listen (Olli)
ol
,li
- Definitionslisten
dl
,dt
,dd
- Zitate
q
,blockquote
,cite
- gelöschten und nachträglich eingefügten Text
del
,ins
- Tabellen
table
,caption
,thead
,tfoot
,tbody
,tr
,th
,td
- diverse Elemente zum Anzeigen von Code
code
,pre
*,var
,kbd
.
==* = mehr oder weniger =- weitere logische Textauszeichnungen
samp
,dfn
Ich habe selber noch nicht alle Bestandteile in mein Stylesheet eingebaut, das wird sich aber sicherlich noch ändern, ein entsprechender Aufruf zur Cache-Aktualisierung wird dann auch folgen ;)
Nur, wenn sich kein passendes Element finden lässt, kann man außerdem auf das span
-Element zurückgreifen, bei der Wahl eines Klassennamens ist es wichtig, die Funktion des Elements und nicht das Aussehen zu benutzen. Es kann ja immer mal passieren, dass .greenText
plötzlich rot sein soll.
Im Hinblick auf XHTML 2 sei drauf hingewiesen, dass dort viele neue Elemente hinzukommen und Links nicht mehr zwingend mit dem <a>
-Element ausgezeichnet werden müssen. Da XHTML 2 bisher nur als Entwurf fungiert, können sich selbst hier noch Änderungen ergeben.