Когда HTML5 вырывается на сцену несколько лет назад, он добавил кучу новых секционных элементов в langauge, включаяРАЗДЕЛ элемент. Большинство новых элементов, которые вносят HTML5, имеют четкое применение. Например, элемент используется для определения статей и основных частей веб-страницы, этот элемент используется для определения связанного контента, который не критичен для остальной части страницы, а заголовок, навигатор и нижний колонтитул довольно понятны. Недавно добавленныйРАЗДЕЛ элемент, однако, немного менее ясен.
Многие считают, что элементы HTML РАЗДЕЛ и на самом деле это одно и то же - общие элементы контейнера, используемые для содержания контента на веб-странице. Однако реальность состоит в том, что эти два элемента, в то время как оба являются элементами контейнера, являются не только универсальными. Существуют конкретные причины для использования как РАЗДЕЛ элемент и DIV элемент - и эта статья объяснит эти различия.
Разделы и Divs
РАЗДЕЛ элемент определяется как семантический раздел веб-страницы или сайта, который не является другим более конкретным типом (например, статьей или в стороне). Я склонен использовать этот элемент, когда я размещаю отдельный раздел страницы - раздел, который можно продать оптом и использовать на других страницах или частях сайта. Это отдельный фрагмент контента или «раздел» контента, если хотите.
Напротив, вы используете DIV элемент для частей страницы, которые вы хотите разделить, но для целей, отличных от семантики. Я бы обернул область контента в разделении, если я делаю это так, чтобы дать себе «крючок» для использования с CSS. Это не может быть отдельный раздел контента, основанный на семантике, но это то, что я диктую, чтобы достичь макета, который я хочу для своей страницы.
Это все о семантике
Это трудная концепция для понимания, но единственная разница между DIV элемент и РАЗДЕЛ Элемент является семантикой. Другими словами, это имея в виду раздела кода, который вы разделяете.
Любое содержимое, содержащееся внутри DIV элемент не имеет неотъемлемого значения. Он лучше всего подходит для таких вещей, как:
- Стили CSS и крючки для стилей CSS
- Контейнеры макетов
- Крючки для JavaScript
- Разделы для HTML упрощают чтение
DIV элемент, используемый для того, чтобы быть единственным элементом, который мы использовали для добавления перехватов для оформления наших документов и создания столбцов и причудливых макетов. Из-за этого мы закончили с HTML, который был пронизан DIV элементы, которые веб-дизайнеры называют «divitis». Были даже редакторы WYSIWYG, которые использовали DIV элемент исключительно. Я действительно просматриваю HTML-код, который использует DIV элемент вместо абзацев!
С HTML5 мы можем начать использовать секционирующие элементы для создания более семантически описательных документов (используя для навигации и описательных цифр и т. Д.), А также определить стили этих элементов.
Что относительно элемента SPAN?
Другой элемент, о котором думают большинство людей, когда они думают о DIV элемент - это элемент. Этот элемент, например DIV, не является семантическим элементом. Это встроенный элемент, который можно использовать для добавления перехватов для стилей и скриптов вокруг встроенных блоков контента (обычно это текст). В этом смысле это точно так же, как DIV элемент, только встроенный, а не элемент блока. В некотором смысле, было бы легче подумать о DIV как уровень блока SPAN и использовать его так же, как вы SPAN только для целых блоков содержимого HTML.
В HTML5 нет сопоставимого встроенного элемента секционирования.
Для более старых версий Internet Explorer
Даже если вы поддерживаете значительно более старые версии IE (например, IE 8 и ниже), которые не надежно распознают HTML5, вам не следует бояться использовать семантически корректные теги HTML. Семантика поможет вам и вашей команде управлять страницей в будущем (потому что вы будете знать, что этот раздел является статьей, если он окружен СТАТЬЯ элемент). Кроме того, браузеры, которые распознают эти теги, будут лучше поддерживать их.
Вы все еще можете использовать элементы семантического секвена HTML5 с Internet Explorer, вам просто нужно добавить скрипты и, возможно, несколько окружающих DIV чтобы они распознавали теги как HTML.
Использование элементов DIV и SECTION
Если вы используете их правильно, вы можете использовать оба DIV а также РАЗДЕЛ элементов вместе в действительном документе HTML5. Как вы видели здесь в этой статье, вы используете РАЗДЕЛ чтобы определить семантически дискретные части содержимого, и вы используете DIV элемент как крючки для CSS и JavaScript, а также определение макета, не имеющего смыслового смысла.
Оригинальная статья Дженнифер Крынин. Отредактировано Джереми Жирардом 3/15/17
