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

Вскипятить океан

То, что микроформаты использовались в качестве модели для разработки HTML5, приходится не всем по вкусу. Хотя правило 80/20 достаточно хорошо работает для сермяжного мира наименований классов, действительно ли оно достаточно хорошо для самого важного языка разметки в мире?

Некоторые считают, что HTML должен быть бесконечно расширяемым. Это значит, что давать решения для большинства случаев недостаточно: язык должен предоставлять решения для любого возможного сценария.

Пожалуй, самый красноречивый аргумент такого типа привел Джон Олсоп (John Allsopp) в своей великолепной статье на A List Apart, «Семантика в HTML5» [11] :

Нам не нужно, чтобы в словарь HTML добавляли специфические термины, нам нужно добавить механизм, который позволит добавлять семантическую насыщенность к документу по мере необходимости.

Уже существуют технологии для того, чтобы делать именно это. RDFa позволяют авторам встраивать в HTML-документы собственные словари. Но в отличие от микроформатов – которые просто используют заранее оговоренный набор наименований классов, – RDFa использует пространства имен для бесконечного разнообразия форматов. Так, там, где микроформат будет использовать примерно такую разметку: <h1 class="summary">, RDFa будет использовать: <h1 property="myformat:summary">.

11

Полная ссылка: http://www.alistapart.com/articles/semanticsinHTML5/.

Нет никакого сомнения в том, что RDFa – потенциально очень мощный инструмент, но его выразительность имеет свою цену. Пространства имен вводит дополнительный уровень сложности, который не очень согласуется с относительно простой природой HTML.

Спор о пространствах имен не нов. В записи в своем блоге несколько лет назад Марк Ноттингем (Mark Nottingham) размышлял о потенциально деструктивных побочных эффектах [12] :

Что мне представляется интересным относительно расширяемости HTML – то, что пространства имен были необязательными: Netscape добавила blink, MSFT – marquee и т. п. Я бы сказал, что если бы в HTML с самого начала были пространства имен, это имело бы следующий эффект: вместо того чтобы (в конце концов) сойтись на одном и том же решении, различия между разными браузерами были бы легитимизированы и окончательно закреплены.

12

Полная ссылка: http://www.mnot.net/blog/2006/04/07/extensibility/.

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

Скорее всего, HTML5 будет выпущен с каким-либо методом расширения его встроенной семантики. Конечно, атрибут class все еще на месте, поэтому микроформаты будут работать так, как работали. Возможно, HTML5 изменится, чтобы стать совместимым с RDFa, или, возможно, он будет использовать свой собственный словарь «микроданных».

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

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

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

mark

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

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

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

<h1>Результаты поиска по запросу 'единорог'</h1>
<ol>
 <li><a href="#">

Едем на <mark>единороге</mark> юзабилитипо радуге веба.

 </a></li>
</ol>

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

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

time

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

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

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

<abbr class="dtstart" title="1992-01-12">
 12 января 1992
</abbr>

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

<time class="dtstart" datetime="1992-01-12">
 12 января, 1992
</time>

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

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

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

<time>2010-04-07</time>

meter

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

<meter>9 из 10 кошек</meter>

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