Stil mit {stil}

Sep 2008

Regeln für HTML- und XHTML-Seiten

Ob die Seite nun ein paar Fehler aufweist oder nicht – spielt das überhaupt eine Rolle? Wer schon einmal ein kompliziertes Layout in HTML gemeiselt hat, lernt schnell, dass ein valides HTML-Markup bei der Fehlersuche hilft und weiß einzuschätzen, mit welchen Mitteln ein Layout am besten umzusetzen ist.

Darüber hinaus setzt das gesamte DOM-Skripting auf sauber codiertes HTML.

HTML: Block und Inline

Die Verschachtelung von HTML-Tags spielt eine große Rolle bei der Strukturierung, der Formatierung und dem Layout von Webseiten und damit auch in vielen Skripten.

HTML-Tags dürfen ineinander verschachtelt werden – klar: Innerhalb eines p-Tags darf ein a-Tag liegen, in table-Tags liegen tr-Tags, in tr-Tags liegen td-Tags. In dieser Hinsicht lassen sich HTML-Tags in vier Grundtypen einteilen:

• Block | Tags zur Strukturierung von Texten und Daten wie h1, p und div erzeugen einen Zeilenumbruch und werden auch als „Blockelemente“ bezeichnet, da sie einen visuellen Block aufziehen. Einige Blockelemente können selber wieder Blockelemente enthalten, so z.B. das div-Element.
• Inline | Inlineelemente wie a und em erzeugen keinen Zeilenumbruch und dürfen keine Blockelemente enthalten. Insbesondere dürfen Inlineelemente nicht direkt innerhalb eines body- oder form-Elements liegen, sondern müssen immer innerhalb eines Blockelements liegen.
• Empty | Leere Elemente enthalten keine Inhalte, können aber über ihre Attribute darstellbare Inhalte anzeigen, die nicht im Dokument selber liegen (z.B. das img-Element). Zu den leeren Elementen zählen Inlineelemente wie img, aber auch Blockelemente wie br und hr.
• Flow | Flow-Elemente werden von Tags gebildet, die nur innerhalb von bestimmten Elementen einen Sinn ergeben – z.B. tr-Elemente (Tabellenreihen), die nur innerhalb eines table-Elements stehen und selber nur td- oder th-Tags enthalten dürfen.

Block-Elemente ohne CSS

Blockelemente belegen ohne Formatierung durch CSS immer die gesamte Breite des umfassenden Blocks – des HTML-Elements, in dem sie liegen. In den simplen Beispielen ist das body-Tag der Block, in dem die Elemente <h1>, <p>, <ul>, <ol> und <table> liegen. <a href="…">, <em>, <strong>, <img src="…" … /> und <code> hingegen sind Inline-Tags bzw. leere Tags.

Die Höhe eines Blocks wird durch seine Inhalte bestimmt.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ac enim. Integer mi. Aliquam id diam ut lectus laoreet blandit. Vivamus a ligula non velit molestie congue. Sed pulvinar sapien rutrum elit.

Dieser Block wird durch ein p-Tag gebildet. Wenn Bilder als Inline-Elemente ohne weitere CSS in den Text gesetzt werden, verhalten sie sich wie ein einzelner Buchstabe und vergrößern die Zeile, in der sie stehen.

• 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.

Browser zeichnen geordnete und ungeordnete Listen ohne CSS mit einem führenden Listensymbol aus. Das Listensymbol wird eingezogen und die Inhalte des li-Tags werden um den Einzug verlängert, wenn kein Stylesheet diese Darstellung verändert.

Tabellen erzeugen zwar einen Block im HTML-Dokument, aber anders als andere Block-Tags laufen Tabellen nicht über die gesamte Breite des umfassenden Blocks, sondern nehmen nur den Platz ein, den sie für die Darstellung der Inhalte brauchen.

Block-Tags

Die folgenden Tags können als Blocktags angesehen werden, da sie selber wieder Blocktags enthalten können:

Inline-Tags