Wordpress Nutzer werden oftmals auf den WYSIWYG-Editor “TinyMCE” setzen. Nun hat der manchmal seine Schwächen und wenn man einige Regelmäßigkeiten beachtet, kann man den Quelltext gleich selber schreiben. Wordpress liefert standardmäßig XHTML aus und dies bietet eine Vielzahl logischer Auszeichnugnsmöglichkeiten. Ebenfalls macht der Styleguide Sinn um ein Theme zu testen- schnell sieht man, wo nach Hand ans Theme oder die CSS-Datei zu legen ist.
Überschrift ersten Grades
Immer bedenken, dass nur die Tags verwendet werden, welche der Doctype zulässt. Gebräuchliche Doctypes sind “HTML 4.01″ “XHTML1.0″ und “XHTML1.1″.
“XHTML1.0″ erlaubt die gleichen Tags wie “HTML4.01″ und es gibt die gleichen Ausprägungen “transitional”, “strict” und “frameset”. “XHTML1.1″ ist als Neuanfang zu sehen: es gibt weder die Variante “transitional” noch einen Doctype.
Immer bedenken, dass nur die Tags verwendet werden, welche der Doctype zulässt. Gebräuchliche Doctypes sind “HTML 4.01″ “XHTML1.0″ und “XHTML1.1″.
“XHTML1.0″ erlaubt die gleichen Tags wie “HTML4.01″ und es gibt die gleichen Ausprägungen “transitional”, “strict” und “frameset”. “XHTML1.1″ ist als Neuanfang zu sehen: es gibt weger die Variante transitional noch einen Doctype.
Wordpress nutzt XHTML1.0 transitional, hier sind 89 Tags erlaubt, die Tags in Klammern sind in der XHTML1.0 Variante “strict” verboten, und alle Tags, welchen ein “-” angestellt ist, haben keinen schließenden Tag, wie beispielsweise bei einem Zeilenumbruch <br /> .
Hier nun die Aufzählung der Tags: a, abbr, acronym, address, (applet), area-, b, base-, (basefont-), bdo, big, blockquote, body, br-, button, caption, (center), cite, code, col, colgroup, dd, del, dfn, (dir), div, dl, dt, em, fieldset, (font), form, h1, h2, h3, h4, h5, h6, head, hr-, html, i, (iframe), img-, input-, ins, (isindex-), kbd, label, legend, li, link-, map, (menu), meta-, (noframes), noscript, object, ol, optgroup, option, p, param, pre, q, (s), samp, script, select, small, span, (strike), strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, (u), ul, var.
Größtenteils reichen zum Bloggen ja die Überschriften h1 bis h6, die Absätze und die Inlineelemente, dazu noch ein paar Listen für die Aufzählungen und manchmal eine Tabelle, gerade da nervt es, dass der Wordpresseditor da standardmäßig streikt. Wenn was größeres ansteht, muss dann bei SelfHTML nachgeschlagen.
P steht für einen Absatz und sollte auch nicht anders verwendet werden. Es ist ein Blockelement, diese erzeugen einen Bruch im Textfluss. XHTML bietet eine Reihe von Elementen zur logischen Textauszeichnungen. Bei den logischen Auszeichnungen greift die Standardeinstellung des Browsers, sofern diese nicht via CSS verändert werden.
In diesem Absatz hier sind Elemente untergebracht die das Absatzgefüge nicht durchbrechen, daher werden diese als Inlineelemente bezeichnet. Es gibt logische, physische und rein präsentative Inlineelemente zur Textauszeichnung.
Logische und Elemente sind beispielsweise
das em-tag für emphatisch oder betont,
das strong-Tag als Steigerungsform des em-Tags für stark betont,
das code-Tag für die Angabe von Quellcode ,
das samp-tag für die Ausgabe eines Beispiels,
das kbd-tag für Tastatureingaben ,
das var-Tag für dies ist eine Variable,
das cite-tag für dies ist ein Zitat ,
das dfn-tag für dies ist eine Begriffsdefinition ,
das acronym-tag formatiert eine Abkürzung und
das das q cite=”http://www.xyz.de zeigt ein Zitat an, welches sich auf folgende Quelle bezieht
.
Weitere empfehlenswerte Inlineelemente sind
das span-tag als inhaltsleeres Element, sozusagen als sonstiges Element für alles, was in keine andere logische Kategorie passt,
das a-tag in Verbindung mit href als Anker samt Verknüpfung, weitere Attribute sind accesskey, name, tabindex, target, title. Links können mit einer class versehen werden, somit ist es möglich per CSS, beispielsweise die internen von den externen Links abzuheben oder PDF-Downloads mit einer Grafik als Hintergrund zu versehen.
Soweit möglich sollte logisch ausgezeichnet werden, andernfalls sollten Elemente genutzt werden, welche mit dem Doctype vereinbar sind, Wordpress nutzt hier derzeit “XHTML 1.0 Transitional”.
Einige Beispiele für physische und rein präsentative Tags zum Theme-CSS-Test, wie
das btag um Text fett zu machen,
das i-tag um Text kursiv erscheinen zu lassen,
das tt-tag bewirkt diktengleichen Text ähnlich eines Fernschreibers,
das u-tag erzeugt einen unterstrichenen Text,
das strike-tag bewirkt einen durchgestrichenen Text,
das s-tag bewirkt ebenfalls einen durchgestrichenen Text ,
das big-tag bewirkt größer formatierten Text ,
das small-Tag bewirkt kleiner formatierten Text,
das sup-tag bewirkt hochgestellten ,
das sub-Tag bewirkt tiefgestellten Text,
das .
Überschrift zweiten Grades
Neben den Inline-Elementen gibt es noch die Blockelemente, diese erzeugen einen eigenen Textabsatz im Element und können Inlineelemente enthalten, einige Blockelemente können sogar weitere Blockelemente enthalten, im Bedarfsfall einfach nachlesen. Mit CSS kann man anschließend ggf. noch etwas tricks und Inlineelemente als Block anzeigen lassen oder Blockelemente inline.
Blockelemente sind beispielsweise Absätze, Listen, Tabellen und Formulare.
Überschrift dritten Grades
Hier kommen die Listen, es gibt geordnete, ungeordnete und Definitionslisten. Ungeordnete haben Bullets als Aufzählungszeichen, geordnete Zahlen und Definitionlisten erhalten Einrückungen.
- erstes ungeordnetes Listenelement
- zweites ungeordnetes Listenelement
- drittes Element mit Unterliste
- erstes verschachteltes geordnetes Element
- Achtung bei verschachtelten Listenelementen
- das erste Listenelement bleibt geöffnet, es folgt das ol bzw ul
- und nach dem schließenden ol bzw ul der verschachtelten Liste
- wird erst das li Element der Hauptliste geschlossen
- hier steht das letzte Element der Hauptliste, samt dem Listenschluss
- Das dl kündigt die Definitionsliste an, das dt das erste Element
- das dd ist die Defintion zum ersten Listenelement
- es kann auch mehrere Defintionen zum ersten dt geben
Überschrift vierten Grades
Jetzt geht es um die Tabellen. Wordpress bietet in der Version standardmäßig keine Tabellenunterstützung. Grund also, schnell die nötigen Tags zu erklären.
Pflichtmäßig braucht man nur die Tags “table” für den Tabellencontainer, “tr” für tabelrow als Zeilencontainer und “td” für die Datenzeile. Es gibt dann noch das “td” für eine Kopfzeile und einige weitere Tags und Attribute, falls die Tabelle etwas anspruchsvoller sein soll.
| Dummykopfzeilenelement links |
Dummykopfzeilenelement rechts |
| erster Eintrag links |
zweiter Eintrag rechts |
| zweiter Wert links |
zweiter Wert rechts |
Überschrift fünften Grades
Letzter Punkt sind die Formulare. Hier gibt es für Wordpress-User die Anwendung als Kommentarbox. Und da die Formularelemente recht großen Spielraum bieten, gehe ich auch nur auf diese ein. “form” für den Formularcontainer, dann das input Element, das braucht das Attribut “type”, denn es gibt zehn Möglichkeiten zur Auswahl, beispielsweise eine Textbox (text) oder ein Feld zum Anhaken (checkbox). Für mehrzeilige Eingabefelder steht das Container-Element “textarea” zur Verfügung.
Zusätzlich muss es noch ein “action”-Attribut geben, damit das Formular weiß, wo es die Daten hinschicken soll. Barrierefreier werden die Formulare, wenn die Eingabefelder mit dem Tag “label” logisch verknüpft werden, und das Attribut “acceskey” verwandt wird – so werden die Input-Felder über Tastenkürzel ansprechbar. Bisschen blöd ist, dass die Inputfelder Inline-Elemente sind, somit muss man, um eine Zeilenstruktur sicher zu stellen mit dem “br”-Tag werkeln oder das Formular in eine Tabelle klatschen – oder mit CSS-Tricks die zeilenweise Anzeige sicher stellen, beispielsweise kann man auch Inlineelemente als Block anzeigen lassen. Formular sieht man unten.
Überschrift sechsten Grades
Sodala, dann bin ich fertig, meine Seiten sind noch keinesfalls passend ausgezeichnet, wobei ich da nach und nach schon mal etwas nachlegen werde. Genauso will ich diese Serie aufrecht erhalten, damit Wordpress-Nutzer eine Art Mini-Referenz haben. Ich bin also für Kommentare zur Ergänzung dankbar, wenn ich mal falsch liege, oder es etwas zu ergänzen gibt.
Feed abonnieren, Beitrag emailen oder bookmarken...
Veröffentlicht/gesichtet: 28. January 2008
Tags: styleguide, Wordpress, xhtml
Kategorie: Anleitung, Projekt
0 Kommentare »
