Верстка страниц с использованием HTML5 и CSS3.

[Mortician]

Здравствуйте.

У меня возникли проблемы с новыми семантическими тэгами языка разметки HTML5. Не могу определиться в каком случае выбрать тэг <section> , а в каком случае <div> , также нет полной уверенности в том что я правильно понимаю сущность тэга <article> . Еще одна проблема это правильность структуры заголовков h1 - h6.

Приблизительно то что я хочу сделать я набросал на этой "наскальной живописи":

Для "Шапки" я использую тэг <header> , внутри "Шапки" расположен тэг <nav> , сразу за "Шапкой" идет тэг <section> для "Слайдера" главной страницы, потом идет <section> для "Имени документа" в котором лежит тэг <h1> .

Самая большая проблема, - какой тэг правильно выбрать для "Содержимого"? Пока использую <section> , в котором находятся три столбика с кратким описанием сайта.., для них я выбрал тэг <article> . Внутри каждого столбика есть заголовок <h1> .

Внизу идет "Подвал" <footer> , который разделен на две части "Серая" и "Черная" (Копирайт), для этого использую два тэга <section> . "Серая часть" состоит из трех столбиков для которых в этом случае я выбрал <section> внутри каждого столбика будет <h1> и <nav> . Черная часть (Копирайт) не интересна.

Подскажите пожалуйста, правильно ли я выбрал тэги и структуру разметки? К сожалению у меня опыта верстки почти нет.

Пока еще не начал верстать, так, что кода разметки пока нет.

Прошу прощения, если что не так.

Edited February 25, 2011 by Mortician

[Great Rash]

Эта тема достаточно холиварная. Т.к. на самом деле никто толком не знает как единственно правильно применять те или иные семантические элементы.

Выскажу свои соображения:

1) Тег <section> предназначен для хранения часто повторяющейся информации на сайте. Т.е. представьте себе блог, вот в нем есть статья и комментарии к ней. Вот комментарий - это типичный <section>. По этому для блока "Слайдер" я бы использовал <div>.

2) "Имя документа" - не совсем понятно, что это за блок? Может быть туда лучше подойдет тег из семейства заголовков (h2-h6)?

3) "Содержимое" - это тоже типичный <div>. И вообще, я считаю, что все элементы, которые относятся непосредственно к лэйауту, не должны нести семантической нагрузки. Вот каждая колонка внутри - это уже будет <section>.

Вообще раньше считалось, что тег <h1> должен быть один на странице. Насколько я знаю сейчас это уже не так, но я бы все-таки придерживался этого правила, просто на всякий пожарный.

[Vlad]

Тег h1 должен быть свой внутри <section> и <article>, они создают новый структурный независимый блок.

[Mortician]

Great Rash Спасибо за помощь! То что я прочел из стандарта и двух книг позволяет мне с уверенностью утвеждать, что запись в блоге нужно помещать в <article>

Vlad Спасибо за подсказку! Я как-то доконца не понимал как создавать правильную структуру заголовков и были сомения по поводу <section>

Короче теперь я понял. Тэг <section> для "Имя документа" нужно устранить он не имеет ни какой логической нагрузки - в нем только несвязанный ни с чем заголовок <h1>. Нужно объеденить "Имя документа" и "Содержимое" в один <section>, тогда появляется логически осмысленное группирование.

Edited February 25, 2011 by Mortician

[SelenIT]

Насколько я понимаю объяснения HTML5-докторов (и дальше по ссылкам), article — это самодостаточный смысловой блок (собственно статья в блоге или энциклопедии, новость, комментарий (!) и т.п.). А section может либо группировать такие блоки одного типа (лента новостей или комментариев), либо выделять в нем смысловые подразделы (главы и т.п.), не являющиеся самодостаточными, но заслуживающие упоминания в оглавлении.

[Vlad]

<section> и <article> в чём-то равнозначны, только цели различаются, так что вполне можно использовать такую схему:

<article>
<header><h1>Имя документа</h1></header>
содержимое
  <section>Колонка 1</section>
  <section>Колонка 2</section>
  <section>Колонка 3</section>
</article>

С подвалом аналогично можно поступить.

[Mortician]

SelenIT, Vlad Спасибо за помощь!

Вот еще интересный взгляд на <section> и <article> в книге Jeremy Keith, HTML5 for Web Designers:

Полезно думать о <header>, <footer>, <nav>, и <aside> как о специализированных формах элемента <section>. <section> - универсальный блок содержащий логически связанный контент, в то время как <header>, <footer>, <nav>, и <asides> это блоки определенных разновидностей, содержащие связанный контент. Элемент <article> это то же другой специализированный вид тэга <section>. Используйте его для самодостаточного логически связанного контента. Теперь хитрая часть - как решить, что представляет из себя "самодостаточный".

Спросите себя, если бы Вы объединили бы контент в RSS или Atom фид, контент все еще имел бы смысл в этом контексте? Если да, то вероятно <article>, правильно выбранный элемент. Фактически, элемент <article> специально предназначен для объединения в синдикаты. Если Вы используете time элемент в пределах <article>, Вы можете также добавить дополнительный логический pubdate атрибут, чтобы указать, что он содержит дату публикации.

Edited February 25, 2011 by Mortician