Содержание
Новый HTML5
РАЗДЕЛ
элемент может быть несколько запутанным. Если вы создавали документы HTML до HTML5, скорее всего, вы уже используете этот элемент для создания структурных подразделений на своих страницах, а затем стилизует их. Так что может показаться естественным просто заменить ваш существующий
DIV
элементы с
РАЗДЕЛ
элементы. Но это технически неверно. Так что если вы не просто замените
DIV
элементы с
РАЗДЕЛ
элементы, как вы используете их правильно?
Элемент SECTION — это семантический элемент
Первое, что нужно понять, это то, что
РАЗДЕЛ
Элемент является семантическим элементом. Это означает, что он дает смысл как пользовательским агентам, так и людям о том, что представляет собой вложенный контент, в частности, раздел документа.
Это может показаться очень общим семантическим описанием, и это потому, что это так. Существуют и другие элементы HTML5, которые обеспечивают больше семантических различий в вашем контенте, которые вы должны использовать перед тем, как использовать
РАЗДЕЛ
элемент:
СТАТЬЯ
В СТОРОНЕ
СЧА
Когда использовать элемент SECTION
Использовать
СТАТЬЯ
элемент, когда контент является независимой частью сайта, которая может быть автономной и синдицированной, как статья или сообщение в блоге. Использовать
В СТОРОНЕ
элемент, когда содержимое тангенциально связано либо с содержимым страницы, либо с самим сайтом, таким как боковые панели, аннотации, сноски или связанная информация сайта. Использовать
СЧА
элемент для контента, который является навигацией.
РАЗДЕЛ
Элемент является общим семантическим элементом. Вы используете его, когда ни один из других семантических контейнерных элементов не подходит. Вы используете его для объединения частей вашего документа в отдельные единицы, которые вы можете описать как связанные между собой. Если вы не можете описать элементы в разделе одним или двумя предложениями, то вам, вероятно, не следует использовать этот элемент.
Вместо этого вы должны использовать
DIV
элемент.
DIV
Элемент в HTML5 является несемантическим контейнерным элементом. Если контент, который вы пытаетесь объединить, не имеет семантического значения, но вам все равно нужно объединить его для стилизации, тогда
DIV
Элемент является подходящим элементом для использования.
Как работает элемент SECTION
Раздел вашего документа может отображаться как внешний контейнер для статей и
В СТОРОНЕ
элементы. Он также может содержать контент, который не является частью
СТАТЬЯ
или же
В СТОРОНЕ
.
РАЗДЕЛ
элемент также может быть найден внутри
СТАТЬЯ
,
СЧА
, или же
В СТОРОНЕ
. Вы можете даже вкладывать разделы, чтобы указать, что одна группа содержимого является разделом другой группы содержимого, которая является разделом статьи или страницы в целом.
РАЗДЕЛ
Элемент создает элементы внутри структуры документа. И как таковой, вы всегда должны иметь элемент заголовка (
H1
через
H6
) как часть раздела. Если вы не можете придумать название для раздела, то снова
DIV
элемент, вероятно, более уместен. Помните, что если вы не хотите, чтобы заголовок раздела отображался на странице, вы всегда можете замаскировать его с помощью CSS.
Когда не использовать элемент SECTION
Помимо приведенного выше совета использовать сначала более конкретные семантические элементы, есть одна определенная область, в которой вы не должны использовать
РАЗДЕЛ
элемент: только для стиля.
Другими словами, если единственная причина, по которой вы помещаете элемент в это место, заключается в добавлении свойств стиля CSS, вам не следует использовать
РАЗДЕЛ
элемент. Найдите семантический элемент или используйте
DIV
элемент вместо
В конечном счете, это не имеет значения
Сложность в написании семантического HTML заключается в том, что то, что является для нас семантическим, может оказаться для вас полной чушью. Если вы чувствуете, что можете оправдать использование
РАЗДЕЛ
элемент в ваших документах, то вы должны использовать его. Большинство пользовательских агентов не заботятся и будут отображать страницу так, как вы можете ожидать,
DIV
или
РАЗДЕЛ
.
Для дизайнеров, которые любят быть семантически правильными, используя
РАЗДЕЛ
элемент семантически действительным образом важен. Для дизайнеров, которые просто хотят, чтобы их страницы работали, это не так важно. Мы считаем, что написание семантически правильного HTML-кода является хорошей практикой и делает страницы более ориентированными на будущее. Но, в конце концов, решать вам.
