HTML5 для веб-дизайнеров

header

h1Скрипты для DOM/h1

/header

Эта книга скорее предназначена для дизайнеров, чем для программистов.

footer

автор: Джереми Кит

/footer

/section

aside

Так же как элемент header соответствует концепту шапки документа, элемент aside соответствует концепту боковой колонки. Когда я говорю «боковая колонка», я говорю не о положении. Одного того, что какое-то содержимое появляется слева или справа от главного содержимого, недостаточно для того, чтобы использовать элемент aside. Опять же имеет значение содержимое, а не положение.

Элемент aside должен использоваться для не связанного напрямую содержимого. Если у вас есть блок содержимого, который вы считаете отдельным от основного содержимого, тогда, возможно, его следует заключить в элемент aside. Задайте себе вопрос: можно ли удалить содержимое элемента aside так, что при этом главное содержимое документа или секции не потеряет смысл?

Хороший пример не связанного напрямую содержимого – врезки; они хорошо смотрятся, но вы можете убрать их, и это никак не повредит пониманию основного содержимого.

Помните, если ваш дизайн ставит какое-либо содержимое в боковую колонку, это еще не означает, что это содержимое должно находиться именно в aside. Например, довольно часто в боковую колонку ставится биография автора. Этот тип данных лучше подходит для того, чтобы быть внутри элемента footer, – спецификация явным образом утверждает, что информация об авторстве подходит для подвалов (рис. 5.01).

^{Рис. 5.01. Текст «об авторе» в этом скриншоте должен быть размечен с помощью footer, а не aside}

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

nav

Элемент nav выполняет ту самую функцию, которую, как вы предполагаете, он и должен выполнять. Он содержит навигационную информацию, обычно – список ссылок.

На самом деле давайте я лучше объясню. Элемент nav предназначен для очень важной информации по навигации. Одно то, что группа ссылок сгруппирована вместе в список, недостаточная причина для того, чтобы использовать элемент nav. С другой стороны, сквозная навигация по сайту почти наверняка должна содержаться в элементе nav.

Довольно часто элемент nav появляется внутри элемента header. Это вполне осмысленно, если вы вспомните, что элемент header может использоваться для «вспомогательной навигационной информации».

article

Для лучшего понимания можно представить, что элементы header, footer, nav и aside – это специализированные формы элемента section. Секция – это общий блок связанного содержимого, а шапки, подвалы, навигационные блоки и боковые колонки – блоки особого связанного содержимого.

Элемент article – еще один особый вид section. Его следует использовать для самостоятельного связанного содержимого. Теперь сложная часть – это решить, что значит «самостоятельный».

Задайте себе вопрос, стали бы вы передавать это содержимое в RSS или Atom-ленте. Если в таком конктексте это содержимое имеет смысл, тогда, скорее всего, article – нужный вам элемент. На самом деле элемент article спроектирован специально для агрегирования.

Если внутри article вы используете элемент time, можете добавить к нему необязательный булев атрибут pubdate, чтобы указать, что он содержит дату публикации:

article

header

h1Отзыв на книгу Скрипты для DOM/h1

/header

Маленький маяк, который освещает длинную и зачастую темную дорогу в мире JavaScript.

footer

Опубликовано в

time datetime=?2005-10-08T15:13? ачастую темную дорогу в мире JavaScript.

footer

Опубликовано в

time datetime="2005-10-08T15:13" pubdate

15:13 8 октября 2005 года.

/time

автор: Гленн Джонс

/footer

/article

Если внутри статьи у вас есть несколько элементов time, то атрибут pubdate может быть только у одного из них.

Элемент article особенно хорошо применим для записей в блогах, новостных репортажей, комментариев, оценок, записей на форумах. Он покрывает ровно те же сценарии, что и микроформат hAtom.

Но спецификация HTML5 идет дальше. Она также объявляет, что элемент article должен использоваться для самостоятельных виджетов: графиков акций, калькуляторов, часов, виджетов погоды и тому подобного. В этом случае элемент article пытается закрыть те же сценарии, что Web Slices компании Microsoft [13].