HTML- Block und Inline-Elemente

Kategorie: HTML

Es gibt in HTML zwei grundsätzliche Arten von Elementen: Block und Inline-Elemente. Beide Arten von Elementen haben unterschiedliche Eigenschaften. Die Kenntnis dieser Eigenschaften ist die Grundlage für einen korrekten HTML-Code und gleichzeitig die Lösung für viele auftretende Webdesign-Probleme.

Block-Elemente

Block-Elemente dehnen sich immer über die ganze Zeile/Bildschirmbreite aus. Nachfolgende Elemente beginnen daher immer in der nächsten Zeile. Beispiele für Block-Elemente sind:

  • p
  • div
  • Überschriften h1 bis h6

Zwei Absätze p werden daher immer untereinander angezeigt und beanspruchen immer die ganze Breite, egal wieviel Text im jeweiligen Absatz steht.

<p>Absatz 1</p>
<p>Absatz 2</p>
<p>
Absatz 3. Mit mehr Text. Lorem ipsum dolor sit amet, consetetur sadipscing 
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. 
</p>

Absatz 1

Absatz 2

Absatz 3. Mit mehr Text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Genauso steht eine Überschrift immer automatisch über dem restlichen Text und geht über die ganze Zeilenbreite und div-Elemente werden ohne zusätzlichen CSS- Code standardmäßig untereinander angezeigt.

Inline-Elemente

Inline-Elemente sind immer nur so breit wie ihr Inhalt, es wird daher auch kein Zeilenumbruch erzeugt, solange die Breite der Zeile ausreicht, um mehrere Inline-Elemente nebeinander zu positionieren.
Zu der Kategorie der Inline-Element gehören beispielsweise:

  • span
  • strong
  • a
  • img
<span>Inline-Element 1</span> 
<span>2</span>
<span>breiteres Inline-Element 3</span>

Inline-Element 1 2 breiteres Inline-Element 3

Beispiel zur Verdeutlichung

Wenn ich ein Bild habe und möchte, dass die Bildunterschrift immer unter dem Bild steht, muss ich bedenken, dass das img-Element ein Inline-Element ist und daher die Bildunterschrift nicht automatisch unter dem Bild steht, weil das img-Element keinen Zeilenumbruch erzeugt und sich auch nicht über die ganze Breite ausdehnt.

Möglichkeit 1: 2 Inline-Elemente

Wird im Quellcode nach dem img-Tag ein span-Tag mit der Bildunterschrift eingefügt, so rückt diese Unterschrift nicht automatisch unter das Bild, weil beides Inline-Elemente sind.

<img src="mein_foto.jpg"/>
<span>Bildunterschrift</span>
Bildunterschrift

Möglichkeit 2: Bildunterschrift in einem Block-Element

Wird die Bildunterschrift in einem Block-Element, beispielsweise einen Absatz p, eingefügt rückt diese Unterschrift, wegen der block-Eigenschaften von p, immer unter das Bild.

<img src="mein_foto.jpg"/>
<p>Bildunterschrift</p>

Bildunterschrift

Möglichkeit 3: Inline-Element in einem Block-Element verschachteln

Inline-Elemente können in Block-Elemente verschachtelt werden, während es umgekehrt nicht möglich ist. Daher kann man das img-element einfach in einen div-Container packen und das Bild beansprucht die ganze Breite und erzeugt einen Zeilenumbruch, selbst wenn die Bildunterschrift in einem Inline-Tag steht.

<div>
<img src="mein_foto.jpg"/>
</div>
<span>Bildunterschrift</span>

Bildunterschrift

Möglichkeit 4: Inline-Element mit display:block umwandeln

Inline-Elemente können durch den CSS-Befehl display:block in Block-Elemente umgewandelt werden und erhalten somit auch alle Eigenschaften von Block-Elementen. Wird das img-Element mit der CSS-Klasse block_image in ein Block-Element umgewandelt, steht der folgende Text immer unter dem Bild.

<img src="mein_foto.jpg" class="block_image"/>
<span>Bildunterschrift</span>

Im CSS-Code:

.block_image{
display:block;
}
Bildunterschrift

Verwandte Beiträge

HTML Tipps: Elemente zur Textformatierung

Die HTML-Elemente mit denen Textabschnitte kursiv oder fett ausgezeichnet werden können sind allgemein bekannt. Es gibt jedoch auch einige weniger bekannte Elemente mit denen Textelemente formatiert werden können. Inhalt HTML weiterlesen

HTML Tipps für besseren Quellcode

Der HTML-Quellcode einer Internetseite sollte übersichtlich, möglichst schmal und selbsterklärend sein. Ein übersichtlicher Quellcode kann leichter und vor allem schneller verändert werden. Je schmaler der Quellcode ist, umso geringer ist weiterlesen

Kontaktdaten auf der Homepage mit HTML

Auf jeder gewerblichen Webseite befinden sich die Adressdaten der Firma, zu der die Webseite gehört. Die Daten können auf verschiedene Weise durch HTML-Code dargestellt werden. Im folgenden Artikel wird kurz weiterlesen