Damit ich es nicht beim nächsten Redesign vergesse habe ich mir kurzerhand aufgeschrieben, welche Elemente es in einem Blog gibt, die irgendwie gestyled werden müssen. Und damit auch ihr was davon habt, teile ich das mit euch :)

Aufgeteilt ist die Liste in die Beitrags-Elemente, Kommentar-Ansicht, Kommentarformular, Footer, Navigation, verschiedene Inhaltstypen und -seiten und sonstige Sachen, die meistens gut in die Sidebar passen.

Artikel-Elemente

Artikeltitel
Datum
Kommentaranzahl mit Link zu den Kommentaren
Text
Zwischenüberschriften
fett, kursiv
Blockquote
Code
Links
Bilder
Listen
– unsortiert
– sortiert
– Definitionslisten
Tabellen
Tags
Kategorien
Edit-Link

Optional:
Facebook-Sharing
Retweet
flattr
sonstiger Socialkram

Kommentare
Gravatar
Text
Autor
Datum
Reply-Button
Edit Link

Kommentare und Trackbacks trennen

Kommentarformular
Name
Website
E-Mail
Labels, input, textarea
Checkboxen
Submit-Buttons
Kommentar-Feed

Navigation
Hauptnavigation (Seiten)
Pagination
Suchformular
Archivseiten
Tags
Kategorien

Footer
Copyright
Wordpress-Satz
cooler Abschlusssatz

anderes
Adsense
andere Werbung (Linklift)
Facebook-Like-Box
letzte Tweeds
Blogroll

Inhalte
Über mich-Seiten
Kategorie-Archiv
Tag-Archiv
zeitliches Archiv
Suchergebnisse
Kontaktseite
Impressum
Feed-Links

Wie verlinke ich auf andere Webseiten? Am besten mit dem a-Element. Es ist zwar auch mit JavaScript möglich, aber da lassen wir lieber mal die Finger davon, weil nicht jeder JavaScript aktiviert hat und Google da auch nichts von hat.

Die Zieladresse geben wir mit dem href-Attribut an, das sieht dann so aus: <a href="http://pixelscheucher.de"></a>.

Link-Beschreibung

Mit dem title-Attribut können wir eine kurze Beschreibung hinzufügen, die wird meistens angezeigt, wenn man den Mauszeiger ein wenig über dem Link stehen lässt. Beispiel: <a href="http://pixelscheucher.de" title="Michels Weblog"></a>.

Linktext

Zwischen <a> und </a> schreiben wir den Text der als Link zu sehen sein soll. Bitte dabei drauf achten, dass der Linktext auch soweit wie möglich selbsterklärend bleibt, wenn man sich nur die Links anzeigen/vorlesen lässt. Man kann auch Bilder statt Text einfügen, dabei aber auch auf verständliche alt– und title-Attribute im <img>-Element nicht verzichten. Der Vollständigkeit halber sollte ich noch erwähnen, dass man früher den störenden Linkrahmen um das Bild mit border="0" los wurde. Bitte macht sowas mit CSS, lasst aber trotzdem deutlich werden, dass es sich um einen Link handelt.

Sprachen

Wenn man möchte kann man mittels @hreflang@ auch noch angeben, in welcher Sprache die verlinkte Seite geschrieben ist. Viele Browser senden beim Aufruf einer Webseite eine Zeile Code mit, die dem Webserver sagt, welche Sprache bevorzugt wird. Ist der Webserver entsprechend eingestellt, liefert er an ›deutsche‹ Browser deutschen Text, an ›englische‹ Browser englischen Text. Darum sollte man das hreflang-Attribut öfter mal überprüfen. Auch eine spezielle Stylezuweisung, beispielsweise ein kleines Fähnchen für englischsprachige Links kann sehr nützlich sein und wird mittels a[hreflang='Sprachkürzel'] { Style-Anweisung } eingebunden. Nachtrag vom 28.06.2006: Keine Flaggen benutzen, siehe Sprachwechsel und Flaggen.

Auch der Link selber kann natürlich in einer anderen Sprache geschrieben sein, als die ganze Website (<html lang=“de”>). Deshalb kann das a-Element auch ein lang-Attribut mit entsprechendem Sprachkürzel besitzen.

Neues Fenster? Nein, danke!

Noch eine Bitte: lasst die Finger vom target-Attribut. Lasst den Besucher selber entscheiden ob er die Webseite in einem neuen Fenster öffnen will oder nicht. Gerade bei alten PCs dauert es gerne länger, bis das neue Fenster geöffnet ist, hab’ da Erfahrungen im Praktikum gesammelt.