Содержание
Элемент 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
Даже если вы поддерживаете значительно более старые версии Microsoft Internet Explorer, которые не могут надежно распознавать HTML5, вам следует использовать семантически правильные теги HTML. Семантика поможет вам и вашей команде управлять страницей в будущем. Последние версии Internet Explorer, а также его замена Microsoft Edge распознают HTML5.
Использование элементов DIV и SECTION
Вы можете использовать как элементы DIV, так и элементы SECTION вместе в действительном документе HTML5 — SECTION, чтобы определить семантически дискретные части содержимого, и DIV, чтобы определить хуки для целей CSS, JavaScript и макета.
Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирара 15.03.17
