Znacznik div w HTML-u

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 4983 razy

W HTML-4 znacznik ten był niezastąpionym elementem, używanym do tworzenie oddzielnych obszarów na stronie, które grupowały w pewien określony przez twórcę strony sposób różne inne znaczniki HTML wraz z ich zawartością. W HTML-5 sprawa się nieco skomplikowała i znacznik <div> powinien zostać wyparty przez inne, nowe elementy języka HTML-5. Stało się tak, ponieważ znacznik <div> nie wnosił informacji o tym, jaką treść zawiera w sobie, a więc nie spełnia warunku semantyki kodu strony. Warunek ten jest o tyle istotny, że przeglądarki internetowe zwracają na semantykę szczególną uwagę a co za tym idzie lepiej indeksują strony o poprawnej semantyce. Oto kilka elmentów HTML-5, które powinny zastąpić znacznik <div>:

A więc w HTML-5 zamiast znacznika <div> w określonych wyżej sytuacjach należy korzystać z wypisanych tam znaczników. Oto przykładowy kod wykonany z wykorzystaniem znacznika <div>:

<div style="width: 200px;background: red; height: 110px;float: left"><a href=""><img src="Loga/logotyp.png" alt="nazwa strony"></a></div><div style="margin-left: 200px;background: #a3cad3 url('Loga/obliczeniowo.png') no-repeat center center;height: 110px"></div> <div style="width: 200px;background: #37616d; height: 500px; float:left;color:white;">menu</div><div style="background: #a3cad3; height:400px;margin-left:200px">Treść strony</div> <div style="background: url('menu/stopka.png') repeat left top; height: 60px;padding:20px 10px 10px 10px;text-align:center">Stopka</div>

Wynik działania:

nazwa strony
menu
Treść strony
Stopka

W powyższym przykładzie należy zwrócić szczególną uwagę na styl float - opływanie elementu

Propozycje książek