Trennung von Struktur und Inhalt in Bezug auf HTML und CSS.

Anstehende Veränderungen

In den Anfangszeiten des Internetbooms waren es fast ausschließlich graphische Browser, wie der MS Internet Explorer und der Netscape Navigator, mit denen die Seiten des Internets abgerufen wurden. Die gängigste Hardware war der PC als Einzelplatzrechner.

Doch die Zeiten ändern sich. Der maßlose Hype um das Internet ist vorüber, mehr und mehr gewinnen andere Plattformen als der heimische PC an Relevanz. Der Wandel begann mehr als schleppend mit Funktelefonen, die Internetseiten über das Protokoll namens WAP im WML-Format anzeigen konnten. Diese setzten sich wegen hoher Zugangspreise und geringem Angebot seitens der Webseitenbetreiber jedoch nicht durch.

Heute gewinnen PDA's und Smartphones, die normale HTML-Seiten anzeigen können, an Bedeutung. Diese haben aber eine wesentlich kleinere Anzeige als der heimische PC. Während letzterer hetzutage oftmals mit einer Bildschirmauflösung mit mindestens 1024 mal 768 Pixeln aufwarten kann, beträgt die Auflösung der mobilen Geräte momentan höchstens 640 mal 480 Pixel. Dies meist im Hochformat, womit die Breite des Displays 480 Pixel nicht überschreitet. Die meisten Geräte erreichen jedoch nicht einmal diese Auflösung.

Das Problem

Um HTML-Dokumente optisch gestalten zu können, wurden Attribute für HTML-Tags eingeführt, mit denen man Angaben zu Farben, Hintergrundfarben und -bildern oder Schriftgrößen und -arten machen konnte. Auch Angaben zu Breiten und Höhen, gerade bei Tabellen und deren Zeilen und Spalten gerne zur Anordnung des Seiteninhalts benutzt, waren und sind möglich.

Mit diesen Möglichkeiten setzte sich die Tabelle, neben den Frames, als Layoutmittel durch. Sie wird von den meisten Seitenbastlern einfach so breit angelegt, wie es der eigene Bildschirm hergibt. Die Schriftgröße wird auf die Tabellengröße angepasst.

Dies sieht im Browser des Seitenerstellers aus, wie gewünscht. Ob es bei einem Besucher der Website genauso aussieht (wie gewollt), ist damit aber keineswegs sicher. Das kann es wegen der Verschiedenartigkeit der Anzeigeprogramme auch nicht sein. Leider ist dies vielen Webseitenerstellern nicht bewusst oder auch egal.

Wer eine Website für einen Kunden erstellt, erstellt sie eigentlich und ausschließlich für dessen Kunden.

Um die Besucher der Webseite vorzuzwarnen, steht dann oft ein Text nach folgendem Schema auf der Startseite des Angebots.

Diese Seite ist optimiert für eine Auflösung von 1024 x 768 Px.

Nur wegen des obigen Satzes wird aber niemand seine Bildschirmauflösung anpassen.

Damit ergeben sich aber einige Probleme.

  1. Es ist nicht gesagt, dass der Besucher seinen Browser im Vollbildmodus betreibt. Das Browserfenster kannn also eine ganz andere Größe haben, als vom Seitenersteller gewünscht.
  2. Ist die Bildschirmauflösung wesentlich größer, als von Seitenersteller vorgesehen, steht der Inhalt der Seite, in seine Tabelle gezwängt, verloren und meist unlesbar klein im Browserfenster.
  3. Ist das Browserfenster kleiner als die vorgesehene Auflösung, muß der Benutzer, meist zusätzlich zum «Hoch und Runter», quer scrollen.

Der letzte Punkt wird besonders bedeutend, wenn man an PDA-Nutzer denkt, die mit einer Bildschirmbreite von 480 Pixeln, wahrscheinlich aber weniger, daherkommen. Bei einem festen Seitenaufbau muss man mit einem solchen Gerät definitiv quer scrollen. Besser ist aber eine an solche Gegebenheiten angepasste Ausgabe der Webseite. Das Vorhalten mehrerer Versionen der Webseite für verschiedene Plattformen ist aber ineffektiv. Die Pflege mehrerer Angebote bedeutet einen hohen Aufwand, der sich nur in den allerseltendsten Fällen lohnt.

Warum Struktur und Inhalt trennen

Die Sprache HTML bietet, wie auch Textbearbeitungsprogramme, die Möglichkeit, die Struktur eines Dokuments zu beschreiben. Dazu gehören Überschriften (<h1><h1> bis <h6><h6>), Textabsätze (<p></p>) oder auch Listen (z. B.<ul></ul> (ungeordnete Liste), <ol></ol> (geordnete Liste mit Nummerierung)). Damit machen Sie einem Anzeigeprogramm, in den meisten Fällen einem graphischen Browser, den Aufbau einer Datei bekannt. Diese Elemente kennt jedes HTML-Anzeigeprogramm. Es gibt auch HTML-Elemente, die von einzelnen Anzeigeprogrammen nicht erkannt werden. Diese werden dann einfach ignoriert. Zu den Anzeigeprogrammen gehören aber auch Textbrowser, Braillezeilen und Vorleseprogramme für Sehbehinderte oder, wie oben schon erwähnt, auch PDA-Browser mit ihrem, gegenüber graphischen Browsern auf PCs, eingeschränkten Anzeigebereich.

Aber nicht nur Ihr Browser/Anzeigeprogramm benutzt diese Elemente, um Ihnen die Webseite, die Sie aufgerufen haben, darzustellen. Auch Suchmaschinenroboter nutzen diese Strukturierung, um für die Suchmaschine relevanten Inhalt von Unwichtigem zu trennen. Diese Roboter durchforsten die Seiten des Internets nach Inhalten, die sie als Suchbegriffe in den Index der Suchmaschinen aufnehmen können. Sie richten sich dabei nach dem Titel der Seite (im <title>-Tag notiert), nach Überschriften und nach den Inhalten z. B. im Fließtext, in Listen oder auch Tabellen um die Häufigkeit und Relevanz potentieller Suchbegriffe einzuordnen.

Es ist daher durchaus sinnvoll, die Seiten Ihres Angebots daraufhin zu prüfen bzw. von vornherein so aufzubauen, dass sie einerseits auf allen HTML-Anzeigeprogrammen dargestellt, andererseits optimal von den Suchmaschinenrobotern ausgewertet werden können. Dazu sollten die HTML-Dateien valide sein. Dies heißt, dass sei dem jeweiligen Sprachstandard, je nach HTML-Version, entsprechen. Der Sprachstandard wird allgemeinverbindlich vom W3C festgelegt und für das Dokument mit dem DOCTYPE angegeben.

Beispiel 1

So sieht das folgende Beispiel aus

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Beispiel 1</title>
</head>
<body>
<h1>Überschrift erster Ordnung</h1>
<h2>Überschrift zweiter Ordnung</h2>
<p>Dies ist ein Textabsatz. Das HTML-Dokument wird ohne jegliche,
vorgegebene Formatierung ausgeliefert.
Es wird so angezeigt, wie es Ihr Browser vorsieht.</p>
<p>Ein zweiter Textabsatz. Die Anzeige erfolgt
in den Standardeinstellungen Ihres Browsers oder
nach den persönlichen Einstellungen,
die Sie in Ihrem Browser vorgenommen haben.</p>
<p>Diesem dritten Textabsatz folgt eine
undefinierte Liste mit zwei Listenpunkten.</p>
<ul>
 <li>erster Listenpunkt</li>
 <li>zweiter Listenpunkt</li>
</ul>
<p>Es erfolgt keine weitere, vom Autor der Seite
vorgegebene Formatierung.</p>
<p><a href="../struc_cont2.php#ex1">zurück zum Artikel</a></p>
</body>
</html>

Dies ist ein valides HTML-Dokument. Es enthält die notwendigen Angaben vor dem und im <head> der Datei, wie den DOCTYPE, den <title> und die Angabe des verwendeten Zeichensatzes. Weiterhin ist der Inhalt, der dem Benutzer dargebracht werden soll, innerhalb der dafür vorgesehenen Elemente notiert.

So unansehnlich der Inhalt in dieser Datei auch präsentiert wird, so wie sie jetzt ist, kann sie in jedem Programm, das HTML-Dateien wie auch immer darstellt, genutzt werden.

Oftmals (fast immer) ist jedoch ein «nicht gar so schlichtes» Design gewünscht. Elemente sollen z. B. mit einer bestimmten Farbe, Größe und an einer bestimmten Stelle angezeigt werden, und dies auf allen Seiten des Angebots. Damit soll ein Wiedererkennunseffekt erzielt werden, der die Seite unverwechselbar macht. Dies nennt man «corporate design».

Dies ist ein legitimer Anspruch des Betreibers der Website. Nicht selten kollidiert dieser Anspruch durch Vorgaben, die aus dem Printdesign stammen, jedoch mit der Verschiedenartigkeit der Anzeigeprogramme für HTML-Dateien. Da die allermeisten Betreiber einer Website nur die graphischen Browser kennen, möchten sie die Seiten so gestaltet wissen, wie sie es aus ihren Printmedien, wie Werbeprospekte, kennen. Denn sie selbst werden diese Seiten sehr wahrscheinlich nie mit einem anderen Programm als ihrem graphischen Browser betrachten.

Daher werden auch heute noch (2005) Seiten erstellt, deren Inhalt mit Frames oder Tabellen, ausschließlich «Graphikbrowsergerecht» in eine bestimmte Position gezwungen wird. Nun haben Tabellen unbestritten ihren Zweck, nämlich tabellarische Daten, beispielsweise einen Fahrplan, darzustellen. Sie sind aber nicht zur Positionierung und Ordnung von Inhalten einer Seite gedacht.

Auch Frames sind eine Technik, die bei der Erstellung von Webseiten mit Vorsicht zu genießen ist. Über die Vor- und Nachteile von Frames informieren Sie beispielsweise folgende Seiten:

Für die Positionierung von Elementen der Webseite, deren Größen- und Farbbestimmungen gibt es einen wesentlich besseren Weg: Stylesheets. Die hierzu am häufigsten verwendete Sprache ist CSS. Die deutsche Übersetzung des Begriffes «cascading stylesheet (CSS)» heißt «kaskadierende Stilvorlage». Es sagt aus, dass man mit Hilfe dieser Sprache Anweisungen zur Darstellung einer Datei geben kann. Das kaskadierende daran ist, dass sich eine Anweisung (in den allermeisten Fällen) auf die Kindelemente des formatierten Elements auswirkt. Diese Angabe kann jedoch, falls erwünscht und/oder erforderlich, für einzelne Elemente mit der Angabe eines anderen Wertes außer Kraft gesetzt werden.

Das bedeutet am Beispiel der Angabe zur Schriftart, dass diese Angabe, auf den <body> der HTML-Datei angewandt, auch für alle Überschriften, Textabsätze, Listen, Tabellen etc. gilt, die sich innerhalb des <body> befinden. Die Angabe wird vom <body> auf seine Kindelemente, Überschriften, Textabsätze, Listen, Tabellen etc., vererbt.

Beispiel 2

Um dies zu verdeutlichen, statten wir das obige Beispiel einer HTML-Datei mit Anweisungen zur Formatierung des Textes aus. Die CSS-Anweisungen sind im Kopf der HTML-Datei notiert. Da die Texte aus dem obigen Beispiel verwirren könnten, wurden sie angepasst.

So sieht das folgende Beispiel aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Beispiel 2</title>
<style type="text/css">
<!--
body {
font-family:Verdana,Arial,Tahoma,Helvetica,sans-serif;
color:#006;
font-size:100.01%;
}
h1 { font-size:3.2em; font-style:italic; }
h2 { font-size:2.4em; }
p,ul,li { font-size:1em; }
-->
</style>
</head>
<body>
<h1>Überschrift erster Ordnung</h1>
<h2>Überschrift zweiter Ordnung</h2>
<p>Dies ist ein Textabsatz. Das HTML-Dokument wird mit
einigen wenigen Formatierungen ausgeliefert.</p>
<p>Es wurden Angaben zu Schriftart, -größe
und -farbe gemacht.</p>
<p>Diesem dritten Textabsatz folgt eine
undefinierte Liste mit zwei Listenpunkten.</p>
<ul>
 <li>erster Listenpunkt</li>
 <li>zweiter Listenpunkt</li>
</ul>
<p>Die Angaben zur Formatierung der Schrift, wurden
im &lt;head&gt; der Datei notiert.</p>
<p><a href="../struc_cont2.php#ex2">
zurück zum Artikel</a></p>
</body>
</html>

Zuerst wird das Element <body> formatiert. Ihm werden Angaben zur Schriftfamilie, zur Schriftfarbe und zur Schriftgröße zugewiesen. Danach werden den Überschriften, Textabsätzen und Listen Schriftgrößen zugewiesen. Speziell<h1> wird außerdem noch der Schriftstil kursiv (italic) zugewiesen. Die Angabe der Schriftgröße von 100.01% für das HTML-Element <body> wirkt einem Bug des MS Internet Explorer entgegen.

An der verwandten Schriftfarbe und -art können wir ersehen, dass die Angabe, die für den <body> angewiesen wurde, auch für seine Kindelemente gilt.

Man kann aber nicht nur die Schrift formatieren oder Farben festlegen. CSS kann weitaus mehr. Von der Positionierung von Elementen und Elementgruppen auf der Anzeige eines graphischen Browsers, über die Ausblendung von Logo und Navigation beim Ausdruck eines HTML-Dokuments bis zur Festlegung der Betonung bei Ausgabe des Dokuments über ein Programm, das die Datei dem Benutzer vorliest.

Für all diese Anwendungsfälle kann man separate Sätze von Anweisungen hinterlegen. Es kommt dann nur noch darauf an, dass die Benutzerprogramme mit den Stylesheets umgehen können.

Schlussfolgerungen

Genau diese Vielfältigkeit ist es, die die Stärke von HTML in Verbindung mit CSS ausmacht. Nur ein Dokument, welches mit seinem Inhalt die Information bereitstellt, aber eine Vielzahl möglicher Ausgabemedien, die mittels CSS spezielle zusätzliche Anweisungen zur Interpretation der Information erhalten.

So toll die Möglichkeiten von CSS klingen, es sind einige gedankliche Vorarbeiten notwendig. Ein <body background="..."> um Hintergrundfarbe oder -bild festzulegen ist tabu. Auch Stylesheets, die direkt im betreffenden Element (<body style="background:...;">) notiert sind, stehen dem Konzept, das Layout der anzuzeigenden Datei von ihrer Struktur zu trennen, entgegen.

Womit wir beim Titel dieses Artikels wären. Trennen wir doch den Inhalt, der in der HTML-Datei enthalten ist, von den CSS-Anweisungen zur Darstellung dieses Inhalts. Und zwar vollständig! Der einfachste Weg dazu ist, die Informationen, die Sie anbieten wollen, in der HTML-Datei abzulegen und die CSS-Anweisungen in einer oder mehreren separaten Dateien zu lagern.

Dazu legen Sie im <head> ein oder mehrere <link>-Elemente an, in denen Sie die CSS-Dateien referenzieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel 2</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/all.css" type="text/css">
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/pda.css" type="text/css" media="handheld">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
</head>
<!-- hier der body -->

Die Angaben zur Formatierung der Ausgabe werden in mehrere Dateien verteilt. Die erste verlinkte CSS-Datei (all.css) nimmt Angaben auf, die für alle Ausgabemedien gelten. Die folgenden Dateien beinhalten Angaben zur Ausgabe am Monitor media="screen", auf dem PDA media="handheld" und zum Druck der Datei media="print".

Lesenswertes zum Einbinden von CSS-Dateien, zu den unterschiedlichen Angaben für media und den Möglichkeiten, mit den Einbindungsarten für CSS-Dateien verschiedene Browser mit unterschiedlichen Angaben zu beliefern.

(*) Das Ausschließen älterer Browser mittels CSS-Angaben funktioniert auf der Grundlage unterschiedlicher Fähigkeiten der Browser, mit CSS umzugehen. Diese (Un)Fähigkeiten sind bekannt, und können daher verlässlicher angewandt werden, als JavaScript- oder serverseitige Browserweichen.

Einem Besucher einer Website könnte JavaScript nicht zur Verfügung stehen (abgeschaltet, nicht installiert (häufig in Firmennetzwerken)). Serverseitige Techniken versuchen, aus den Angaben, die der Browser des Besuchers beim Aufruf einer Datei mitsendet, auf den Typ des Browsers zu schließen. Diese Angaben können allerdings fehlen oder durch den Benutzer oder einen Proxyserver verändert worden sein.
Daher sind solche Methoden nicht annähernd 100%-ig verlässlich.

... aber dies ist eine andere Baustelle.