Die Tabelle, ein Kind der zweiten Stunde

Nachdem sich 1994 das „World Wide Web Consortium“ (kurz: W3C) gründete, wurde HTML mit der Version 3.2 deutlich erweitert und standardisiert. Mit HTML 3.2 wurde auch das HTML-Element Tabelle aus der Taufe gehoben. In der Empfehlung des W3C vom Januar 1997 steht zu der Tabelle unter anderem:

„[…] can be used to markup tabular material or for layout purposes.“

Diese Definition konnte schon fast als Aufforderung verstanden werden, Tabellen zur grafischen Gestaltung von Webseiten einzusetzen. Das wurde dann auch ausgiebig praktiziert, zumal das Interesse am Internet rasant zunahm und damit auch der Wunsch nach einem professionellen Erscheinungsbild der Webseiten. Daraus ergaben sich aber auch Probleme:

• Das Laden der Tabellen dauert sehr lang. Der Browser stellt erst dann eine Tabelle dar, wenn die letzte Tabellenzelle berechnet ist. Bei mehrfach verschachtelten Tabellen kann das durchaus einige Zeit in Anspruch nehmen.
• Das Layout ist unflexibel und Änderungen benötigen durch die Komplexität einen immensen Aufwand.
• Sie sind nicht übertragbar auf internetfähige Endgeräte, wie Palm, Handy und Tablet.
• Und, schlussendlich, ist die Zugänglichkeit für Menschen, die auf Sprach- oder Brailleausgabegeräte angewiesen sind, selten gewährleistet. Sie sind von einem solchen Internetangebot überwiegend ausgeschlossen.

In der Spezifikation des darauf folgenden HTML 4 ist das W3C auf die entstandene Problematik eingegangen, indem es empfiehlt Tabellen nicht ausschließlich als Mittel zum Strukturieren von (HTML-) Dokumenten zu nutzen.

Inzwischen ist mit CSS dem Anliegen nach grafisch gestalteten und strukturierten Webseiten Rechnung getragen worden. Die Trennung von Inhalt und Aussehen, allgemeine Zugänglichkeit, benutzerorientierte Navigation – vieles ist hinzu gekommen und hat sich weiterentwickelt. Das ist richtig und gut so. Das Tabellenlayout hinter sich zu lassen ist auch gut. Und die Tabelle sollte wieder zu dem Einsatz kommen, in dem sie am besten ist: der strukturierten Darstellung von Daten.

Tabelle reloaded: Der semantisch richtige Aufbau

Der semantisch richtige Aufbau eines HTML-Dokuments hat zwei Vorteile: die Suchmaschinen können den Inhalt besser durchsuchen und bewerten und zum zweiten ist der Inhalt für sehbehinderte Menschen zugänglicher. Für viele ist das zweite Argument nicht so stichhaltig, als dass sie sich mit semantisch korrektem Aufbau eines HTML-Dokuments beschäftigen möchten – es gibt ja schließlich nicht so viel Blinde. Allerdings möchten ganz viele Seitenbetreiber, dass ihre Seite bei Google gut gefunden wird. Beides hängt aber eng miteinander zusammen. Je strukturierter die Seite aufgebaut ist und HTML-Elemente korrekt ausgezeichnet sind, umso besser kann sowohl eine Suchmaschine den Inhalt durchsuchen als auch ein Screenreader für den blinden Nutzer Verständliches ausgeben. Man könnte es als eine Win-Win-Situation für alle beschreiben.

Beginnen wir einfach mal mit der Grundform der Tabelle, die allgemein aus den HTML-Tags <table><tr><td>Inhalt</td></tr></table> besteht. Die einzelnen Zellen können Datenzellen (td) oder, in der ersten Tabellenreihe, auch Zellenköpfe (th) sein.

Der Tabelle ist aber auch ein Element zugeordnet worden, das keinen besonders hohen Bekanntheitsgrad genießt: das Element caption, die Tabellenüberschrift. Diese wird direkt nach dem Eröffnungstag notiert, so dass die Grundtabelle nun so aussieht:

Der HTML-Code:
<table>
<caption>Tabellenüberschrift</caption>
<tr>
<th>erste Kopfzelle</th>
<th>zweite Kopfzelle</th>
</tr>
<tr>
<td>erste Datenzelle</td>
<td>zweite Datenzelle</td>
</tr>
<tr>...</tr>
</table>

Die Tabellenüberschrift ist mit der Tabelle verbunden und bekommt dadurch auch eine inhaltliche Zuordnung. Die Tabellenüberschrift sollte demnach auch eine Übereinstimmung mit den Inhalten haben. Wie im obigen Code bereits zu sehen, können in einer Tabellenreihe die Zellen auch als Kopfzellen (th) ausgezeichnet werden. Ohne weitere Formatierungen werden sie in der Regel fett dargestellt, es kommt ihnen also eine besondere Bedeutung zu. Sie stellen Kategorien zu den Informationen in den unter ihnen folgenden Datenzellen dar. Damit wäre der erste Schritt zu einer logischen Auszeichnung getan.

Ein weiterer Schritt zur Strukturierung einer Tabelle ist die Unterteilung in Kopf (thead), Körper (tbody) und Fuß (tfoot). Gerade bei längeren Tabellen ist diese Aufteilung zu empfehlen, da es dem Browser dann möglich ist, den Tabellenkörper unabhängig von Tabellenkopf und –Fuß zu scrollen. Der Tabellenfuß wird, entgegen der anatomischen Logik, vor dem Tabellenkörper notiert. Der Browser berechnet den Kopf und Fuß bereits bevor die restlichen Daten der Tabelle übermittelt sind. Jeder Tabellenabschnitt (thead, tfoot, tbody) muss mindestens eine Reihe (tr) enthalten und die Anzahl der Zellen sollte gleich sein.

Der HTML-Code:
<table>
<caption>Tabellenüberschrift</caption>
<thead>
<tr>
<th>erste Kopfzelle</th>
<th>zweite Kopfzelle</th>
</tr>
</thead>
<tfoot>
<tr>
<td>erste Fußzelle</td>
<td>zweite Fußzelle</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>erste Datenzelle</td>
<td>zweite Datenzelle</td>
</tr>
<tr>...</tr>
</tbody>
</table>

Dürfen thead und tfoot nur einmal in einer Tabelle definiert werden, so kann tbody mehrmals vorkommen. Je nach Umfang der dargestellten Daten ist der Einsatz mehrerer tbody sogar sinnvoll. Die einzelnen tbody können mit CSS nach Bedarf unterschiedlich formatiert werden.

Feinschliff für die Sprachausgabe

Der Browser interpretiert ein HTML-Dokument von oben nach unten, zeilenweise von links nach rechts. Die Sprachausgabegeräte haben eine eigene Interpretation des HTML-Quelltextes. Probleme mit der Wiedergabe gibt es, wenn HTML-Elemente zweckentfremdet eingesetzt und/oder semantische Konventionen nicht eingehalten werden. Zusätzlich zu dem oben beschriebenen semantischen Aufbau einer Tabelle hält HTML einige Attribute bereit, die für die Sprach- oder Brailleausgabe zugeschnitten sind. Einige dieser Auszeichnungen möchte ich hier kurz vorstellen:

Zum Einen kann eine Zusammenfassung der Tabelle mit dem Attribut summary ausgegeben werden. Dies ist nicht zwingend notwendig, wenn sich der Inhalt der Tabelle aus der Überschrift und den Datenzellen ergibt. Bei komplexeren Tabellen kann eine Zusammenfassung durchaus sinnvoll sein.

Der HTML-Code:
<table summary="Diese Tabelle gibt einen Überblick über das Bevölkerungswachstum deutscher Großstädte von 1990 bis 2010 wieder, mit einer prozentualen Wachstumsrate von 2000 bis 2010.">
<caption>Bevölkerungswachstum deutscher Großstädte</caption>
<tr>
<th>Stadt</th>
<th>Einw. 1990</th>
<th>Einw. 2000</th>
<th>Einw. 2010</th>
<th>Veränderung in % (2000-2010)</th>
</tr>
<tr>...</tr>

Eine einfache Zuordnung von Kopfzelle zu Datenzellen bietet das Attribut scope. Der Wert dieses Attributs ist entweder eine Reihe (row) oder eine Spalte (col). Die Angabe scope=”col” in der Kopfzelle besagt, dass sich die darunter liegenden Datenzellen spaltenweise auf sie beziehen.

Der HTML-Code:
<table>
<caption>Bevölkerungswachstum deutscher Großstädte</caption>
<tr>
<th scope="col">Stadt</th>
<th scope="col">Einw. 1990</th>
<th scope="col">Einw. 2000</th>
<th scope="col">Einw. 2010</th>
<th scope="col">Veränderung in % (2000-2010)</th>
</tr>
<tr>
<td>Berlin</th>
<td>3.433.695</th>
<td>3.382.169</th>
<td>3.460.725</th>
<td>2,32</th>
</tr>

Einen variableren Bezug zwischen Kopfzelle zu Datenzellen stellt man mit eindeutigen ids her, die mittels headers den Datenzellen zugeordnet werden können. Diese Attribute können auch Datenzellen, die nicht in der gleichen Spalte oder Reihe liegen, einer bestimmten Kopfzelle zugeordnet werden.

Der HTML-Code:
<table>
<caption>Bevölkerungswachstum deutscher Großstädte</caption>
<tr>
<th id="f1">Stadt</th>
<th id="f2">Einw. 1990</th>
<th id="f3">Einw. 2000</th>
<th id="f4">Einw. 2010</th>
<th id="f5">Veränderung in % (2000-2010)</th>
</tr>
<tr>
<td headers="f1">Berlin</th>
<td headers="f2">3.433.695</th>
<td headers="f3">3.382.169</th>
<td headers="f4">3.460.725</th>
<td headers="f5">2,32</th>
</tr>

Zusätzlich kann auch noch eine Kurzfassung zu den einzelnen Daten voran gestellt werden. Dies wird mit dem Attribut abbr (abbr = abbreviated = verkürzt) erreicht. Das Sprachausgabesystem kann diesen Text vor dem eigentlichen Zelleninhalt ausgeben.

Der HTML-Code:
<table>
<caption>Bevölkerungswachstum deutscher Großstädte</caption>
<tr>
<th scope="col">Stadt</th>
<th scope="col">Einw. 1990</th>
<th scope="col">Einw. 2000</th>
<th scope="col">Einw. 2010</th>
<th scope="col" abbr="Zuwachs">Veränderung in % (2000-2010)</th>
</tr>
<tr>
<td>Berlin</th>
<td>3.433.695</th>
<td>3.382.169</th>
<td>3.460.725</th>
<td>2,32</th>
</tr>

Im Leben wie bei der Auszeichnung von Datentabellen für die Sprach- oder Brailleausgabe ist zu beherzigen, dass Mehr nicht mehr hilft. Texte werden per se von den Ausgabegeräten wiedergegeben, insofern sind gleiche Inhalte in speziellen Attributen ziemlich sinnbefreit – auch ein blinder Mensch muss die Information nicht dreimal ans Ohr gedrückt bekommen. Es gilt dort auszuzeichnen, wo ein sehender Mensch sich optisch orientiert, bspw. durch andere Hintergrundfarben, fette Schrift oder Gitterlinien. Wer sich näher mit diesem Thema beschäftigen möchte, findet beim W3C weitere Attribute und deren Erläuterung.

Fazit

Es erfordert nicht viel Aufwand eine Tabelle semantisch korrekt zu strukturieren. Der Mehrwert ist dafür umso größer: Die Suchmaschinen können einen sinnvollen Zusammenhang zwischen Überschrift und Inhalten herstellen und entsprechend indizieren. Der Browser kann eine Tabelle effektiver berechnen und gegebenenfalls schneller darstellen. Bei größeren Tabellen hat der Benutzer es leichter, die Tabelle zu nutzen. Die zusätzlich notwendigen Auszeichnungen für Sprachausgabegeräte halten sich auch in Grenzen, geben aber Sehbehinderten die Möglichkeit einen einfacheren Zugang zu den Inhalten der Tabelle zu finden. Es lohnt sich in mehrfacher Hinsicht umzudenken

Ein Blick in den Quellcode mancher Seiten treiben einem als Webentwickler schon die Tränen in die Augen. Diese Seiten lassen oft die Struktur vermissen, die HTML zu Eigen ist, führen aber zum Ausgleich fast alles auf, was HTML zu bieten hat – leider an den falschen Stellen und dann geradezu inflationär. Von einer Zugänglichkeit für Sehbehinderte braucht man bei diesen Seiten nicht mehr zu reden. Aber auch Suchmaschinen können nicht viel mit solchen Seiten anfangen – und an diesem Punkt schießen sich die Betreiber der Seite selbst ins Knie. Suchmaschinen orientieren sich am semantischen Aufbau einer Seite. Je weniger der Quellcode dem entspricht, desto weniger wird indiziert. Unterlässt oder korrigiert man die folgenden 10 Sünden, so hat die Seite schon enorm an Qualität gewonnen.

1. Sünde: Tabellen-Layout

Tabellen-Layout ist nicht nur tot, es ist Geschichte. Das war mal vor 10 Jahren notwendig, um in den ersten Browsergenerationen ein einheitliches Layout zu garantieren. Tabellen sind Tabellen; sie sind dazu da Texte oder Daten in eine geordnete Zusammenstellung zu bringen. Diese Inhalte werden in Zeilen und Spalten gegliedert. Die optimale Darstellung einer Tabelle ist der Tabellenkopf und darunter die Tabellenfelder, eventuell noch ein Tabellenfuß. Ein Webseitenlayout sollte mittlerweile mit Blockelementen und CSS erstellt werden.

2. Sünde: Der Überschriftengeiz

<p><strong>Überschrift</strong></p>
<p>Es folgen die Texte</p>
HTML stellt Überschriftengrößen von h1 bis h6 zur Verfügung, mit abnehmender Schriftgröße. Damit lassen sich Texte hervorragend gliedern, und die Abstände vor und nach dem Text werden automatisch hergestellt.
<h3>Überschrift dritten Grades</h3>
<p>Es folgen die Texte</p>

3. Sünde: Verzicht auf Listen, wo sie notwendig sind

Eine Auflistung von Informationen wird immer noch gerne über Absätze und Zeilenumbruch erstellt.
<p>
KingKong<br />
Godzilla<br />
Rumpelstilzchen<br />
Nosferatu<br />
</p>
HTML bietet geordnete (ol) und ungeordnete (ul) Listen an. In der geordneten Liste werden in der Regel den Listenelementen Zahlen vorangestellt, in den ungeordneten sind dies Auflistungszeichen. Der Vorteil der Listen besteht darin, dass nach jedem Listenelement ein automatischer Zeilenumbruch erfolgt, wie sich das für eine anständige Liste gehört.
<ul>
<li>KingKong</li>
<li>Godzilla</li>
<li>Rumpelstilzchen</li>
<li>Nosferatu</li>
</ul>

4. Sünde: Zu viele Zeilenumbrüche

Um Abstände zwischen Texten oder Bildern zu erhalten wird häufig der Zeilenumbruch mehrfach hintereinander genutzt. Dafür ist er nicht gedacht.
Es lebt!, rief Doktor Frankenstein.
<br />
<br />
<br />
Sein Diener Igor hilft dem Wesen vom Tisch.
Zum Erstellen Zwischenräumen bei Texten und Bildern werden entweder Absätze benutzt oder mittels CSS margins (Außenabstände) erzeugt.
<p>Es lebt!, rief Doktor Frankenstein.</p>
<p>Sein Diener Igor hilft dem Wesen vom Tisch.</p>
Unter diese Sünde fällt übrigens auch die mehrfache Nutzung des &nbsp; (Leerzeichen ohne Umbruch) hintereinander.

5. Sünde: „Vergessen“ des alt-Attributs bei Bildern

Das alt-Attribut (Alternativtext) für Bilder wird in konformen HTML-Code erwartet. Für Nutzer mit Screenreadern ist dieses Attribut wichtig, um Informationen über das Bild zu erhalten. Auch bei großen Bildern und langsamer Verbindung gibt das alt-Attribut Aufschluss über den Inhalt. Es sollte also in jedem Fall vorhanden sein. Bei eher dekorativen Bildern reicht es das Attribut leer zu lassen: alt="".
<img src="frankenstein.jpg" />
<img src="frankenstein.jpg" alt="Doktor Frankenstein im Labor" />

6. Sünde: Hyperlinks ohne title

Hyperlinks sollten generell schon als solche zu erkennen sein. Noch besser, vor allem in Hinsicht auf Barrierefreiheit, ist die Nutzung des Attributs title.
<a href="kapitel_02.html" title="Kapitel 2">Nächstes Kapitel</a>

7. Sünde: Verwendung von <b> und <i> für fett und kursiv

<b> und <i> sind Textformatierungen und in diesem Zusammenhang nicht richtig. Für die Betonung einzelner Wörter oder Sätze sind die logischen Textauszeichnungen <strong> und <em> Mittel der Wahl. Textformatierungen sollten mit CSS vorgenommen werden.
<b>Das ist eine fette Schrift</b>, aber <strong>dieses ist besser.</strong>

8. Sünde: Platzieren von Block-Elementen in Inline-Elementen

Block-Elemente in HTML erzeugen einen Zeilenumbruch und haben häufig einen eigenen oberen und unteren Abstand zu den nächsten Elementen. Dazu gehören Überschriften, Absätze, Tabellen und div’s. Inline-Elemente bleiben im Textfluss und können beliebig in Block-Elemente eingefügt werden. Zu ihnen gehören Bilder, Anker (Hyperlinks) und span’s. Block-Elemente werden demnach niemals in Inline-Elemente platziert.
<a href="#"><h1>Falsche Platzierung</h1></a>
<h1><a href="#">Richtige Platzierung</a></h1>

9. Sünde: Inline Styles

Die moderne und konforme Webseitenerstellung trennt Inhalt und Formatierung voneinander. Die Formatierung des Inhalts wird mit CSS vorgenommen. Insofern unterlaufen Inline-Styles diese Absicht. Der Quellcode wird aufgebläht und unübersichtlich.
<h1 style="font-family: Arial; font-weight: bold; font-size: 16px; color: #000;">Überschrift</h1>
Solche Formatierungen gehören in ein StyleSheet, vornehmlich in den Head-Bereich, oder noch besser, in eine externe CSS-Datei.

10. Sünde: grafische Navigation

Verläufe im Hintergrund, ausgefallene Schriften, schöne Roll-Over-Effekte – auch wenn der Webeditor solche Features bereithält, grafische Navigationen schließen einen Teil der Besucher aus und Suchmaschinen finden sie nicht. Man muss nicht unbedingt auf einen Screenreader angewiesen sein, auch jemand, der nicht mehr so gut sehen kann, hat bei Textbildern keine Möglichkeit die Schrift zu vergrößern.

Fazit:

Wer eine Seite ins Internet stellt, impliziert, dass er anderen Menschen etwas mitteilen möchte. Dieser Absicht sollte man auch Rechnung tragen. Dazu gehört ein logischer Aufbau der Seite und seiner Inhalte. Die Inhalte sollten für den Besucher gut lesbar, die Seite gut bedienbar sein und die Ladezeiten nicht die Geduld überstrapazieren. Der saubere Aufbau einer Webseite und die Nutzung logischer Auszeichnungen von Inhalten erleichtert den Suchmaschinen die Indizierung der Seite. Sie wird besser gefunden und relevante Stichworte eher gelistet. Und zu guter Letzt spart man sich bei der Überarbeitung der Seite ungemein viel Arbeit.

Symbole dienen dem Verständnis

Links mit Symbolen zu versehen ist nicht nur ein hübsches Extra für das Auge, sondern für den Benutzer ein hilfreicher Hinweis, was ihn hinter dem Link erwartet. Dies ist in der Regel ein weiteres HTML-Dokument, kann aber ebenso auch ein Dokument anderen Formates sein, wie bspw. ein PDF-, Word- oder Textdokument, aber auch ein Bild, eine Sounddatei oder ein Archivdatei (.zip, .rar), für die ein Download gestartet wird. Solchermaßen informiert, steht es dem Benutzer frei den Link zu aktivieren oder auch nicht. Bei der Auswahl der Symbole ist selbstverständlich darauf zu achten, dass sie auch mit der Aktion in Verbindung gebracht werden kann, also verstanden werden.

Version 1: Eine Klasse erstellen

Wie kann man nun das Symbol dem Link anhängen? Die Methode richtet sich nach den Browserversionen, die hauptsächlich von der anvisierten Zielgruppe verwendet wird. Je älter der Browser, umso aufwändiger ist die CSS-Formatierung. Der simpelste Weg ist das Erstellen einer separaten Klasse für den Link.

Das Stylesheet:
a.pdf {
padding-right: 20px;
background: transparent url(icons/pdf.gif) no-repeat right;}


Der HTML-Code:
Dieser Text kann auch als <a href="text.pdf" class="pdf">PDF-Dokument</a> betrachtet werden.

Der Klasse wird das entsprechende Symbol als Hintergrundbild zugeordnet und rechts neben dem Text positioniert. Der Innenabstand (padding) sollte mindestens der Breite des Bildes entsprechen, ein paar Pixel mehr heben jedoch die optische Erscheinung.

Der Vorteil dieser Methode ist die hohe Kompatibilität mit älteren Browsern, weil es sich des CSS Level 1 bedient. Der Nachteil besteht darin, dass im HTML-Code die Klasse jedes Mal notiert werden muss. Wenn verschiedene Symbole eingesetzt werden sollen, erhöht sich der Aufwand daher deutlich.

Version 2: Der Attributselektor

Wer auf ältere Browser pfeift, dem eröffnen sich mit CSS 3 praktikablere Möglichkeiten. Um bei dem letzten Beispiel zu bleiben, findet das folgende Stylesheet alle Links mit der Dateiendung .pdf und fügt diesen das festgelegte Symbol als Hintergrundgrafik an.

Das Stylesheet:
a[href $=".pdf"] {
padding-right: 20px;
background: transparent url(icons/pdf.gif) no-repeat right;}

Der HTML-Code:
Dieser Text kann auch als <a href="text.pdf">PDF-Dokument</a> betrachtet werden.

Hier kommt ein Attributselektor zum Zuge: das obige Stylesheet besagt, wenn innerhalb eines a-Tags der Wert des Attributs href auf „.pdf“ endet, dann werden die Eigenschaften in der geschweiften Klammer gesetzt. Durch das Dollarzeichen $ wird das Ende des href-Attributwertes auf den angegebene Zeichenkette (hier: .pdf) durchsucht.

Der Vorteil liegt auf der Hand: Mit dieser Methode muss nur jeweils eine CSS-Anweisung pro Symbol geschrieben werden; zusätzliche Notierungen im HTML-Code entfallen. Das Ergebnis entspricht optisch dem der CSS-Klasse. Auf diese Art und Weise können natürlich auch verschiedene Dateiendungen zusammengefasst und mit einem einheitlichen Symbol ausgezeichnet werden, somit könnten bspw. unterschiedliche Videoformate dasselbe Symbol erhalten:

a[href $=".wmv"], a[href $=".avi"], a[href $=".mpeg"], a[href $=".mov"], a[href $=".flv"] {
padding-right: 20px;
background: transparent url(icons/movie.gif) no-repeat right;}

Wenn es nun die Möglichkeit gibt nach einer Dateiendung zu selektieren, dann gibt es auch einen Weg nach dem Anfang des href-Attributwertes zu suchen und dies zu nutzen. Auch hier bieten sich sinnvolle Einsätze an: Einer Mailadresse kann ein entsprechendes Symbol zugewiesen werden, einem einfachen Hyperlink wiederum ein anderes als einer sicheren Verbindung.

Das Stylesheet:
a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(icons/email.gif) no-repeat right;}
a[href ^="http://"] {
padding-right: 20px;
background: transparent url(icons/link.gif) no-repeat right;}
a[href ^="https://"] {
padding-right: 20px;
background: transparent url(icons/lock.gif) no-repeat right;}

Der HTML-Code:
Sie können gerne meine Seite unter <a href="http://www.designimsinn.de">www.designimsinn.de</a> besuchen, oder mir eine <a href="mailto:gibts.nicht@desingimsinn.de">E-Mail</a> schreiben. Nutzen Sie auch die sichere Verbindung zu dem imaginären <a href="https://www.nichtszumshoppen.de">Shop</a>.

In diesem Fall ist es das Potenzzeichen ^, das den in Klammern stehenden Wert aus dem Gesamtwert heraussucht.

Variationen mit dem Attributselektor

Der Attributselektor ist auf jedes HTML-Element anwendbar. Möchte man gerne ein neues Browserfenster mit einem Symbol kennzeichnen, so kann auch auf das Attribut target zugegriffen werden. Zum Öffnen eines Hyperlinks in einem neuen Fenster oder Tabulator muss der Wert des Attributs target auf _blank gesetzt werden. Dieser Wert wird folgendermaßen selektiert:

Das Stylesheet:
a[target ="_blank"] {
padding-right: 22px;
background: transparent url(icons/popup.gif) no-repeat right;}


Der HTML-Code:
Sie können gerne meine Seite unter <a href="http://www.designimsinn.de" target="_blank">www.designimsinn.de</a> besuchen. Diese öffnet sich in einem neuen Fenster.

Auf den ersten Blick erscheint der Attributselektor vielleicht sehr kompliziert. Hat man sich aber ein wenig eingelesen und die Funktionsweise verstanden, eröffnen sich vielfältige Möglichkeiten CSS effektiv zu nutzen.

Bleibt noch zu erwähnen, dass es natürlich von Vorteil ist, sich seine eigenen Symbole – passend zum Webdesign – zu erstellen. Eine Höhe von 16 Pixel liegt im optimalen Bereich, 20 Pixel sollten eher nicht überschritten werden. Als Grafikformat ist dem .gif der Vorzug zu geben, .png mit transparentem Hintergrund geht bei den neuen Browsern selbstverständlich auch. Nun ist es aber nicht jedem gegeben eigene Grafiken zu erstellen. Für all jene bieten Plattformen, wie z.B. IconFinder oder Free Icons Web eine große Auswahl.

Abschließend wäre es natürlich schon von Interesse zu wissen, welche Browser denn nun zuverlässig CSS 3 Selektoren darstellen können. Da ich nicht alle Browser zur Verfügung habe, muss ich mich auf die Ergebnisse Anderer verlassen. When can I use… gibt eine Kompatibilität für den IE ab Version 9 an, Firefox ab 3.6, Safari ab 3.2, Chrome ab 10.0 und Opera ab 10.6. Nebenbei sind auch einige Mobile-Browser aufgeführt. Überraschenderweise kann sogar der Netscape 7.02 aus dem Jahr 2003, den ich noch als Altertümchen installiert habe, einwandfrei die Symbole darstellen. Da haben die nicht mehr erfassbaren Netscape-User mal wieder Glück gehabt.

Gewichtung der Überschriften

In HTML haben Überschriften eine wichtige semantische Bedeutung. Sie bilden nicht nur optisch eine Gewichtung der Inhalte, sondern auch für „blinde“ Leser, wie Suchmaschinen aber auch Screenreader und sonstige Anwendungen für Sehbehinderte. Deshalb sollte die Überschriftenstruktur semantisch korrekt angewendet werden. HTML bietet Überschriftengrößen von <h1> bis <h6>. Diese haben, von <h1> ausgehend, eine abnehmende Gewichtung, <h6> hat die geringste Gewichtung. Die <h1> ist somit unsere Headline. Sie sollte eine kurze Aussage über das gesamte Dokument machen. Logischerweise sollte sie auch nur einmal im Dokument angewendet werden – ein Zeitungsartikel hat ja auch nur eine Hauptüberschrift. Eine geringere Gewichtung zur Headline hat eine Kapitelüberschrift. Ihr Geltungsbereich geht über eine bestimmte Anzahl von Absätzen. Die nächst geringere Gewichtung hat eine Überschrift über einem Absatz, sie bezieht sich ausschließlich auf den folgen Textabsatz. Dieses Prinzip der Überschriftenhierarchie sollte für die Struktur des Dokuments angewendet werden.

Die Struktur eines Dokumentes

Wie sähe diese Struktur nun in der Praxis aus? Hier mal eine grobe, schematisierte Darstellung einer Webseite:

Die <h1> bis <h4> stehen stellvertretend für die Überschriften, die Felder stehen für die Inhalte. Je dunkler die Felder werden, umso mehr nehmen sie an Gewichtung ab. Die <h1> beschreibt im optimalen Fall den Inhalt des gesamten Dokuments. Sie sollte, wie schon erwähnt, üblicherweise nur einmal vorkommen. Ausnahmen ergäben sich für separate, längere Abschnitte in ein und demselben Dokument. Die weitere Anwendung der Überschriften ist recht simpel: es wird stets die nächst kleinere Überschriftgröße gewählt, solange der darauf folgende Inhalt ein „Kind“ des vorherigen ist. „Kind“ steht im Sinne der Hierarchie für ein untergeordnetes Element. Bei zwei oder mehr parallelen Inhaltsblöcken in einem Dokument, wird innerhalb der Blöcke ebenfalls die Überschriftenhierarchie angewendet. Diese Anwendung der Überschriften erzeugt eine logische Abfolge der Inhalte und sollte wenn möglich nicht gebrochen werden.

Fehler bei der Anwendung von Überschriften

Häufig werden Überschriften im Rahmen der Standard-Browserstyles genutzt. Es werden dann kleinere Überschriftengrößen eingesetzt, weil die logische, nächst kleinere eine unpassende Formatierung hat. So wird dann die <h2> durch eine <h4> ersetzt. Andere nutzen den Überschriften-Tag zur Auszeichnung und Hervorhebung von Textabschnitten, weil dann mal eben die Formatierung passt. Hier kommt das mächtige Werkzeug CSS ins Spiel: das Browser-Stylesheet kann überschrieben werden. Wenn die <h2> zu groß sein sollte, wird die Schriftgröße mittels CSS verkleinert und die semantische Hierarchie bleibt erhalten.

Der Überschriften-Tag hat bei einer Textauszeichnung generell nichts verloren. Der Einsatz von Auszeichnungs-Tags wie <strong> oder <em> sind in diesen Fällen passend. Auch diese Tags können mit CSS formatiert werden, um sie dem Design der Seite anzupassen.

Welche Bedeutung die korrekte HTML-Auszeichnung von Überschriften für Sehbehinderte hat, kann bei Selamet Aydogdu, einem blinden Autor im Access-for-all-Blog nachgelesen werden.

Ich habe euch mal einige interessante Unicodezeichen rausgesucht, die sich für die Gestaltung von Listenelementen eignen. Die Darstellung der Zeichen ist jedoch von der Schriftart und dem Browser anhängig. Leider unterstützt der Internet Explorer bis Version 8 die CSS-Anweisungen content und :before nicht. Wer ältere Versionen des IE abfangen möchte, der kann die Formatierung der Listenelemente über Conditional Comments vornehmen. Auch der Safari kennt einige der Unicodezeichen nicht und beschränkt sich stattdessen auf die Darstellung eines schicken Rechtecks.

Weitere Pfeile und Unicodezeichen, sowie eine Kompatibilitätsliste der Browser findet ihr bei alanwood.net.

oder mit einem radialen Raster:

und hier noch mit einem Stern:

Die Tastenkombination stellt jedoch einige Anforderungen an Gelenkigkeit der Finger. Wähle eine Form aus und bevor du die Form aufziehst, halte Shift+5+ö gedrückt. Je nach Geschwindigkeit der Mausbewegung wird die Form von klein nach groß dupliziert. Möchtest du, dass die Form beim Aufziehen auch noch rotiert, so halte mit dem Aufziehen die Tasten Alt+5+ö gedrückt. Diese Kombination funktioniert allerdings erprobt nur am PC. Die Tastenkombination für einen Mac könnte die spitze Klammer (<) sein, sicher bin ich mir jedoch nicht. Wenn also jemand den Trick mit einer deutschen Tastatur am Mac kennt, immer her damit.

Nun werden mir wahrscheinlich die Leser nicht gerade das Blog einrennen, ich hoffe aber auf Dauer eine kleine, treue Gemeinde gewinnen zu können. Ich werde mich bemühen Themen zu finden, die unterschiedliche Wissensstände befriedigen und dass für jeden mal was dabei ist. Konstruktive Kritik ist dabei ausdrücklich erwünscht.