This article is currently in the process of being translated into German (~92% done).
Block und Inline Elemente
Wir haben uns bereits einige HTML5-Elemente angeschaut, aus denen eine Webseite erzeugt wird, und jetzt ist es an der Zeit, eine weitere Eigenschaft der HTML5-Elemente vorzustellen. Es gibt zwei verschiedene Arten von Elementen: Inline- und Block-Elemente. Ob ein Element ein Inline- oder ein Block-Element ist bestimmt wie ein Browser das Element darstellt.
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.
