Kiedy kilka lat temu pojawił się na scenie HTML5, dodano do niego kilka nowych elementów sekcyjnych, w tymSEKCJA element. Większość nowych elementów wprowadzanych przez HTML5 ma wyraźne zastosowanie. Na przykład element służy do definiowania artykułów i głównych części strony internetowej, element służy do definiowania pokrewnej treści, która nie ma krytycznego znaczenia dla reszty strony, a nagłówek, nawigacja i stopka są dość oczywiste. Nowo dodaneSEKCJA element jest jednak nieco mniej jednoznaczny.
Wiele osób uważa, że elementy HTML SEKCJA i są tak naprawdę to samo - ogólne elementy kontenera używane do przechowywania treści na stronie internetowej. Rzeczywistość jest jednak taka, że te dwa elementy, choć oba są elementami kontenerowymi, nie mają charakteru ogólnego. Istnieją konkretne powody, aby używać obu SEKCJA element i DIV element - i ten artykuł wyjaśni te różnice.
Sekcje i Div
The SEKCJA element jest zdefiniowany jako seman- tyczna sekcja strony internetowej lub witryny, która nie jest kolejnym bardziej szczegółowym typem (np. artykuł lub na bok). Zwykle używam tego elementu, gdy zaznaczam odrębną sekcję strony - sekcję, która może być hurtowo przenoszona i używana na innych stronach lub częściach strony. Jest to odrębna część treści lub "sekcja" treści, jeśli zechcesz.
Natomiast używasz DIV element dla części strony, którą chcesz podzielić, ale dla celów innych niż semantyka. Chciałbym zawinąć obszar zawartości w dziale, jeśli robię to tak czysto, aby dać sobie "hak" do użycia z CSS. Może to nie być odrębna sekcja treści w oparciu o semantykę, ale jest to coś, co dyktuję, aby uzyskać układ, który chcę na mojej stronie.
Wszystko o semantyce
Jest to trudna do zrozumienia koncepcja, ale jedyna różnica między DIV element i SEKCJA element to semantyka. Innymi słowy, to jest znaczenie sekcji kodu, którą dzielisz.
Wszelkie treści zawarte w DIV element nie ma żadnego nieodłącznego znaczenia. Najlepiej nadaje się do takich rzeczy jak:
- Style CSS i przechwyty dla stylów CSS
- Układanie pojemników
- Haki JavaScript
- Podziały dla kodu HTML, aby ułatwić czytanie
The DIV element był jedynym elementem, który mieliśmy do dodawania haczyków do stylu naszych dokumentów i tworzenia kolumn i fantazyjnych układów. Z tego powodu skończyliśmy z HTML, który był podziurawiony DIV elementy - co twórcy stron internetowych mogą nazwać "divitis". Byli nawet redaktorzy WYSIWYG, którzy korzystali z DIV element wyłącznie. W rzeczywistości używam HTML, który używa DIV element zamiast akapitów!
W HTML5 możemy zacząć używać elementów cięcia, aby tworzyć bardziej semantycznie opisowe dokumenty (używając do nawigacji i figur opisowych itd.), A także definiować style na tych elementach.
Co z elementem SPAN?
Drugim elementem, o którym większość ludzi myśli, kiedy myślą o DIV element jest elementem. Ten element, jak DIV, nie jest elementem semantycznym. Jest to wbudowany element, którego można użyć do dodania haków dla stylów i skryptów wokół wbudowanych bloków treści (zwykle tekstu). W tym sensie jest dokładnie tak jak DIV element, tylko element wbudowany, a nie blokowy. W pewnym sensie łatwiej jest myśleć o DIV jako poziom blokowy PRZĘSŁO i używaj go w taki sam sposób, jak ty PRZĘSŁO tylko dla całych bloków treści HTML.
W HTML5 nie ma porównywalnego elementu podziału na wiersze.
W przypadku starszych wersji programu Internet Explorer
Nawet jeśli wspierasz radykalnie starsze wersje IE (jak IE 8 i niższe), które nie rozpoznają poprawnie HTML5, nie powinieneś się obawiać używania semantycznie poprawnych tagów HTML. Semantyka pomoże tobie i twojemu zespołowi zarządzać stroną w przyszłości (ponieważ będziesz wiedział, że ta sekcja jest artykułem, jeśli jest otoczona przez ARTYKUŁ element). Dodatkowo przeglądarki, które rozpoznają te tagi, będą je lepiej obsługiwać.
Nadal możesz korzystać z semantycznych elementów selekcji HTML5 w Internet Explorerze, wystarczy dodać skrypty i być może kilka okolic DIV elementy, które pozwolą im rozpoznać tagi jako HTML.
Używanie elementów DIV i SECTION
Jeśli używasz ich poprawnie, możesz użyć obu DIV i SEKCJA elementy razem w ważnym dokumencie HTML5. Jak widzieliśmy tutaj w tym artykule, używasz SEKCJA element definiujący semantycznie oddzielne fragmenty treści, a ty używasz DIV element jako hooks dla CSS i JavaScript oraz definiowanie układu, który nie ma znaczenia semantycznego.
Oryginalny artykuł Jennifer Krynin. Edytowane przez Jeremy'ego Girarda w dniu 15.03.17
