Title Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris.Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id.Lorem ipsum dolor sit amet
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
