26. 11.
Eines der wichtigsten Elemente ist das "Division"-Element, welches verwendet wird, um Seiten in verschiedene Bereiche zu unterteilen. Es ersetzt heute die in HTML üblichen "Layout-Tabellen", die im Sinne der Barrierefreiheit nicht optimal interpretiert werden konnten.
Eine typische, sehr einfache, Seitenstruktur mit div-Elementen könnte etwa wie folgt aussehen. Dabei werden sämtliche div-Elemente mit einer ID (identification) versehen, damit man jedes "von außen" adressieren (also ansprechen) kann.
(Beim nachfolgenden Code sind html- und head-Bereich weggelassen.)
<body>
<div id="header">Inhalte Header</div>
<div id="nav">Navigationsleiste</div>
<div id="content">Inhalte Texte / Bilder</div>
<div id="footer">Inhalte Fußzeile</div>
</body>
Das div-Element hat per se keine Eigenschaften und keine Funktion. Erst durch die Zuweisung von Eigenschaften in einem Stylesheet erhält es sein Aussehen.
Das div-Element ist ein sogenanntes Block-(Level)-Element. Damit ist folgendes Verhalten vorgegeben:
- Nimmt die gesamte Breite seines Elternelements ein
- Beginnt immer eine neue Zeile
- Folgt den Regeln des Boxmodells und kann daher u.a. die Eigenschaften width, height, padding, border, margin annehmen.
Tags: block, boxmodell, div, tag, xhtml
Leave a Reply
You must be logged in to post a comment.