XML-Know How

HTML – Das Prinzip

Das Grundgerüst einer XHTML-Datei ist immer gleich: Das Wurzelelement lautet stets <html>, gefolgt von zwei Toplevel-Elementen (den Elementen direkt unterhalb des Wurzelelements) <head> und <body>.

Das Grundgerüst einer HTML-Datei

<html>

<head>

(…)

</head>

<body>

(…)

</body>

</html>

Im <head> finden sich sämtliche Metadaten zur jeweiligen HTML-Seite – etwa Angaben über den Autor, Schlüsselbegriffe für die bessere Auffindbarkeit in Suchmaschinen oder auch die Verknüpfung mit externen Formatierungsregeln, sogenannten CSS-Stylesheets. Im <body> hingegen steht der eigentliche Text, der zur Veröffentlichung vorgesehen ist. Gemäß der HTML-DTD stehen innerhalb von <body> nun ca. 60 Elemente für die Strukturierung und Formatierung der Inhalte zur Verfügung, so z. B. <h1> für »Überschrift Stufe1« (heading 1), <p> für Absatz (paragraph), <table> für Tabellen etc.

Um das Kochbuch aus unserem Beispiel im Web zu veröffentlichen, würde der Code etwa wie folgt aussehen:

Beispiel:

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Mein erstes Rezeptbuch</title>

</head>

<body>

<h1>Huhn mit Rosmarinkartoffeln</h1>

<img src="huhn.jpg" alt="huhn"/>

<h2>Zutaten</h2>

<p>1 frisches Huhn</p>

(…)

<h1>Selleriesuppe</h1>

<img src="sellerie.jpg" alt="sellerie"/>

<h2>Zutaten</h2>

<p>1 Bund Sellerie</p>

</body>

</html>

Die entsprechende Seite, im Browser dargestellt, sieht dann folgendermaßen aus:

Abb. 28 Darstellung der HTML-Seite ohne eigene Formatierungsangaben in einem Browser

Diese Website wirkt noch »unformatiert«, und in der Tat haben wir noch keinerlei Angaben zur Formatierung der Überschriften, Absätze etc. gemacht. Dennoch ist aber eine gewisse Formatierung vorhanden: Die Überschriften werden bereits in anderer Schriftgröße dargestellt als der Grundtext, der Text wird in einer bestimmten Schriftart angezeigt etc.

Regelbasierte Formatierung
im Browser

Wie kann das sein? Mit der Beantwortung dieser Frage haben wir ein ganz entscheidendes Grundprinzip des elektronischen Publizierens erkannt – das Prinzip der regelbasierten Formatierung bei einem Layout, das abhängig vom Ausgabegerät ist. Für das Verständnis dessen müssen wir uns hier von allem lösen, was wir aus der Druckvorstufe in der Printproduktion kennen: Im Druckprozess gibt es stets vor Beginn der Auflagenproduktion ein definiertes, feststehendes und freigegebenes Layout – in der Regel in Form einer PDF-Datei. Im Druckprozess entstehen untereinander identische Kopien; ist das Layout in einem Exemplar korrekt, ist es in allen Exemplaren korrekt. Dieses Prinzip wird beim Publizieren auf Basis von HTML umgekehrt: ein feststehendes Layout zu veröffentlichen ist in der Regel nicht möglich, da im Vorfeld nicht bekannt ist, auf welchem Gerät die HTML-Seite dargestellt werden wird. Der Text (und die anderen Elemente) einer HTML-Seite soll sich an die Bildschirmauflösung, -größe, Art des Lesegeräts etc. anpassen. Die eigentliche Formatierung einer Webseite oder auch einer E-Book-Seite geschieht also erst im Browser, und zwar erst zu dem Zeitpunkt, wo die Seite am Bildschirm aufgebaut wird. Es werden also nicht fertig formatierte Seiten an den Browser übertragen, vielmehr agiert der Browser wie ein kleines »Online-Satzsystem«, indem er eine streng regelbasierte Formatierung der Webseite vornimmt. Was der Online-Publisher also zur Verfügung stellen muss, sind die HTML-Seiten selbst und die Regeln, nach denen diese formatiert werden sollen.

Jeder Browser hat hinterlegte Standard-Formatierungsregeln

Da nun HTML ein weltweiter Standard ist, in dem die zulässigen Tags präzise und vollständig definiert sind, konnte auch für jedes Element eine »Standard-Basisformatierung« festgelegt werden. Diese ist in jedem gängigen Browser, Tablet-PC, Smartphone – und auch in jedem E-Book-Lesegerät – hinterlegt. Auch ohne eigene Angaben für die Formatierung erscheint der Text also bereits soweit formatiert, dass der Leser die Struktur der Seite problemlos erkennen kann: Überschriften, Absätze, Listen, Tabellen, Abbildungen – für all das gibt es eine Basisformatierung.

Diese Erkenntnis ist wichtig. Das Prinzip der Standardisierung der Struktur (nicht der Typographie!) von Bildschirmseiten ist die Grundlage des elektronischen Publizierens. Durch die hinterlegte Standard-Typographie wird sichergestellt, dass der publizierte Text auf jeden Fall lesbar bleibt und dass die wichtigsten Strukturen als solche erkannt werden können – selbst dann, wenn aus irgendwelchen Gründen die mitgelieferten Typographie-Angaben vom Ausgabegerät nicht umgesetzt werden können.

Merke: Die wichtigsten HTML-Elemente

<h1> … </h1>

Überschrift 1. Ordnung (heading)

<h6> … </h6>

Überschrift 6. Ordnung (heading)

<p> … </p>

Absatz (paragraph)

<br/>

Zeilenwechsel (line break)

<b> … </b>

fett (bold)

<strong> … </strong>

fett (strong emphasis, starke Betonung)

<i> … </i>

kursiv (italic)

<em> … </em>

kursiv (emphasis)

<u> … </u>

unterstrichen (underline)

<sub> … </sub>

Tiefstellung (subscript)

<sup> … </sup>

Hochstellung (superscript)

<hr/>

waagrechte Linie (horizontal ruler)

<a name="ziel1">

benannter Verweis – Anker (anchor)

<a href="http://www.xyz.de"> … </a>

Link auf externe Website (anchor)

<a href="datei1.htm"> … </a>

Link auf interne Datei (anchor)

<ul> … </ul>

ungeordnete Liste (unordered list)

<ol> … </ol>

geordnete Liste (ordered list)

<li> … </li>

Listenpunkte (list item)

<img src="xxx.jpg"/>

Abbildungsaufruf (image)

<table> … </table>

Tabelle

<tr> … </tr>

Tabellenzeile (table row)

<td> … </td>

Tabellenzelle (table data)

<thead> … </thead>

Tabellenkopf (table head)

<tfoot> … </tfoot>

Tabellenfuß (table foot)