Раздел Html5 или не раздел?

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

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

Вот моя ситуация. Я разрабатываю систему заказов. На интерфейсе продавцов у меня есть 3 столбца (inline), которые представляют статус заказа. Когда статус изменен, элемент перемещается из одного столбца в другой (фоновый ajax и js-манипуляция).

В Html4 я бы использовал 3 divs и поместил заголовок с заголовком поверх каждого из них. Элементы внутри столбцов также будут divs.

Но как насчет HTML5? Я смотрел на элемент раздела, но я не уверен, как его использовать. Вот варианты:

  • Поместите все в один раздел - я не думаю, что это путь.
  • Поместите раздел вокруг каждого из разделов столбца и заголовок внутри раздела
  • Заменить divs секциями
  • Поместить разделы внутри столбцов div

Итак, какой путь?

EDIT:, прежде всего, благодарю всех за ваши быстрые ответы. В конце концов я, вероятно, поеду с предложением Яна Девлинса и поместит каждый столбец в качестве раздела. В любом случае, просто чтобы указать на мое недовольство html5, несколько разрешенных вариантов не всегда хорошо. Я боюсь, что будет выглядеть веб-сайт html5 через несколько лет, когда мы не сможем полностью согласиться с таким простым вопросом.

EDIT2: еще одна вещь. Я спрошу его здесь, поэтому мне не нужно открывать другой вопрос. В дополнение к этим 3 столбцам у меня есть еще один div, который содержит детали заказа, когда выбран любой из заказов. Должна ли быть статья с ее автономного содержимого или использовать тег в стороне?

Ответы

Ответ 1

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

например.

<div>
   <section id="col1">
      <header><h1>Column 1</h1></header>
      content....
   </section>
   <section id="col2">
      <header><h1>Column 2</h1></header>
      content....
   </section>
   <section id="col3">
      <header><h1>Column 3</h1></header>
      content....
   </section>
</div>

Ответ 2

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

Ответ 3

Чтобы процитировать спецификацию w3.org:

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

И еще одна цитата из людей w3.org:

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

Учитывая определение section на w3, мы можем заключить, что ваш пример будет полезным использованием раздела, потому что:

  • Элементы имеют заголовок
  • Это тематическая группировка контента
  • Это часть контура документа.

EDIT: Чтобы развернуть свой комментарий ниже, новые элементы HTML5 НЕ должны заменить старые элементы HTML4. Например, просмотр страницы и замена всех элементов div элементами section были бы неправильными. Элемент section был, на мой взгляд, предназначен для облегчения машинам анализировать определенные страницы (подумайте: feedburners), предоставив более семантическую структуру странице. В конце концов, что проще разобрать, страница с 30 div элементами или страница с 10 div 5 header 5 section 5 article и 5 footer элементами?