Das Beispiel im Browser
Wenn Sie einen Texteditor zur Erstellung von HTML-Dokumenten verwenden, oder wenn Sie mit Hilfe einer Script- oder Programmiersprache HTML-Code generieren, sollten Sie die nachfolgenden Regeln kennen.
Unter Whitespace wird Leerraum verstanden, der in der Regel zur optisch besseren Lesbarkeit des Quelltextes eingefügt wird. Whitespace besteht aus einfachen Leerzeichen, Tabulatorzeichen und den Zeichen zum Zeilenumbruch. Ein typisches Quelltextbeispiel von HTML:
<h1>Überschrift</h1> <p>Hier ein Absatz mit Text</p> <ul> <li>Ein Listenpunkt</li> <li>Noch einer</li> </ul>
Das alles könnte man auch so notieren:
<h1>Überschrift</h1><p>Hier ein Absatz mit Text</p> <ul><li>Ein Listenpunkt</li><li>Noch einer</li></ul>
Im Web-Browser sehen beide Arten den Quelltext zu notieren gleich aus. Die erste Variante ist jedoch für Menschen besser les- und editierbar. Die zweite spart dafür ein paar Bytes. Gewöhnen Sie sich beim manuellen Bearbeiten von HTML aber unbedingt die lesbare Variante an. Zum Einsparen von Bytes gibt es andere, effizientere Verfahren, etwa das gezippte Übertragen von Daten vom Webserver an den Web-Browser.
Die Grundregel für HTML-Parser lautet: Fasse mehrere Whitespace-Zeichen in Folge zu einem Leerzeichen zusammen. Wenn Sie also zwischen zwei Wörtern drei Leerzeichen und drei Absatzschaltungen eingeben, stehen die Wörter bei der Ausgabe im Browser durch ein Leerzeichen getrennt nebeneinander. Absatzschaltungen und Tabulatoren werden in HTML per Default nicht umgesetzt.
Eine Absatzschaltung oder ein Tabulator wird beim Parsen in ein Leerzeichen umgewandelt. Deshalb müssen Sie, um in HTML einen Zeilenumbruch zu erzwingen oder einen neuen Absatz zu beginnen, entsprechende Elemente notieren. Um Absätze im Text zu trennen, notieren Sie sogenannte Block-Elemente (Elemente, die eine neue Zeile im Textfluss erzeugen) wie z.B. <h1>…</h1> oder <p>…</p>. Um einen einzelnen Zeilenumbruch an einer bestimmten Stelle zu erzwingen, steht das Standalone-Element <br> zur Verfügung.
Whitespace-Zeichen am Anfang eines Elementinhalts werden vom HTML-Parser entfernt. Beispiel:
<p>dieser Text fängt im Browser genauso weit vorne an wie...</p> <p> dieser Text</p>
Das Leerzeichen, das am Beginn des zweiten Textabsatzes notiert ist, wird vom HTML-Parser ignoriert.
Diese Default-Verhaltensweisen von HTML-Parsern sind für die meisten Fälle praktisch, manchmal jedoch unerwünscht. Für diese Fälle gibt es Lösungen. Um etwa ein Leerzeichen zu erwzingen, wo der HTML-Parser normalerweise Leerzeichen ignoriert oder zusammenfasst, können Sie geschützte Leerzeichen notieren. Eine Möglichkeit, dies zu tun, ist die Verwendung der entsprechenden HTML-Entity. Notieren Sie im Quelltext an der gewünschten Stelle einfach die Zeichenfolge — dadurch wird in jedem Fall ein Leerzeichen gesetzt. Beispiel:
<p>dieser Text fängt im Browser weiter vorne an als...</p> <p> dieser Text</p>
Durch mehrere in Folge können Sie auch mehrere Leerzeichen hintereinander erzwingen.
Um Text so wie im Editor eingegeben im Web-Browser wiederzugeben, stellt HTML ein spezielles Element zur Verfügung — das Element für präformatierten Text („Text wie zuvor formatiert“). Beispiel:
<pre> Kanon nonaK Kanon nonaK Kanon nonaK Kanon nonak </pre>
In dem Beispiel sorgt das Einschließen in <pre> … </pre> dafür, dass der Elementinhalt im Browser so ausgegeben wird wie im Editor eingegeben. Allerdings verwenden die Browser dabei üblicherweise eine dicktengleiche Schrift, wie z.B. Courier. Mit Hilfe von CSS können Sie auch andere Schriften erzwingen. Ferner können Sie mit Hilfe von CSS die Eigenschaft „präformatiert“ auch anderen HTML-Elementen zuweisen.
Zunächst einmal werden alle Zeichen, die in einem HTML-Dokument notiert sind, vom HTML-Parser analysiert — man spricht dabei von interpretierten Zeichendaten (englisch: parsed character data, oder abgekürzt: PCDATA). Es gibt jedoch Elemente, deren Inhalt vom HTML-Parser nicht analysiert werden. Dazu gehören beispielsweise Bereiche mit JavaScripts oder CSS-Stylesheets. Beispiel:
<p>Dieser Inhalt wird vom HTML-Parser analysiert, weshalb <strong>das hier hervorgehoben wird</strong>.</p> <script type="text/javascript"> // hier kann alles stehen, etwa auch <strong>so etwas</strong> // oder so etwas: </script>
Der Inhalt des script-Elements besteht aus Sicht von HTML aus reinen Zeichendaten (englisch: character data, oder abgekürzt: CDATA), die nicht weiter interpretiert werden. Im Fall von Script- und Style-Elementen werden die Elementinhalte von HTML auch gar nicht im Browser ausgegeben.
Auch Wertzuweisungen an Attribute sind aus HTML-Sicht CDATA. Beispiel:
<p title="Nehmen Sie diesen Abschnitt ernst!">Wichtiger Text</p>
HTML-Elemente können ein title-Attribut erhalten, in dem beispielsweise erläuternder Text notiert werden kann. In modernen Browsern werden die Inhalte von title-Attributen als Tooltipp-Popups angezeigt, sobald sich der Mauscursor über dem Inhalt des Elements befindet.
Ein Spezialfall stellen sogenannte „ersetzte“ Zeichendaten dar (englisch: replaced character data, oder abgekürzt: RCDATA). Beispiel:
<textarea>Dies ist der <strong> vordefinierte </strong> Inhalt eines mehrzeiligen Eingabebereichs in einem Formular.</textarea>
Der Inhalt eines textarea-Elements in einem Formular soll von einem Web-Browser als vorbelegter Text des Eingabebereichs interpretiert werden. Dabei wird das <strong>…</strong> nicht interpretiert. Sogenannte Entities, im Beispiel die -Zeichenfolgen, werden dagegen interpretiert. Das ist die Besonderheit bei RCDATA.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.