HTML-Layout

Wie wird HTML dargestellt wenn kein Styling vorhanden ist?

Jeder Browser hat für die verschiedenen HTML-Elemente Standard-Formatierungen vorgesehen. Diese sind sehr einfach gehalten, strukturieren ein Textdokument aber auf einfache Weise.

• Ein Titel ist grösser als normaler Text und fett
• ein Titel 2. Ordnung (h2) immer noch grösser aber nicht so gross wie der Haupttitel (h1)
• Ein Absatz hat einen Abstand zum nächsten Element
• ein Listenelement wird mit einem Punkt und einer Einrückung dargestellt.
• Usw.

Block- und Inline-Elemente

HTML ist zwar nicht für das Styling einer Webseite verantwortlich, trotzdem sind in HTML bereits einige wichtige Layout-Konzepte festgelegt, auf die wir immer wieder treffen werden. Deshalb ist es wichtig, diese zu verstehen. Wer sie für sich nutzt, wird einfacher Webseiten erstellen können, als wenn man versucht gegen sie zu arbeiten.

Kästchen

Allgemein gesagt:
Webseiten bestehen aus rechteckigen Kästchen, die im Browserfenster dargestellt werden.

Alles ist ein rechteckiges Kästchen. Ohne Styling werden die Kästchen von links nach rechts, von oben nach unten aneinandergereicht. Mit Styling auch übereinander-, nebeneinander- und ineinandergestapelt.

Block-Elemente

Die ersten Kästchen die wir kennenlernen, sind Block-Elemente. Block-Elemente nehmen die ganze Bildschirmbreite ein, der nächste Inhalt nach einem Block kommt auf die nächste Zeile.

Block-Elemente sind alle Titel (h1, h2, ...), Paragraphen (p), Listen (ul) und das Block-Element ohne semantische Bedeutung, die Division (div).

Inline-Elemente

In jedem Block-Element fliesst der Text von links nach rechts und bricht dann auf die nächste Zeile um.

Auch inline kann man Elemente markieren. Zu den Inline-Elementen gehören: Link (a), Hervorhebung (em) und allgemein span (span).

Zum Unterschied zwischen Block- und Inline-Elemente diese Beispiele:

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

HTML-Elemente können verschachtelt werden, in einem Block kann es einen weiteren Block haben und in einem Inline-Element wieder ein Inline-Element. Aber Inline-Elemente dürfen keine Block-Elemente mehr enthalten. Mit Ausnahme des Link-Elementes, da das so praktisch ist, darf es auch um ganze Blöcke herum gesetzt werden.

Andere wichtige HTML-Eigenschaften

Whitespace

Im HTML-Code kann man so viele Whitespaces (Leerzeichen, Zeilenumbruch, Tabulator) verwenden wie man möchte. Diese werden nicht dargestellt. Sie werden jeweils zusammengefasst zu einem einzelnen Leerzeichen. Das ermöglicht den Quelltext übersichtlich zu strukturieren.

Fensterbreite

HTML-Inhalte werden so breit wie das Browserfenster breit ist. Das gilt solange wie kein anderes Styling definiert ist und kein Inhalt breiter ist als das Browserfenster. (Hat man ein überlanges Wort oder ein Bild in voller Grösse, so wird dem Fenster ein horizontaler Scrollbalken hinzugefügt.)

Hat ein Block viel Inhalt und das Fenster wird kleiner, bricht der Inhalt um und der Block wird in der Vertikalen länger.

Zu den Anfangszeiten des WWW ging man davon aus, dass der Leser sein Browserfenster so klein einstellt, dass der Text gut gelesen werden kann. Heute gibt man Fliesstext meistens eine Maximalbreite, damit er in jedem Fenster gut lesbar bleibt. (Wikipedia ist eines bekanntes Beispiele für die alte Art Webseiten zu layouten)