Na temat tego znacznika powiedzielismy już dużo przy okazji omawiania układu treści strony. Stosowaliśmy go podczas konstruowaniu szkieletu strony oraz analizowania struktury DOM przykładowej strony. Można powiedzieć, że znacznik <div>...</div> może grupować wszystko, w odróżnieniu od <figure>...</figure>, który jest przeznaczony do grupowania elementów tworzących logiczną całość. W szczególności div, może obejmować inny div, który z kolei obejmuje następny div, itd. Podstawową zasadą stosowania znacznika div, jest sprawdzenie czy aby objęty nim obszar nie ma znaczenia semantycznego. Jeżeli tak jest, to należy zastowować jeden ze znaczników: section, article, nav, header, footer lub aside. Warto wiedzieć, że w poprzednich wersjach HTML, div był jedynym znacznikiem - pełniącym funkcje wszystkich wymienionych znaczników. Kod pokazany poniżej pokazuje przykład zastosowania znacznika div:
<body>
<article>
<h1>Zwierzęta hodowane w Polsce</h1>
<p>
W Polsce hoduje sie między innymi krowy, świnie, konie, kury, kaczki i gęsi.
</p>
<div style="background-color:#d1dcf3;">
<section>
<h3>Krowy</h3>
<p>
Krowa jest fajnym zwierzaczkiem, bo daje mleko.
</p>
</section>
<section>
<h3>Świnki</h3>
<p>
Zwane są oficjalnie trzodą chlewną.
</p>
</section>
</div>
<div style="background-color:#d5e7d5;">
<section>
<h3>Kury</h3>
<p>
Wcześniej mówiliśmy o ssakach, natomiast kury są ptakami.
</p>
</section>
</div>
</article>
</body>
Zwróć uwagę, że wprowadzone tutaj znaczniki div, pełnią tylko jedną rolę - zmieniają w swoich obszarach kolor tła, powodują to fragmenty zanaczone kolorem jasnozielonym, będziesz się o tym uczył podczas omawiania CSS.
FILM: Kurs HTML #2 - Budowa strony opartej o DIV i style CSS
