HTML – Formatierung ohne CSS

HTML ohne Browser-CSS

Die Browser formatieren die Webseite ohne CSS nach der Vorgaben des Standards. Bevor CSS für das Design der Webseite sorgt: HTML ignoriert Leerzeichen und Zeilenumbrüche, rückt Listen ein, setzt einen Abstand zwischen Absätze und den Text in einer Serifenschrift, Text in Formularen in einer serifenfreien Schrift.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

CSS Reset

Das reine HTML ohne CSS soll die Seite strukturieren, aber die Browser zeigen leichte Abweichungen in der Darstellung. CSS-Dateien beginnen darum oft mit einem CSS-Reset, das die Unterschiede zwischen den mitgebrachten Browser-Stilen ausbügelt.

Auch die Templates von Content Management Systemen wie WordPress beginnen meist mit einem CSS-Reset. Häufig verwendete CSS-Resets sind z.B.

Ein CSS Reset gilt heute im Wesentlichen älteren Browsern. Auch wenn man kein CSS-Reset einsetzt – es lohnt sich, einen Blick in Vorgaben zu werfen. Oft helfen schon die Kommentare, Zusammenhänge besser zu verstehen.

Abstände

Die Inhalte von Blockelementen halten einen kleinen Abstand voneinander – den margin. Wenn die HTML-Tags direkt im body-Tag des HTML-Dokuments liegen, sieht man zudem auch einen kleinen Margin zum Rand des Browserfensters. Die Inhalte von Inline-Tags hingegen weisen keinen margin gegenüber den sie umschließenden Texten auf. Bilder, die innerhalb eines Textes gesetzt werden, verhalten sich einfach wie übergroße Buchstaben und vergrößern den umfassenden Block.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu.

Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.

Inhalte von p-Tags werden ohne CSS von den meisten grafischen Browsern in der Schriftgröße 1 em (meistens 16 Pixel) in einer Serifenschrift (Times New Roman) gesetzt. Die Zeilenhöhe (meistens 18 Pixel) kann nur über CSS geändert werden. Der Benutzer kann die Schriftgröße durch den Zoom seines Browsers ändern.

Tabellen

Tabellen nehmen per Vorgabe nur den Platz ein, den ihre Inhalte brauchen. Tabellenzellen halten einen kleinen Abstand voneinander (border-spacing).

Tabellen nehmen zwar nicht unbedingt die gesamte Breite des umfassenden Blocks ein, aber sie erzeugen einen Zeilenumbruch vor dem öffnenden und nach dem schließenden table-Tag. Ohne Attribute und CSS-Eigenschaften weisen Tabellen keinen Rahmen und keinen Abstand der Inhalte von Tabellenzellen auf (kein padding).

Zeile 1 Spalte 1 Zeile 1 Spalte 2
Zeile 2 Spalte 1 Zeile 2 Spalte 2

HTML ul- und ol-Listen

HTML-Listen oder Aufzählungen in ul bzw. ol-Tags bestehen aus einer Box für die Listensymbole oder den numerischen Index und einem Block für den Text. Per Vorgabe sind die Listensymbole leicht eingerückt und sitzen nicht linksbündig.

  • Cras porta lobortis vel
  • Nam ut metus
  • Praesent vestibulum. Nam ante urna, facilisis ac, mattis non, convallis a, nisl. Nunc vestibulum magna quis turpis. Donec sit amet felis. Nam aliquet adipiscing quam. In hendrerit.

Leerzeichen und Zeilenumbrüche in HTML

Browser ignorieren aufeinanderfolgende Leerzeichen und Zeilenumbrüche im HTML-Code.

<p>Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.</p>

<p>Wer 
mehrere      Leerzeichen 
nacheinander            setzt, 
macht     was           
falsch.</p>

Die beiden HTML-Elemente werden im Browser gleich angezeigt:

Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.

Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.

Damit Leerzeichen und Zeilenumbrüche vom Browser angezeigt werden, kann der CSS-Stil white-space: pre; eingesetzt werden.

div und span: Elemente ohne Eigenschaften

Die zuvor beschriebenen HTML-Tags besitzen „angeborene“ Eigenschaften für die Darstellung im Browserfenster. p-Elemente erzeugen einen kleinen Abstand (margin) vor und nach dem p-Tag, ul- und ol-Tags besitzen ebenfalls diesen führenden und abschließenden Margin und darüber hinaus bringen sie Auflistungszeichen oder einen Index mit. Zwei besondere Tags sind das div-Tag und das span-Tag: Sie sind Tags ohne Eigenschaften.

Sie sind für die Gestaltung von HTML-Elementen durch Stylesheets gedacht, ohne dass der Browser eigene Formatierungen einbringt. Das div-Tag ist ein Block-Tag, das span-Tag ein Inline-Tag. Ohne weitere Formatierung führt auch das div-Tag zu einem Zeilenvorschub, während Text in einem span-Tag ohne besondere Auszeichnung innerhalb der Textzeile dargestellt wird.

Abweichungen bei Formularfeldern

Hier sind die Unterschiede zwischen den Browsern am deutlichsten und gleichzeitig aufwändiger bei der Egalisierung, denn die Browser greifen auf die Elemente des Betriebssystems zurück.

Suchfelder
Suchfeld in verschiedenen Browsern