Element SECTION jest zdefiniowany jako semantyczna sekcja strony internetowej lub witryny, która nie jest innym bardziej szczegółowym typem, takim jak ARTICLE lub ASIDE. Projektanci często używają tego elementu podczas oznaczania odrębnej sekcji strony — całej sekcji, którą można przenieść i wykorzystać na innych stronach lub częściach witryny. To odrębna treść.
Natomiast element DIV jest odpowiedni dla części strony, które chcesz podzielić w celach innych niż semantyka. Na przykład możesz owinąć pewną zawartość w DIV, aby nadać jej „haczyk” do stylizacji za pomocą CSS. Może nie jest to semantycznie odrębna sekcja treści, ale jest oddzielona, aby można było osiągnąć pożądany układ lub styl.
Chodzi o semantykę
Jedyną różnicą między elementami DIV i SECTION jest semantyka — znaczenie treści, którą dzielisz.
Wszelkie treści zawarte w elemencie DIV nie mają własnego znaczenia. Najlepiej nadaje się do takich rzeczy jak:
- Style CSS i hooki do stylów CSS
- Kontenery układu
- Haki JavaScript
- Podziały ułatwiające czytanie treści lub HTML
Element DIV był kiedyś jedynym dostępnym elementem do dodawania zaczepów do stylów dokumentów i układów. Przed HTML5 typowa strona internetowa była pełna elementów DIV. W rzeczywistości niektóre edytory WYSIWYG używały wyłącznie elementu DIV, czasami zamiast akapitów.
HTML5 wprowadził elementy do tworzenia sekcji, które tworzyły bardziej semantycznie opisowe dokumenty i pomogły zdefiniować style tych elementów.
A co z elementem SPAN?
Innym powszechnym elementem niesemantycznym jest SPAN. Jest używany wbudowany aby dodać zaczepy dla stylów i skryptów wokół bloków treści (zwykle tekstu). W tym sensie jest dokładnie taki jak DIV, ale nie jest a element blokowy. Pomyśl o DIV jako o SPAN na poziomie bloku i używaj go w ten sam sposób, ale dla całych bloków treści HTML.
HTML nie ma porównywalnego wbudowanego elementu do tworzenia sekcji.
Dla starszych wersji Internet Explorera
Nawet jeśli obsługujesz znacznie starsze wersje Microsoft Internet Explorer, które nie rozpoznają niezawodnie HTML5, powinieneś używać semantycznie poprawnych tagów HTML. Semantyka pomoże Tobie i Twojemu zespołowi w zarządzaniu stroną w przyszłości. Najnowsze wersje Internet Explorera, a także jego następca, Microsoft Edge, rozpoznają HTML5.
Korzystanie z elementów DIV i SECTION
Możesz użyć zarówno elementów DIV, jak i SECTION razem w poprawnym dokumencie HTML5 – SECTION, aby zdefiniować semantycznie oddzielne części treści i DIV, aby zdefiniować zaczepy dla CSS, JavaScript i układu cele.
Oryginalny artykuł Jennifer Krynin. Edytowane przez Jeremy'ego Girarda 15.03.17.