• Basissysteme der Informationsverarbeitung 1 - BSI 1
• Container-Elemente

Container-Elemente

Blocklevel vs. Inline

Bei HTML-Elementen wird zwischen Blocklevel-Elementen und Inline-Elementen unterschieden:

• Inline-Elemente versursachen keinen Zeilenumbruch (z.B. Textformatierungselemente, Link- und Bildelemente)
• Blocklevel-Elemente verursachen einen Zeilenumbruch (z.B. Absatzelemente, Überschriftenelemente)

---

Container-Elemente

Container-Elemente fungieren als Container für andere Elemente, um diese gleichzeitig ansprechen oder formatieren zu können. Es gibt jeweils ein Blocklevel-Container-Element (verursacht einen Zeilenumbruch) und ein Inline-Container-Element (verursacht keinen Zeilenumbruch).

Das <div>-Element (Blocklevel-Container-Element)

Dieses Element wird in der Regel genutzt, um einen Absatz zu schaffen und die enthaltenen Elemente gleichzeitig ansprechen zu können. So müssen die style-Anweisungen nicht zu jedem Element einzeln hinzugefügt werden.

Im folgenden Beispiel werden div-Elemente (und ihr Inhalt) einzeln formatiert. Durch ein weiteres umschließendes Element werden alle enthaltenen div-Container mittig zentriert. Verschachtelungen sind also auch hier möglich und sinnvoll. In diesem Fall ist es jedoch äußerst wichtig, auf eine sinnvolle Anordnung zu achten, um bei den ganzen div's nicht den Überblick zu verlieren.

<div style="text-align:center">

<div>
<h4>Erster div-Container</h4>
<p>Dies ist ein Paragraph.</p>
<p>Dies ist ein Paragraph.</p>
</div>

<div style="color:green">
<h4>Zweiter div-Container</h4>
<p>Dies ist ein Paragraph.</p>
<p>Dies ist ein Paragraph.</p>
</div>

<div style="font-style:italic">
<h4>Dritter div-Container</h4>
<p>Dies ist ein Paragraph.</p>
<p>Dies ist ein Paragraph.</p>
</div>

<div style="border: solid black 3px">
<h4>Vierter div-Container</h4>
<p>Dies ist ein Paragraph.</p>
<p>Dies ist ein Paragraph.</p>
</div>

</div>

---

Das <span>-Element (Inline-Container-Element)

Dieses Element wird in der Regel innerhalb eines Block-Elementes genutzt, um einzelne Bereich gesondert ansprechen zu können, ohne dabei einen Zeilenumbruch zu erzeigen. Dieser Bereich kann aus Zeichen bestehen, aber auch andere inline-Elemente enthalten.

<div style="background-color: red">

<h4>Ein roter div-Container...</h4>
<p>... mit einem einfachen Paragraphen, ...</p>
<p>... einem <span style="color:blue"> blauen span-Bereich </span>, sowie</p>
<p>... einem <span style="background-color: green; text-transform: uppercase">grünen Span-Bereich in Großbuchtsaben</span> und ...</p>
<p>... einem <span style="font-weight:bold">span-Bereich, in fetter Schrift und einem <a href="https://www.webtechnologien.com/basis-tutorials/html/container-elemente/">Link </a> zur Infoseite über Container-Elemente.</span></p>

</div>

---