Retro-Coding: Semantischer Code ist der Anfang von gutem Design

von Heike Edinger & Timo Wirth / 6. Januar 2005 / Tags: Code, HTML, Markup, Retrocoding, Semantik

Schon mal in Word eine Tabelle angelegt, um einen Text zu schreiben? Nein, warum auch? Das würde das Schreiben und Editieren ziemlich umständlich machen. Im Web dagegen ist diese Vorgehensweise immer noch normal. Dabei ginge es mit klassischen, semantischen HTML-Elementen einfacher und die Website wäre zukunftsfähiger.

Es sollte für jeden leicht sein, Informationen ins Internet zu stellen. Genauso leicht sollte es für jeden sein, im Internet Informationen abzurufen. So ist das World Wide Web seit Anbeginn konzipiert: Ungehinderter Informationszugriff und leichte Informationsbereitstellung sind Kern von Tim Berners-Lees Vision eines weltweiten Datennetzes. Für diesen Zweck wurden Informationen damals mit nur wenigen HTML-Elementen strukturiert: Was ist der Name des Dokuments? Was sind die Überschriften? Welche Teile sind Textabsätze? Was soll besonders betont werden? etc.

HTML für Anfänger: klar & leicht verständlich

Jeder, der mit HTML beginnt, fängt mit <h1> für eine Überschrift und <p> für einen Textabsatz an. So staunt man schnell, was der Browser daraus macht. Denn alles was von <h1></h1> umschlossen ist, wird groß angezeigt und der Text zwischen <p> und </p> wird automatisch kleiner formatiert – ohne, dass irgendwelche zusätzlichen Formatierungsangaben nötig sind. Die Schriftgrößen werden relativ zueinander abgestimmt.

Auch die Abstände zwischen den einzelnen Absätzen werden vom Browser automatisch generiert. Eine Überschrift erster Ordnung <h1> ist das größte Element. In Relation dazu werden Zwischenüberschriften, die mit <h2> markiert sind, kleiner formatiert. Ein Absatz ist ein Absatz (<p>), eine Liste ist eine Liste (<li>) und ein Bild ist ein Bild (<img>). Das ist das semantische Prinzip der Markup-Sprache HTML. Der Code transportiert mit solch sinnhaft eingesetzten HTML-Tags strukturelle Bedeutungen und legt Beziehungen zwischen den Elementen fest. Der Browser kann diese Bedeutung lesen und eine Standard-Formatierung zuweisen.

HTML für Fortgeschrittene: Fett & sündenbehaftet

Es dauert jedoch nicht lange, bis man anfängt zu sündigen. Die Verlockung der dunklen Seite, alles unter absolute Kontrolle zu bekommen, ist zu groß.

Erste Regel für Fortgeschrittene: Vergiss <h1>, <p>, <ul> etc. Nur so kann ein HTML-Profi pixelgenaue Designs kreieren und bei Größen, Abständen und Einteilungen alles kontrollieren.

Sünde 1: Klassische, semantische HTML-Tags werden durch <span>s und <div>s ersetzt und mit <br>s, mit Blindgifs und geschützten Leerzeichen angereichert. Denn die automatische Formatierung von HTML ist lästig und stört. Die inhärenten Größenverhältnisse und Abstände von strukturellem HTML sind hässlich, zu groß und werden je nach Browser unterschiedlich dargestellt.

Ich habe es selbst oft getan: Aus reinen Designzwecken habe ich den Inhalt und die Beziehungen der einzelnen Elemente zueinander verleugnet, indem ich eine Div-Konstruktion <div class="header2"> anstelle einer simplen <h2> für eine wichtige Überschrift verwendet habe.

Warum das eine Sünde ist: Ohne die Layout-Information, die über die CSS-Datei bereitgestellt wird, besteht bei nicht-semantischen Tags wie <div class="header2"> und <div class="p"> kein optischer Unterschied zwischen Überschrift und Textabsatz. Im Markup gibt es keinen strukturellen Unterschiede. Mit mehr Aufwand wird hier ein weniger leistungsstarker Code produziert, der gerade mal für die Nutzung mit einem grafischen Browser ausreicht. Die Daten lassen sich nur schwer exportieren oder mit anderen internetfähigen Engeräten abrufen. Überdies haben solche schlecht strukturierten Inhalte eine weitaus geringere Chance, über Suchmaschinen gefunden zu werden. Werden keine <h1>- und <h2>-Tags benutzt, kann Google die wichtigsten Inhalte der Website nicht finden.

Sünde 2: Damit die Überschrift und allen anderen Elemente da stehen, wo sie stehen sollen, werden Tabellen zu Layoutinstrumenten umfunktioniert. Mit einer unsichtbaren Tabelle kann im Web ein mehrspaltiges Layout zu Stande gebracht werden. Durch verschachtelte Tabellen und Blind-Gifs wird die HTML-Seite zum Millimeterpapier.

Warum das eine Sünde ist: Heute müssen Tabellen nicht mehr dem Bösen dienen. Mehr Kontrolle einerseits und mehr Flexibilität anderseits kann durch den modernen, webstandardskonformen Einsatz von Stylesheets erreicht werden. Mit CSS-Positionierung erzielt man viel elaboriertere Effekte, wie etwa Überlagerungen oder Erstzeileneinzug – ohne dabei auf klar strukturierten Code verzichten zu müssen.

Selbst wenn dem Webdesigner die Sünden bewusst sind, kann es schwer sein, zum semantischen HTML-Markup zurückzukehren. Ein <br>,  , ein Blindgif oder eine Tabelle helfen schnell und zuverlässig bei akuten Design-Problemen. Den dadurch verursachten Codebrei nimmt man als notwendiges Übel hin. Die Ursachen für den fehlenden Mut zur radikalen Abkehr von solch schmutzigem Code liegen sehr tief, in den Denkstrukturen des 90er-Jahre-Webdesign.

Strukturelle Ursachen für Codebrei

In der zweiten Hälfte der 90er-Jahre, als die Websites anfingen hübsch zu werden, wurde in vielen Fällen nicht von den Inhalten her gedacht und konzipiert und dann gecodet, sondern zuerst das Design festgelegt. Nicht die Informationen standen im Vordergrund, sondern das Aussehen. Diese Vorgehensweise ist heute noch verbreitet.

Die Inhalte werden mit vielen Zusatz- und Aromastoffen angereichert, bis die eigentlichen Informationen unkenntlich sind. Das Ergebnis: Ein Quellcode-Brei.

Den Besuchern einer Codebrei-Website fällt diese schlechte Bauweise zunächst nicht auf, denn die Seite sieht meist recht schön aus. Sie lädt höchstens sehr langsam. Will man die Website allerdings mit einem Palm, Handy, Textbrowser oder Screenreader nutzen, sind die Informationen unlesbar.

99,9% of all website are obsolete. These sites might look and work all right in mainstream, desktop browsers whose names end in the numbers 4 or 5. But outside these fault-tolerant environments, the symptoms of disease and decay have already started to appear. (Zeldman 2003:23)

Die ursprünglichen Stärken von HTML – Universalität, Flexibilität und Plattformunabhängigkeit – sind auf der Strecke geblieben. Webstandards werden immer noch von den meisten Webdesignern wenig beachtet. So bleiben gleich zwei Chancen ungenutzt. Zum einen lassen sich mit webstandskonformem Code viel schönere, flexiblere, billigere und langlebigere Websites bauen als mit alten HTML-Tabellen-Tricks. Zum anderen wird das WWW immer häufiger auch mit anderen internetfähigen Endgeräten genutzt. Semantisch gecodete Websites, bei denen alle Layout-Angaben im externen Stylesheet stehen, sind kompatibel mit alternativen Geräten wie Screenreader, Palm, Blackberry oder Lynx. Sie sind plattformunabhängig.

Fazit: Websites sind fett geworden. Die Website-Besucher müssen lange Wartezeiten und eine eingeschränkte Nutzung in Kauf zu nehmen. Für Website-Betreiber wird die Produktion immer aufwendiger, komplexer und teurer.

Retro-Coding, das Mittel gegen Tag-Soup

Das Geheimnis guter Suppen sind ganz einfach gute Zutaten. (Jamie Oliver 2002:15)

Das Geheimnis einer guten Website sind gute Informationen. Schon mit wenigen sinnhaften XHTML-Tags und hochwertigen CSS-Regeln kann eine Website schnell und einfach gestaltet werden. Die Informationen müssen nur gut strukturiert sein. Der Wert entsteht über den Inhalt und die bedeutsame Struktur. Sind die Grundzutaten von hoher Qualität, kriegt man den Rest im Handumdrehen hin.

Fazit: Moderne Websites bestehen aus guten Zutaten, die wohlschmeckend sind und die leicht angemacht und aufbereitet, für jeden und überall zu genießen sind.

Ein Schritt zurück und zwei vor

Mit Webstandards coden heißt für die Zukunft coden. Doch bevor man Zukunftsfähigkeit erreichen kann, muss man einen Schritt zurück zum Ursprung von HTML – zum Markup. Nur mit gut strukturiertem Code sind die Informationen nachhaltig zukunftsfähig.

Vielen ist diese einfache Art eine Website zu gestalten, also Inhalte strukturiert online zu stellen, abhanden gekommen. Content is king! Bevor wir überlegen, wie die Seite später aussehen soll, ob 3-Spaltenlayout oder horizontale Navigationsleiste, sollten wir den Inhalt ansehen und uns von ihm leiten lassen. Form follows function. Am Anfang stehen die Fragen: Welche Art von Informationen liegen vor? Wie können wir die Informationen gruppieren und wie gewichten?

Strukturierte Informationen sind der Schlüssel für schnelle Ladezeiten, für Plattformunabhängigkeit, Barrierefreiheit und gutes Design.

Semantisch strukturiertes HTML

Für einen gut strukturierten Code gibt HTML als Markup-Sprache eine Reihe sinnvoller Tags vor, von denen manche mittlerweile in Vergessenheit geraten sind.

Back to the future. Let’s go!

Überschriften

Überschriften fassen zusammen, spitzen zu und geben Orientierung. Sie stehen über dem Text. Sie dominieren den nachfolgenden Inhalt. Darum werden sie mit h für header markiert. Sie sind also wichtiger als der Fließtext. Einige Überschriften können wiederum wichtiger sein als andere. Darum gibt es die h-Hierarchie. Die wichtigste Überschrift ist die <h1>. Je kleiner die Zahl, desto wichtiger ist die Überschrift. Sind die Überschriften gleich wichtig, wie zum Beispiel bei Zwischenüberschriften, sollte man sie auch gleich gewichten und ihnen die gleiche Überschriften-Ebene zuweisen. Das Dokument wird so hierarchisch durchstrukturiert. Screenreader können die Überschriften-Elemente gruppiert vorlesen (alle Überschriften 1. Ordnung, dann alle Überschriften 2. Ordnung …), so dass Blinde die wichtigsten Inhalte eines Textes schnell erfassen können. Das “Abscannen” eines Textes ist somit nicht nur mit einem grafischen Endgerät möglich. Im Falle von Zwischenüberschriften wäre eine <h3> eine gute Wahl, wenn <h1> die Seiten-Überschrift markiert und <h2> die Kapitelüberschriften. Über das Stylesheet kann die Schriftart und -größe sowie Abstand, Hintergrund und Durchschuss individuell angepasst werden. Struktur und Design sind getrennt.

Eric Meyer zur Überschriften-Hierarchie: Pick A Heading

SimpleQuiz Part I: Headings

SimpleQuiz: Die Lösung zur H-Frage

Emphasis or Structure? Question Time: Using H Tags

Textabsätze

Texte oder Textabschnitte werden mit <p></p> eingeschlossen. Das <p> sagt: Hier steht ein Textabsatz. Weitere <div>s oder <br>s sind nicht notwendig. Ein Paragraph <p> ist ein Block-Element. Damit fängt der nachfolgende Textabschnitt immer in der nächsten Zeile an. Die Abstände zwischen den einzelnen Absätzen können über margin im Stylesheet gesteuert werden.

Fancy Paragraphs With CSS

SimpleQuiz > When to P

SimpleQuiz: When to P > Conclusion

Listen – ul, ol, dl

Ausgangslage: Listen kommen auf fast jeder Website vor: Als Navigationsmenü, als Linksammlung oder als Aufzählung von gruppierten Elementen wie Chart-Listen, befreundeteten Weblogs etc.

Beziehung: Die einzelnen Listen-Einträge werden mit <li> markiert und stehen durch die übergeordnete <ol> oder <ul> in Beziehung zueinander.

Aussehen: Listen müssen wie nach Listen aussehen. Die einzelnen Listeneinträge müssen nicht eingerückt sein oder runde, schwarze Aufzählungszeichen haben. Auch müssen Listen nicht vertikal verlaufen. Sie können auch in eine horizontale Navigationsleiste umgewandelt werden, deren Menüpunkte wie Karteireiter aussehen.

Code: Eine Aufzählungsliste wird mit einem <ul> (für unordered list) oder einem <ol> (für ordered list) eingeleitet. Die einzelnen Listen-Einträge sind wiederum in ein öffnendes <li> und ein schließendes </li> eingefasst. Um Listen mit CSS vollständig stylen zu können, ist es wichtig, dass alle ul-, ol-, dl-, dt-, dd- und li-Tags geschlossen werden. Das Nicht-Schließen von <li> ist immer noch eine weitverbreitete Nachlässigkeit, um Code zu sparen oder das automatische Einrücken zu verhindern.

Unordered List: Zwischen <ul> und </ul> stehen die einzelnen Listeneinträge mit <li>. Alle Listen-Einträge sind gleichgewichtet und unsortiert wie bei einer Einkaufsliste oder einer Navigationsleiste.

Ordered List: Die Beziehung der einzelnen Listeneinträge <li>s zueinander ist linear. Alle Listeneinträge werden automatisch durchnumeriert, wie zum Beispiel bei einer Top-Ten-Liste.

Definition List: Mit einer Definition List <dl>wird, wie bei einem Lexikon-Eintrag, ein Begriff <dt> mit Hilfevon einer oder mehreren Erklärungen <dd> erläutert. Die Erklärungen sind einem Begriff untergeordnet. Doch die Definitionslisten sind nicht auf Begriffserklärungen beschränkt:

Definition lists […] generally consist of a series of term/definition pairs (although definition lists may have other applications). Thus, when advertising a product, one might use a definition list […] Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words. (W3C Spezifikation)

Definition Lists lassen sich sehr kreativ einsetzen, um Beziehungen herzustellen. So kann man etwa mit <dt> und <dd>s und eine semantische Navigationsliste mit Unternavigation bauen (Beispiel: Product Families > Windows, Office …) oder einem Bild eine Bildunterzeile geben (SimpleQuiz zum Thema Bildunterzeile).

List-Tutorial von Max Design

456 Berea Street: Turning a list into a navigation bar

Definition lists - misused or misunderstood?

Fettungen und Betonungen – strong, em

Wie liest ein Screenreader ein Wort kursiv vor? Gar nicht, denn ein <i> ist ein Designelement und enthält genau wie <b> nur Informationen für eine Bildschirmdarstellung. Die Neuformulierung von HTML, der neue XHTML-Standard, empfiehlt, auf solche Präsentations-Elemente zu verzichten und stattdessen Ausgabegerät-unabhängige Elemente zu verwenden (siehe Kasten oben). <i> wird von <em> (für englisch emphasized) abgelöst und statt <b> kann man das plattformunabhängige HTML-Element <strong> nehmen. So wird zunächst die Bedeutung übermittelt. Wie es formatiert oder vorgelesen wird, bestimmt das Ausgabegerät oder ein Stylesheet. <em> muss am Bildschirm auch nicht kursiv aussehen. Mit der Stylesheet-Angabe background: #FFFF66 kann beispielsweise ein Textmarker-Effekt imitiert werden werden.

Zitate – blockquote

Zitate sind etwas Besonderes. Sie unterscheiden sich vom normalen Fließtext, weil sie von einem anderen Autor stammen oder einem anderen Text entliehen sind. Das Zitat als Ganzes sollte man daher mit <blockquote> markieren und den Autor sowie die Quelle mit <cite> kennzeichnen. So sind alle Teile des Zitats strukturell markiert und können getrennt voneinander designt oder ausgelesen werden.

<blockquote>No man is an island, entire of itself; every man is a piece of the continent, a part of the main.<cite>John Donne (1624)</cite></blockquote>

Das ist nur eine kleine Auswahl an semantischen HTML-Elementen. HTML bietet als Markup-Sprache noch eine Reihe weiterer nützlicher Tags an: code, abbr, address, etc.

Wenn alle Inhalts- und Navigationselemente strukturell markiert sind, sollte man sich die HTML-Seite mal im Browser ansehen. Das Ergebnis sieht nicht unbedingt aufregend oder besonders durchgestylt aus. Doch was man sieht, sind Strukturen, Hierarchien und Zugehörigkeiten. Die Informationsübermittlung funktioniert in ihrer Basisfunktion schon – völlig ohne Design-Angaben.

Nun kann man mit CSS jedes Element verschieben, einrahmen, mit Farbe verschönern, Schriften individuell zuweisen oder mit Farbflächen oder Bildern hinterlegen. Bei der Verwendung von CSS wird oft vergessen, dass man keine zusätzlichen <div>s oder <span>s zum Designen braucht, sondern jedem HTML-Tag (zum Beispiel <p>, <em>, <li>, <a>) Styles zuweisen kann.

<div>s sind für Grobstrukturen da: Kopf, Fuss, Hauptteil, Randspalte. Alles weitere kann meist direkt über <p>s, <ul>s oder <dl>s gestylt werden.

Viele tabellenlose Websites in validem XHTML, sind nicht immer semantisch gecodet – also schlank und sinnhaft. Unnötige und unsemantische <div>s in Kombination mit <span>s werden oft zu Design-Zwecken verschachtelt, wie vorher <table>s, <tr>s und <td>s.

Bei jedem Bestandteil einer Website sollte man sich daher fragen: Welcher Tag transportiert die Bedeutung am besten? Ein <dt> und ein <dd> sagen mehr über die Beziehung der Inhalte aus als zwei wertfreie <div>s.

Positiver Nebeneffekt: Eine semantische Website kann leicht umgestaltet oder komplett umgebaut werden, ohne den Code, das Markup der HTML-Seiten zu ändern.

Fazit

Lasst uns Websites wie früher machen – erst die Inhalte schaffen, dann die Struktur festlegen und zuletzt das Design ins Spiel bringen –, aber mit den Techniken von heute.

Bibliografie

Cederholm, Dan. 2004. Web Standards Solutions.

Tiefer in den semantischen Code eintauchen mit Cederholm und seinen gut strukturierten und praxisnahen Beispielen.

Oliver, Jamie. 2002. Kochen mit Jamie Oliver.

Für einfaches Kochen und leckeres Essen schreibt Jamie Oliver den Koch-Code um. Qualität, Einfachheit und Spaß stehen im Mittelpunkt.

Peck, Nigel. 2003. XHTML Web Design for Beginners.

Einsteiger lernen XHML ohne den HTML-Umweg. HTML-Fortgeschrittene lernen die Vorteile von gutem XHTML-Markup.

Weingärtner, Monika. 1998. Publizieren im World Wide Web. Eine Einführung.

Logisch und anschaulich vermittelte 1998 Weingärtner die HTML-Markup-Grundlagen für Anfänger.

Zeldman, Jeffrey. 2003. Designing with Web Standards.

Lässig und engagiert bringt Zeldman die Vorteile und Chancen von Webstandards für Profis rüber.

Mehr zu semantischem Markup bei Vorsprung durch Webstandards

• Semantischer Code – Definitionen, Methoden, Zweifel: Das Streben nach sauberem, bedeutungsvollem Code ist nicht immer einfach. Techniken für produktives Zweifeln.
• Falling in love with CSS (mit vielen Antworten auf die Frage: “Why should people write semantic markup?”)
• Tools: Markup durchleuchten mit dem X-Ray CSS