HTML5 для веб-дизайнеров — страница 9 из 12

HTML5 вводит несколько новых строчных элементов, чтобы расширить наш существующий арсенал, состоящий из span, strong, em, abbr и других. Ах да, больше мы не называем такие элементы «строчными» – теперь они описывают «семантику на уровне текста».

mark

Когда вы пролистываете список результатов поиска, вы заметите, что зачастую поисковый запрос подсвечен внутри каждого из результатов поиска. Вы можете разметить каждое вхождение поискового запроса элементом span, но span – костыль, не имеющий никакого семантического значения и годящийся мало на что, кроме как предоставлять место, куда можно было бы сунуть классы для применения стилей.

Можно использовать em или strong, но это не будет семантически верным; вы не хотите придавать особую важность запросу поиска, просто хотите, чтобы он был как-то выделен.

На сцену выходит элемент mark:

Результаты поиска по запросу 'единорог'
 Едем на единороге юзабилити
по радуге веба.

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

Элемент mark разрешается использовать и в других контекстах, кроме как в результатах поиска, но, убейте меня, я не могу придумать ни одного такого примера.

time

hCalendar – один из самых популярных микроформатов, потому что он удовлетворяет общую для многих потребность: размечать события так, чтобы пользователи могли добавлять их напрямую в свой календарь.

Единственная сложная часть в 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

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

9 из 10 кошек

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

9 кошек

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

optimum="21" value="25">
 Для этого времени года довольно-таки тепло.

progress

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

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

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

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

Структура

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

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

section

Элемент 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 выполняет ту самую функцию, которую, как вы предполагаете, он и должен выполнять. Он содержит навигационную информацию, обычно – список ссылок.

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

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

article

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

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

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

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

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

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

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

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

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

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

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

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

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

Мне кажется совершенно непонятным интуитивно, что элемент с названием «статья» должен применяться к концепту, известному как «виджет». Но, опять же, и статьи, и виджеты – самостоятельные, агрегируемые типы содержимого.

Что более проблематично – это то, что article и section очень во многом похожи. Все, что их разделяет, – слово «самостоятельный». Решить, какой элемент к чему относится, было бы просто при четких и быстрых правилах. В данном же случае все зависит от интерпретации. У вас может быть много статей внутри секции, много секций внутри статьи, можно создавать вложенные секции в секциях и статьи в статьях. Вы решаете, какой элемент больше подходит семантически в той или иной конкретной ситуации.

Лекарство от избытка дивов?

HTML5 дает нам массу новых структурных элементов, которые описаны выше. Они особенно полезны, если вы разрабатываете обыкновенный сайт, например блог. Большинство блогов разработаны так, что сначала идет шапка, затем набор статей, не имеющее прямого отношения содержимое в отдельном элементе и завершается все подвалом (рис. 5.02).

^{Рис. 5.02. Блог вашего покорного слуги}

Теперь вы можете заменить какие-то из своих элементов div на структурные элементы с большей семантической точностью. Но не переходите границу. Есть шансы, что если вы используете div сегодня, будете использовать его же и завтра. Не заменяйте ваши элемент div на новые глянцевые элементы HTML5 просто ради того, чтобы их использовать. Подумайте о содержимом.

Новые элементы были созданы не просто для того, чтобы заменить элементы div. Они наделяют веб-браузеры совершенно новыми возможностями для понимания вашего содержимого.

Модели содержимого