Znacznik <div> i nowe elementy HTML5

Do budowy sekcji możemy użyć elementu blokowego <div> (ang. division – oddział, wydział, sekcja). Element ten nazywany jest również box’em (pudełkiem), albo kontenerem (ang. container, contain – zawierać w sobie), z tego względu, że zawiera on w sobie inne elementy.

    <div></div>

Do wnętrza pojemnika elementu <div> dodajmy inne elementy.

<div>
<h4>Tytuł poziomu czwartego</h4>

<p>Akapit (paragraf), czyli blok tekstowy.</p>
</div>

Element <div> jest elementem blokowym, tzn. zajmie całą szerokość strony. Sam element <div> nic szczególnego nie wnosi do naszego kodu, jeśli chodzi o formatowanie. Domyślnie nie zostanie dodana żadna ramka, czy inny kolor tła, żeby wizualnie odróżnić poszczególne sekcje. Musimy tego dokonać sami.

<div style="background: peru; padding: 20px; width: 200px;">
<h4>Tytuł poziomu czwartego</h4>

<p>Akapit (paragraf), czyli blok tekstowy.</p>
</div>

Do naszego znacznika <div> dodaliśmy tło coloru peru, dopełnienie 20 pikseli (px) i szerokość 200 pikseli.

Sekcje w HTML do tej pory tworzone były głównie za pomocą elementu <div>. W HTML5 wprowadzono nowe elementy blokowe, które mają zastąpić element <div> tam, gdzie będzie to miało sens.

Nowe znaczniki blokowe w HTML5

Znacznik <div> nie wnosił informacji o tym, jaką treść zawiera w sobie, a więc nie spełnia warunku semantyki kodu strony, dlatego zostały wprowadzone nowe znaczniki. Jest to istotne, ponieważ przeglądarki internetowe zwracają na semantykę szczególną uwagę a co za tym idzie lepiej indeksują strony o poprawnej semantyce.

Nowe elementy blokowe w HTML5:

• article
• aside
• footer
• header
• main
• nav
• section

Wykorzystanie nowych znaczników blokowych