особенно полезен, когда используется вместе со скриптами для DOM. Вы можете использовать JavaScript для динамического обновления значения, позволяя браузеру тем самым сообщить это изменение пользователю – это весьма кстати для Ajax-загрузок файлов.
Структура
Еще в 2005 году компания Google провела ряд исследований, чтобы обнаружить, какие именно низко висящие плоды можно найти на тропках веба .
Парсер осмотрел более миллиарда веб-страниц и разметил самые частые названия классов. Результаты не принесли ничего неожиданного. Наиболее частыми были такие названия классов, как “header”, “footer” и “nav”. Эта зарождавшаяся в то время семантика отлично соотносится с новыми структурными элементами, появившимися в HTML5.
section
Элемент
section
используется для группировки тематически связанного содержимого. Это звучит очень похоже на элемент
div
, который зачастую используется как наиболее общий контейнер содержимого. Разница в том, что у
div
нет никакого семантического значения, его наличие ничего не говорит вам о содержимом внутри него. Напротив, элемент
section
явно используется для группировки связанного содержимого.
Вы вполне можете заменить ряд элементов
div
в своем коде элементами
section
, но не забудьте спросить себя: «Все ли содержимое связано друг с другом?»
<section>
<h1>Скрипты для DOM</h1>
Эта книга предназначена скорее для верстальщиков,
чем для программистов.
автор: Джереми Кит
</section>
header
Спецификация HTML5 описывает элемент
header
как контейнер для «группы вводных или навигационных вспомогательных элементов». Звучит вполне разумно. Это как раз тот тип содержимого, который я ожидаю увидеть в шапке страницы, и слово header как раз традиционно используется как синоним термина «шапка».
Между элементом
header
в HTML5 и общепринятым использованием слов header и «шапка» есть принципиальная разница. На странице шапка обычно только одна, но в документе может быть много элементов
header
. Вы можете, например, использовать элемент
header
внутри элемента
section
.
Пожалуй, это даже нужно делать. Спецификация определяет элемент
section
как «контейнер тематически сгруппированного содержимого, как правило, с заголовком».
<section>
<header>
<h1>Скрипты для DOM</h1>
</header>
Эта книга скорее предназначена для дизайнеров, чем для программистов.
автор: Джереми Кит
</section>
Элемент
header
обычно появляется в начале документа или секции, но это не обязательно должно быть так.
header
определяется в большей степени своим содержимым – вводными или навигационными вспомогательными элементами, – чем положением.
footer
Как и элемент
header
, по названию элемента
footer
кажется, что это описание положения, но, как и в случае с
header
, это не так. Вместо этого элемент
footer
должен содержать информацию об элементе, который его содержит: кто его автор, информацию о копирайте, ссылки на связанное содержимое и т. п.
Это отлично согласовывается с той ментальной моделью, которая есть у веб-разработчиков для слова «подвал». Разница в том, что, хотя мы привыкли использовать один подвал на весь документ, HTML5 позволяет нам делать подвалы и внутри секций.
<section>
<header>
<h1>Скрипты для DOM</h1>
</header>
Эта книга скорее предназначена для дизайнеров, чем для программистов.
<footer>
автор: Джереми Кит
</footer>
</section>
aside
Так же как элемент
header
соответствует концепту шапки документа, элемент
aside
соответствует концепту боковой колонки. Когда я говорю «боковая колонка», я говорю не о положении. Одного того, что какое-то содержимое появляется слева или справа от главного содержимого, недостаточно для того, чтобы использовать элемент
aside
. Опять же имеет значение содержимое, а не положение.
Элемент
aside
должен использоваться для не связанного напрямую содержимого. Если у вас есть блок содержимого, который вы считаете отдельным от основного содержимого, тогда, возможно, его следует заключить в элемент
aside
. Задайте себе вопрос: можно ли удалить содержимое элемента
aside
так, что при этом главное содержимое документа или секции не потеряет смысл?
Хороший пример не связанного напрямую содержимого – врезки; они хорошо смотрятся, но вы можете убрать их, и это никак не повредит пониманию основного содержимого.
Помните, если ваш дизайн ставит какое-либо содержимое в боковую колонку, это еще не означает, что это содержимое должно находиться именно в
aside
. Например, довольно часто в боковую колонку ставится биография автора. Этот тип данных лучше подходит для того, чтобы быть внутри элемента
footer
, – спецификация явным образом утверждает, что информация об авторстве подходит для подвалов (рис. 5.01).