Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
3.4 Über Block- und Inline-Elemente
Wie Sie bereits gesehen haben, gibt es verschiedene Arten von HTML-Elementen, die sich unterschiedlich verhalten. Die beiden wichtigsten sind Block- und Inline-Elemente.
Block-Elemente werden so breit, wie es geht
Block-Elemente ähneln Absatzformaten in Word:
- Der Kasten eines Block-Elements wird automatisch so breit, wie es geht.
- Nachfolgende Elemente stehen unterhalb des Kastens in der nächsten Zeile.
Block-Elemente enthalten normalen Text, Inline-Elemente und manchmal auch andere Block-Elemente. Beispiele für Block-Elemente sind die Überschriften h1 bis h6, Fließtextabsätze mit p sowie die Listenelemente ul, ol und li, die Sie im Buch ab Seite 67 kennen lernen.
Inline-Elemente werden nur so breit wie ihr Inhalt
Inline-Elemente ähneln den Zeichenformaten aus Word:
- Der Kasten eines Inline-Elements wird nur so breit wie sein Inhalt.
- Nachfolgender Text fließt direkt nach dem Element weiter.
Inline-Elemente erzeugen keine neue Zeile und sind den Block-Elementen untergeordnet. Sie dürfen normalen Text und andere Inline- Elemente enthalten, aber keine Block-Elemente. Beispiele für Inline-Elemente sind strong und em sowie Hyperlinks (a) und Grafiken (img).
Block- und Inline-Elemente sichtbar machen
In Abbildung 3.2 sind die auf der Beispielseite bisher vorhandenen Block- und Inline-Elemente sichtbar gemacht worden und gekennzeichnet:
In der Abbildung sehen Sie sehr deutlich, dass Block-Elemente so breit werden, wie es geht, Inline-Elemente nur so breit wie ihr Inhalt.
Falls Sie Abbildung 3.2 bei sich im Browser nachbauen möchten, benötigen Sie zunächst das Firefox-Add-on Web Developer Toolbar. Nach der Installation führen Sie dann die folgenden Schritte aus:
- Aktivieren Sie in der Web Developer Toolbar im Menü HERVORHEBEN ganz unten die Option ELEMENTNAMEN BEIM HERVORHEBEN EINBLENDEN.
- Um Block-Elemente hervorzuheben, wählen Sie im selben Menü die Option BLOCK-LEVEL-ELEMENTE HERVORHEBEN.
- Zur Hervorhebung der Inline-Elemente rufen Sie die Option BENUTZERDEFINIERTE ELEMENTE HERVORHEBEN… auf und tragen dort die Namen der gewünschten Elemente (z. B. strong oder em) ein.