1. Определение <section>
2. Дальнейшее уточнение из спецификации
3. Когда это должно быть использовано?
4. Мой вывод

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

По сути, кажется, что новый элемент HTML5 <section> сбивает с толку, и его истинное значение трудно определить. Я попытаюсь объяснить это здесь, вернувшись к спецификации и обсудив, через процесс исключения, некоторые способы ее использования.

Определение <section>

Согласно спецификации <section> определяется следующим образом:

Элемент section представляет общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком.

Таким образом, мы сразу можем подумать, что <section> может использоваться для хранения поста в блоге или отдельного комментария в посте. Но подожди минутку. Спецификация продолжается:

Авторам рекомендуется использовать элемент article вместо элемента section, когда было бы целесообразно объединить содержимое этого элемента.

Эта часть исключает сообщения в блогах, статьи в блогах, контент новостных лент и другой синдицированный контент. Что это оставляет нас с?

Дальнейшее уточнение из спецификации

Далее в спецификации описывается, как ее не следует использовать, а также дается рекомендуемое использование. Это объясняет:

Примерами разделов могут быть главы, различные страницы с вкладками в диалоговом окне с вкладками или пронумерованные разделы диссертации. Домашняя страница веб-сайта может быть разбита на разделы для введения, новостей и контактной информации.

Единственная проблема, с которой я столкнулся в связи с приведенной выше рекомендацией, - это пример «новостных материалов», который, по-видимому, имеет больше смысла для <article>, но я полагаю, что это будет зависеть от того, есть ли у новостной статьи потенциал для синдикации.

Обновление (20 октября 2011 г.) Изначально я ошибочно предполагал, что «новостные статьи», упомянутые в спецификации, были разделены на разделы. Это говорит о том, что новости будут находиться внутри одного элемента <section>, а затем, возможно, будут разбиты на элементы <article>. Кредит для этот комментарий Пол Д. Уэйт о переполнении стека.

Наконец, вот предупреждение, приведенное в спецификации (что соответствует хотя бы один человек возникли проблемы с моим использованием <section> в шаблоне Easy HTML5):

Элемент section не является универсальным контейнерным элементом. Когда элемент нужен для стилизации или для удобства написания сценариев, авторам рекомендуется использовать вместо этого элемент div. Общее правило заключается в том, что элемент section уместен только в том случае, если содержимое элемента будет явно указано в схеме документа.

У меня есть проблема со спецификацией, говоря, что это «не общий элемент контейнера». Ну, вроде как. Как еще вы можете это описать? Тем не менее, вооружившись этой информацией, мы можем принять несколько разумное решение для ее использования.

Когда это должно быть использовано?

В HTML5 для веб-дизайнеров Джереми Кит напоминает нам, что нужно убедиться, что все элементы одного раздела связаны между собой.

Чтобы сделать это более понятным в практическом плане, я провел мозговой штурм списка некоторых конкретных DO, и DON'T, о которых следует помнить при использовании элемента <section>.

Список дел…

• НЕОБХОДИМО использовать раздел для каждого отдельного раздела переключателя вкладок или ползунка содержимого (если неупорядоченный список не требуется)
• НУЖНО использовать раздел, чтобы разделить длинную страницу «Условия использования» (или аналогичную) на пронумерованные разделы
• СЛЕДУЕТ вкладывать элементы раздела в случае необходимости (как вы могли бы сделать со страницей «условия»)
• НЕОБХОДИМО использовать раздел для хранения описания товара (которое может включать фотографию, кнопку «добавить в корзину» и т. Д.)
• НУЖНО использовать раздел для хранения индивидуальных биографий сотрудников на корпоративной информационной странице
• НЕОБХОДИМО использовать раздел для разделения различных разделов одностраничного веб-сайта или портфолио

ОБНОВЛЕНИЕ (12 января 2011 г.) : Брюс Лоусон не согласен с этим с двумя пунктами, которые теперь имеют сквозную линию выше. Он упоминает, что они могут быть синдицированы, так что было бы более уместно, если они обернуты тегами статьи Я предварительно согласен, но я полагаю, что можно было бы использовать случай для использования раздела, если нет намерения когда-либо синдицировать контент. Но тогда возникает вопрос: является ли потенциал для синдикации, который требует использования статьи (что сделало бы его утверждение правильным в этом случае)? Или это фактическое намерение синдицировать, которое определяет, использовать ли статью?

Список не ...

• НЕ используйте раздел, чтобы отделить содержимое от верхнего и нижнего колонтитула; используйте вместо этого div (см. доктор )
• НЕ используйте раздел, чтобы обернуть переключатель вкладок для манипулирования DOM или стилизации
• НЕ используйте раздел для боковой панели или других касательно связанных полей контента; использовать вместо
• НЕ используйте раздел только для того, чтобы добавить рамку или тень вокруг чего-либо; используйте вместо этого div
• НЕ используйте раздел для оболочки при реализации искусственные колонны ; снова используйте вместо этого div
• НЕ используйте раздел, чтобы вкладывать элементы при попытке избежать Баг с плавающей точкой в ​​IE6 (или похожая проблема, связанная с макетом); снова используйте div
• НЕ используйте раздел, чтобы держать биографию отдельного автора в блоге или новостной статье; использовать вместо

Мой вывод

Короче говоря, элемент <section> в HTML5 можно использовать в любом случае, где он содержит автономное, не синдицированное, не стороннее содержимое, обертка которого не предназначена для стилизации. Другими словами: вряд ли когда-либо.

Я думаю, что Джереми Кит сделал хорошее наблюдение когда он сказал:

Я не думаю, что должен быть элемент section и элемент article. У меня нет особенно сильного мнения о том, какой из них следует оставить, а какой - пойти, но небольшая подгонка определенно в порядке.

Когда я включил <section> в шаблон Easy HTML5, я намеревался представить его для возможного использования, и я не собирался превращать его в универсальную обертку для стилей. Я решил включить два элемента <section> в этот шаблон и обернуть их в общий <div>, чтобы было более понятно, как его использовать.

Как вы думаете? Можете ли вы вспомнить какие-либо другие ЗАДЕРЖКИ и ЗАДЕРЖКИ для элемента <section>, которые я могу добавить в список, чтобы сделать его использование более понятным? Я использовал это неправильно в любом из тех, кого я перечислил? Как вы думаете, нам вообще нужен элемент <section>?

Похожие

Комментарии