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

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

Вы вполне можете заменить ряд элементов div в своем коде элементами section, но не забудьте спросить себя: «Все ли содержимое связано друг с другом?»

Скрипты для DOM

Эта книга предназначена скорее для верстальщиков,

чем для программистов.

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

header

Спецификация HTML5 описывает элемент header как контейнер для «группы вводных или навигационных вспомогательных элементов». Звучит вполне разумно. Это как раз тот тип содержимого, который я ожидаю увидеть в шапке страницы, и слово header как раз традиционно используется как синоним термина «шапка».

Между элементом header в HTML5 и общепринятым использованием слов header и «шапка» есть принципиальная разница. На странице шапка обычно только одна, но в документе может быть много элементов header. Вы можете, например, использовать элемент header внутри элемента section. Пожалуй, это даже нужно делать. Спецификация определяет элемент section как «контейнер тематически сгруппированного содержимого, как правило, с заголовком».

Скрипты для DOM

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

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

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

footer

Как и элемент header, по названию элемента footer кажется, что это описание положения, но, как и в случае с header, это не так. Вместо этого элемент footer должен содержать информацию об элементе, который его содержит: кто его автор, информацию о копирайте, ссылки на связанное содержимое и т. п.

Это отлично согласовывается с той ментальной моделью, которая есть у веб-разработчиков для слова «подвал». Разница в том, что, хотя мы привыкли использовать один подвал на весь документ, HTML5 позволяет нам делать подвалы и внутри секций.

Скрипты для DOM

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

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

aside

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

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

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

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

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

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

nav

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