Когда использовать элемент HTML5 SECTION

Новый HTML5 раздел может сбивать с толку. Если вы создавали документы HTML до HTML5, скорее всего, вы уже используете этот элемент для создания структурных подразделений на своих страницах, а затем стилизуете страницы с их помощью. Так что может показаться естественным просто заменить существующий DIV элементы с раздел элементы. Но это технически неверно.

Элемент section является семантическим элементом

В РАЗДЕЛ элемент - это семантический элемент; он дает понять как пользовательским агентам, так и людям, что такое вложенный контент - в частности, раздел документа.

Это может показаться очень общим описанием, и это потому, что так оно и есть. Есть и другие HTML5 элементы которые обеспечивают больше семантических различий для вашего контента, которые вы должны использовать в первую очередь, прежде чем использовать раздел элемент:

  • Статья
  • В стороне
  • Nav

Когда использовать элемент 'section'

Использовать статья element, когда контент является независимой частью сайта, которая может быть автономной и распространяться как статья или сообщение в блоге. Использовать

instagram viewer
в стороне элемент, когда содержимое косвенно связано либо с содержимым страницы, либо с самим сайтом, например боковые панели, аннотации, сноски или связанная информация о сайте. Использовать навигация элемент для контента, поддерживающего навигацию по сайту.

В раздел element - это общий семантический элемент. Используйте его, когда ни один из других семантических контейнерных элементов не подходит. Он объединяет части вашего документа в отдельные блоки, которые вы можете описать как связанные каким-то образом. Если вы не можете описать элементы в разделе одним или двумя предложениями, то вам, вероятно, не следует использовать этот элемент.

Вместо этого вы должны использовать DIV элемент. В DIV Элемент в HTML5 не является семантическим контейнерным элементом. Если контент, который вы пытаетесь объединить, не имеет семантического значения, но вам все равно нужно объединить его для стилизации, тогда DIV element - подходящий элемент для использования.

Как работает элемент 'section'

Раздел вашего документа может отображаться как внешний контейнер для статей и в стороне элементы. Он также может содержать контент, не являющийся частью статья или же в стороне. А раздел элемент также можно найти внутри статья, навигация, или же в стороне. Вы даже можете вкладывать разделы, чтобы указать, что одна группа контента является разделом другой группы контента, которая является разделом статьи или страницы в целом.

В раздел element создает элементы внутри контура документа. И поэтому у вас всегда должен быть элемент заголовка (H1 через H6) как часть раздела. Если вы не можете придумать название для раздела, DIV element, вероятно, более уместен.

Если вы не хотите, чтобы заголовок раздела отображался на странице, вы всегда можете замаскировать его с помощью CSS.

Когда не использовать элемент 'section'

Есть одна цель, для которой вы не должны использовать раздел элемент: только для стиля.

Другими словами, если единственная причина, по которой вы помещаете элемент в это место, - это прикрепить CSS стиль properties, вам не следует использовать раздел элемент. Найти семантический элемент или используйте DIV элемент вместо этого.

В конечном итоге это может не иметь значения

Сложность написания семантического HTML заключается в том, что то, что является семантическим для браузера, может быть для вас полной ерундой. Если вы чувствуете, что можете оправдать использование раздел элемент в ваших документах, то вам следует использовать его. Большинству пользовательских агентов все равно, и они будут отображать страницу так, как и следовало ожидать, создавали ли вы стиль DIV или раздел.

Для дизайнеров, которые любят быть семантически правильными, используя раздел Семантически допустимый элемент важен. Для дизайнеров, которые просто хотят, чтобы их страницы работали, это не так важно. Написание семантически корректного HTML - это хорошая практика, которая позволяет страницам больше соответствовать требованиям завтрашнего дня. Но, в конце концов, решать только вам.

instagram story viewer