TOC

This article is currently in the process of being translated into German (~91% done).

Einführung in HTML:

Block und Inline Elemente

Wir haben uns bereits einige HTML5 Elemente angeschaut, aus denen eine Webseite erzeugt wird. JEtzt ist es an der Zeit eine weitere Eigenschaft von HTML5 vorzustellen. Es gibt zwei verschiedene Typen von Elementen - als da wären Inline und Block Elemente. Ob ein Element ein Inline oder ein Block Element ist bestimmt wie ein Browser die Elemente deutet.

Block Elemente

Ein Block Element wird, wie der Name schon sagt als Block dargestellt. Das Block-Element ist so breit wie es maximal sein kann, ein Kasten der keine Zeilen umbricht. Höhe und Breite des Elements können eingestellt werden. Block Elemente können sowohl Inline Elemente als auch weitere Block Elemente beinhalten.

Inline Elemente

Inline Elemente werden als Teil der Formatierung des Dokumentes angesehen. Die Größe sollte im Normalfall nicht manuell angepasst werden. Ein Inline-Element kann nur weitere Inline-Elemente beinhalten. Und um es noch etwas verwirrender zu machen sind Inline Elemente das einzige was innerhalb eines paragraph - Elementes verwendet werden darf - und das obwohl das <p> -Element selbst ein Block Element ist.

Das <p></p> Element ist ein Block Element, wohingegen das <b> Element ein Inline-Element ist (b steht hier für bold, also fett und verändert die Darstellung eines Textes.)

Beispiele

Das meist genutzte Block Element ist das <div> Element ( div ist die Abkürzung von diversion, also Unterschied). Das <div> Element ist ein Block Element, dass dazu genutzt wird den Inhalt der Webseite in unterschiedliche Bereiche einzuteilen. Man stelle sich vor, man hat zwei Blog Einträge, die den aktuellen Eintrag beinhalten sowie einen Titel, den Namen und das Veröffentlichkeitsdatum. Das könnte etwa so aussehen:

Just Another Day
Written by Christina
On January 11th

This is my second blog entry, and I just wanted to check in on you

My First Blog Entry
Written by Christina
On January 10th

I’m so happy to write my first blog entry – yay!

Wie man sehen kann gibt es zwei Blog Einträge die unter Verwendung eines Block-Elements getrennt werden. In diesem Fall ein <div> Element. Innerhalb des Block Elements ist ein weiteres Block Element, der paragraph (<p>). Wenn man nur das nötigste zur Formatierung verwendet sieht der HTML Teil für die Webseite so aus:

<!DOCTYPE html>
<html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<div>
		<p>Just Another Day<br />
		Written by Christina<br />
		On January 11th
		</p>
		<p>This is my second blog entry, and I just wanted to check in on you
		</p>
	</div>
	<div>
		<p>My First Blog Entry<br />
		Written by Christina<br />
		On January 10th
		</p>
		<p>
		I’m so happy to write my first blog entry – yay!
		</p>
	<div>
</body>
</html>

Das <div> Element wird genutzt um die beiden Blog Einträge von einander zu trennen. Innerhalb jedes <div> Elements gibt es zwei Absätze (paragraphs) die Titel & Author und den eigentlichen Eintrag beinhalten.

Das <div> Element wird zumeist als Container verwendet der Formatierungen auf der Webseite darstellen kann. Es gibt die Einschränkung, dass ein <div> Element einem nicht sagt welchen Inhalt es darstellt. Es dient aber dem Browser dazu festzustellen, das ein neuer Abschnitt beginnt, aber nicht was für ein Inhalt darin enthalten ist. In HTML5 werden viele neue Elemente vorgestellt und einige davon werden auch dazu genutzt das <div> Element zu ersetzen - seht euch dazu auch den Artikel zu den neuen semantischen Elementen an um tiefer einzusteigen.

Eingebettete Elemente wurden bereits vorher schon einmal angesprochen und tatsächlich ist das <p> Element das innerhalb des <div> Elements verwendet wird ein gutes Beispiel für ein eingebettetes Element.

Was wir gelernt haben

  • Block Elemente sind quadratisch
  • Inline Elemente haben keine Umbrüche die direkt mit dem Element verknüpft sind
  • Man kann Block Elemente in andere Block Elemente einbetten
  • Man kann keine Block Elemente in Inline Elemente einbetten
  • Das paragraph Element ist das einzige Block Element das NUR Inline Elemente beinhalten darf.
  • Das <div> Element wird derzeit als Container benutzt, aber neue HTML5 Elemente sollen dies über kurz oder lang ersetzen.
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!