Znacznik div w HTML-u

Stronę tą wyświetlono już: 242 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>:

  • <header> - stosowany jako nagłówek strony (baner, opis strony, logo strony) lub jako nagłówek treści zawartej w znaczniku <article>;
  • <nav> - w tym elemencie powinno zamieszczać się elementy nawigacji strony (czyli menu strony);
  • <article> - każdy element, który można traktować jako samodzielną treść (nie traci sensu, gdy wyrwie się go z pozostałej treści strony);
  • <section> - wydzielanie sekcji dokumentu najczęściej związane z znacznikami nagłówka <h1>, <h2>, ...;
  • <aside> - nadaje się na elementy, które w luźny sposób połączone są z resztą treści strony;
  • <footer> - nazwa sama za siebie przemawia, albowiem footer z angielskiego znaczy stopka toteż i do tego się nadaje ten element.

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>:

Listing 1
  1. <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>
  2. <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>
  3. <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

Komentarze