Logische und Physische Formatierung


Physische contra logische Textformatierung in HTML
Was verbirgt sich hinter der logischen und was hinter der physischen Formatierung? Warum benötigt man beide Formatierungen, wenn sie doch den gleichen Effekt auslösen? Gehen Sie mit uns in die Geschichte von HTML und lernen Sie wichtige Schwerpunkte bei der Gestaltung von Webseiten kennen.
HTML bietet die Möglichkeit Texte in verschiedenen Schriftstilen darzustellen. Dabei wird zwischen logischen und physischen Formatierungsstilen unterschieden. In der Praxis werden beide Formen heutzutage nebeneinander eingesetzt, ohne dass man sich überhaupt eines konzeptionellen Unterschiedes beider Formatierungen bewusst ist. Um den Unterschied beider Formen zu verstehen, muss man sich zunächst Gedanken darüber machen, dass Hardware und Software (alleine durch die Verwendung eines anderen Browsers) bei jedem Betrachter eines HTML-Dokuments unterschiedlich ausfallen. In den Anfängen von HTML war es sogar in Firmen üblich nur die textorientierte, nicht grafikfähige Abfrage von Dokumenten zu erlauben. Damit einher ging oft das Manko, Text weder fett, noch kursiv gedruckt darstellen zu können. In der ursprünglichen Version 1.0 war HTML deshalb ausschließlich unter Benutzung nicht-physischer Formatierungsoptionen konzipiert worden. Somit war es dem anzeigenden Programm selbst freigestellt die Darstellungen der unterschiedlichen Formatierungen zu entscheiden. Dies ist genau der Unterschied zwischen logischer und physischer Formatierung. Bei logischen Formatierungen überlassen wir die Interpretation der Darstellung unserem Browser. So können Sie in den Einstellungen der meisten Browser auch einen Einfluss auf die Interpretation der entsprechenden HTML-Tags nehmen. Zu den logischen Formatierungen zählen folgende HTML-Tags:

001:
002:
 <cite> ... </cite>
 <q cite="Quelle"> ... </q>

Mit dieser Formatierung zeichnen Sie einen Text als Zitat aus. Verwenden Sie die zweite Form um im Attribut „cite“ eine Quellenangabe zu tätigen.

001:
 <code> ... </code>

Dieser HTML-Tag eignet sich zur Darstellung von Computer-Code. Ein Text mit dieser Formatierung wird üblicherweise in einer Schrift mit fester Breite dargestellt.

001:
 <dfn> ... </dfn>

Der Tag <dfn> markiert eine Definition und wird in den meisten Browsers kursiv dargestellt.

001:
 <em> ... </em>

Zum hervorheben von Textpassagen eignet sich der <em>-Tag. Zur Darstellung wird meist der Text kursiv ausgegeben.

001:
 <kbd> ... </kbd>

Dieser Tag steht für Tastatureingaben und wird üblicherweise fett und wiederum in einer proportionalen Schrift dargestellt.

001:
 <samp> ... </samp>

Die HTML-Anweisung <samp> steht für „Sample“ (dt. Beispiel) und eignet entsprechend zur Ausgabe von Beispielen. Texte, die mit diesem HTML-Tag formatiert werden, erhalten üblicherweise eine Schrift mit fester Breite.

001:
 <strong> ... </strong>

Dieser HTML-Tag eignet sich zum Hervorheben von Texten und wird meist durch Fettschrift interpretiert.

001:
 <var> ... </var>

Mit dem <var>-Tag markieren Sie ein Wort als Variable und erzeugen einen üblicherweise kursiven Text.


Wenn Sie bereits HTML-Erfahrung besitzen, dann werden Ihnen die meisten physischen Formatierungen bekannt vorkommen. Zu ihnen zählen <i> für kursiven, <b> für dicken, <u> für unterstrichenen, <s> oder <strike> für durchgestrichenen oder auch <blink> für blinkenden Text. Nicht so bekannt sind die HTML-Anweisungen <big> um einen Text relativ zur Umgebung größer darzustellen, <small> um demgegenüber einen Text kleiner anzuzeigen, sowie <sub> für tief- und <sup> für hochgestellten Text. Beispiele für alle Formatierungen können Sie der Zip-Datei im Anschluss des Artikels entnehmen.

Wie bereits erwähnt, hängt die genaue Darstellung bei logischen Formatierungen überwiegend von Ihrem Browser ab. Und dies sollten Sie stets beachten. HTML ist eine Sprache zur Beschreibung von logischen Strukturen und kein Medium zur exakten Seitenbeschreibung. Was bei Ihnen korrekt dargestellt wird muss bei ihrem Nachbarn noch lange nicht gut aussehen. Nicht nur aus diesem Grund sollten Sie bei der Gestaltung einer Webseite stets die Darstellung in mehreren Browsern überprüfen. Ein beabsichtigter optischer Effekt kann in einem anderen Browser schon wieder ganz anders aussehen. Leider gilt diese Maxime nicht nur für die Textformatierung. Mitunter reicht ein anderer Bildschirm oder eine andere Grafikauflösung aus und die gewünschte Darstellung wird nicht mehr erzielt.


Beispieldatei herunterladen: [download=Logische_und_physische_Formatierung.zip]