Lektion 6: DIVs als gruppierende Elemente

Gruppierende Elemente in HTML

Um Bereiche in HTML zu begrenzen, bzw. mehrere Elemente zusammen zu fassen, werden die beiden Tags DIV und SPAN verwendet. Zusammen mit css-Elementen wird ihr Einsatz klar.

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