Lektion 6: DIVs als gruppierende Elemente

Mit Hilfe von DIVs ist es möglich, mehrere Elemente zu einem Bereich zusammenzufügen. Es wird lediglich in einer neuen Zeile des Fließtextes begonnen. So ist der div-Container nicht nur zur Formatierung mit Hilfe von CSS gedacht.

DIVs begrenzen also HTML-Bereiche. Die Kleine-Bruder-Version eines DIVs ist der SPAN. Zusammen mit css-Elementen wird ihr Einsatz klar.

Übung

Teste folgende Beispiele selbst aus, um zu erkennen, wie div und span funktionieren. Dir wird dann sicher auch bewusst, was mit Block-Element bzw. mit Inline-Element gemeint ist.

Beispiel: Block-Element DIV

 <div style="background-color:lightgrey;">
   <h1> Überschrift </h1>
   <p> Textabsatz </p>
 </div>

Beispiel: Inline-Element SPAN

 <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>

Es ist allerdings unschön, die style-Attribute in HTML zu verwenden, da es dem Prinzip der Trennung von Inhalt und Layout widerspricht. Vgl. => Übung in Lektion 5

Im Folgenden werden wir style nicht weiter verwenden und mit den nun vorgestellten Attributen id und class arbeiten.

=> Lektion 7: Attribute in HTML sprechen Selektoren im CSS an
=> Übersicht: HTML und CSS