Единственная сложная часть в hCalendar – описывать дату и время так, чтобы компьютер мог их прочитать. Люди любят описывать даты: «25 мая» или: «в следующую среду», но парсеры хотят видеть красиво отформатированную по ISO дату: YYYY-MM-DDThh: mm: ss.

Сообщество по микроформатам придумало несколько умных решений этой проблемы, например использование элемента abbr:

12 января 1992

Если от того, что вы используете элемент abbrтаким образом, вас начинает немножко мутить, есть много других способов размечать машиночитаемые даты и время в микроформатах с помощью шаблона класс-значение. В HTML5 эта проблема разрешается новым элементом time:

12 января, 1992

Элемент timeможет использоваться для обозначения даты, времени или того и другого вместе:

17 часов

7 апреля

в 17 часов, 7 апреля

Вам необязательно ставить значение даты и времени в атрибут datetime, но если вы этого не делаете, то должны отобразить значение для пользователя:

2010-04-07

Элемент meterможет использоваться для разметки любых измерений, если эти измерения являются частью шкалы с минимальным и максимальным значением.

9 из 10 кошек

Если вы не хотите, можете не выводить максимальное значение, а использовать вместо него атрибут max:

9 кошек

Имеется также соответствующий атрибут min. Есть еще атрибуты high, lowи optimum, с которыми тоже можно поиграть. Если хотите, вы можете вообще спрятать сам результат измерения в атрибут value.

optimum="21" value="25">

Для этого времени года довольно-таки тепло.

Если meter хорошо подходит для описания чего-то, что уже было измерено, элемент progressпозволяет вам разметить значение, которое меняется сейчас:

Ваш профиль заполнен на 60%.

И снова у вас есть атрибуты min, maxи value, если вы предпочитаете использовать их:

Элемент progressособенно полезен, когда используется вместе со скриптами для DOM. Вы можете использовать JavaScript для динамического обновления значения, позволяя браузеру тем самым сообщить это изменение пользователю – это весьма кстати для Ajax-загрузок файлов.

Еще в 2005 году компания Google провела ряд исследований, чтобы обнаружить, какие именно низко висящие плоды можно найти на тропках веба ( http://code.google.com/webstats/).

Парсер осмотрел более миллиарда веб-страниц и разметил самые частые названия классов. Результаты не принесли ничего неожиданного. Наиболее частыми были такие названия классов, как “header”, “footer” и “nav”. Эта зарождавшаяся в то время семантика отлично соотносится с новыми структурными элементами, появившимися в HTML5.

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

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

Скрипты для DOM

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

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

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

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

Скрипты для DOM

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

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

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

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

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

Скрипты для DOM

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

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

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

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

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

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