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

time datetime="2010-04-07T17:00"в 17 часов, 7 апреля/time

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

time2010-04-07/time

meter

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

meter9 из 10 кошек/meter

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

meter max="10"9 кошек/meter

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

meter low="-273" high="100" min="12" max="30"optimum="21" value="25"

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

/meter

progress

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

Ваш профиль заполнен на progress60%/progress.

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

progress min="0" max="100" value="60"/progress

Элемент progress особенно полезен, когда используется вместе со скриптами для 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