Елементът SECTION се дефинира като семантичен раздел на уеб страница или сайт, който не е друг по-специфичен тип като ARTICLE или ASIDE. Дизайнерите често използват този елемент, когато маркират отделен раздел на страницата - цял раздел, който може да бъде преместен и използван на други страници или части от сайта. Това е отделно съдържание.
За разлика от тях, елементът DIV е подходящ за части от страницата, които искате да разделите за цели, различни от семантика. Например, можете да обвиете някакво съдържание в DIV, за да му дадете "кука" за стил с CSS. Може да не е отделен раздел от съдържанието семантично, но е отделен, за да можете да постигнете желано оформление или усещане.
Всичко е в семантиката
Единствената разлика между елементите DIV и SECTION е семантиката - значение от съдържанието, което разделяте.
Всяко съдържание, съдържащо се в DIV елемент, няма присъщо значение. Най-добре се използва за неща като:
- CSS стилове и куки за CSS стилове
- Оформление на контейнери
- JavaScript куки
- Раздели, които улесняват четенето на съдържание или HTML
Елементът DIV беше единственият елемент, който се предлага за добавяне на куки към стилове на документи и оформления. Преди HTML5, типичната уеб страница беше осеяна с DIV елементи. Всъщност някои редактори на WYSIWYG са използвали изключително елемента DIV, понякога вместо абзаци.
HTML5 представи елементи за разделяне, които създадоха по-семантично описателни документи и помогнаха за дефинирането на стилове на тези елементи.
Какво ще кажете за елемента SPAN?
Друг често срещан несемантичен елемент е SPAN. Използва се в редица за добавяне на куки за стилове и скриптове около блокове съдържание (обикновено текст). В този смисъл е точно като DIV, но не е блок елемент. Мислете за DIV като SPAN на ниво блок и да го използвате по същия начин, но за цели блокове HTML съдържание.
HTML няма сравним вграден елемент за секциониране.
За по-стари версии на Internet Explorer
Дори ако поддържате драстично по-стари версии на Internet Explorer на Microsoft, които не разпознават надеждно HTML5, трябва да използвате семантично правилни HTML тагове. Семантиката ще помогне на вас и вашия екип да управлявате страницата в бъдеще. Най-новите версии на Internet Explorer, както и неговата подмяна, Microsoft Edge, разпознават HTML5.
Използване на DIV и SECTION елементи
Можете да използвате както елементи DIV, така и SECTION заедно в валиден HTML5 документ — SECTION, за да дефинирате семантично дискретни части от съдържанието и DIV, за да се дефинират куки за CSS, JavaScript и оформление цели.
Оригинална статия от Дженифър Кринин. Редактирано от Jeremy Girard на 15.03.17.