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

В любом случае такая расширяемость, скорее всего, мало будет интересовать большинство веб-разработчиков. Что действительно имеет значение – это встроенная семантика, относительно которой существует согласие в сообществе и которая реализована производителями браузеров.

Новые элементы

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