Элемент 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.