Stosowanie znaczników grupujących div to istotne elementy struktury strony www, dzięki którym twórcy witryn internetowych mogą w łatwy sposób pozycjonować względem siebie poszczególne bloki.
<div> </div>
Wewnątrz elementu blokowego div możemy umieścić m.in. nagłówki, akapity, obrazki, tabele.
<div>
<p>Akapit zawarty pomiędzy znacznikami div.</p>
</div>
Korzystanie z div-a jest szczególnie przydatne w sytuacji, jeśli chcemy nadać wspólne formatowanie dla grupy znaczników.
W poniższym przykładzie wyrównamy zawartość div-a do prawej.
<div style="text-align: right;">
<h1>Nagłówek tekstu</h1>
<p>Zawartość akapitu.</p>
</div>
Przykład
Nagłówek tekstu
Zawartość akapitu.
Innym przykładem użycia elementów blokowych może być umieszczenie zawartości dwóch div-ów obok siebie.
<div style="float: left; width: 50%; background: #e0e0e0;">
<h3>Nagłówek tekstu</h3>
<p>Zawartość akapitu w lewym bloku.</p>
</div>
<div style="float: right; width: 50%; background: #f0f0f0;">
<h3>Nagłówek tekstu</h3>
<p>Zawartość akapitu w prawym bloku.</p>
</div>
Przykład
Nagłówek tekstu
Zawartość akapitu w lewym bloku.
Nagłówek tekstu
Zawartość akapitu w prawym bloku.