Семантический HTML5. Часть 2
Продолжаем тему семантического HTML5 и нашего с вами "светлого будущего". Первая часть доступна здесь.
В этой статье поговорим об описаниях ссылок, микроформатах, ARIA ролях, новых типах данных для форм и многом другом.
Описание ссылок
В HTML5 ссылки можно описывать с помощью различных дополнительных типов:
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"/> <link rel="icon" href="/favicon.ico"/> <link rel="pingback" href="http://myblog.com/xmlrpc.php"/> <link rel="prefetch" href="http://myblog.com/main.php"/> ... <a rel="archives" href="http://myblog.com/archives">old posts</a> <a rel="external" href="http://notmysite.com">tutorial</a> <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a> <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a> <a rel="tag" href="http://myblog.com/category/games">games posts</a> ...
Очень хорошо эти атрибуты описаны в статье по ссылке:
rel="archives" указывает, что ссылка описывает набор записей, документов или других материалов, представляющих исторический интерес. Главная страница блога может содержать ссылку на список старых сообщений с указанием rel="archives".
rel="author" используется для ссылки на страницу с информацией об авторе. Это может быть почтовый адрес, хотя и не обязательно. Обычно это ссылка на контактную информацию или страницу «Об авторе».
Запись rel="external" сообщает, что ссылка ведет на документ, который не является частью сайта. Я считаю, что ее впервые популяризировал WordPress, когда использовал в ссылках комментариев.
HTML4 включает rel="start", rel="prev" и rel="next" для определения отношений между страницами, которые являются частью серии (например, разделы книги или даже сообщения в блоге). При этом корректно использовалась только запись rel="next". Люди вставляли rel="previous" вместо rel="prev", вставляли rel="begin" и rel="first" вместо rel="start", использовали rel="end" вместо rel="last". И ох, самостоятельно делали rel="up" для указания на «родительскую» страницу.
HTML5 включает rel="first" как наиболее распространенный вариант разных способов сказать «первая страница в серии» (rel="start" не является синонимом и оставлен для обратной совместимости). Еще добавлены rel="prev" и rel="next" как в HTML4, rel="previous" для обратной совместимости, а также rel="last" (последняя страница в серии, зеркальный к rel="first") и rel="up".
Лучший способ подумать о rel="up" это посмотреть на навигацию в виде хлебных крошек (или представить ее). Главная страница это первая страница в навигации, а текущая страница находится в хвосте. rel="up" указывает на страницу, следующую за последней в хлебных крошках.
rel="icon" является вторым по популярности отношением между ссылками после rel="stylesheet". Оно обычно используется вместе с иконкой сайта, вот так.
Все основные браузеры поддерживают такое связывание иконки со страницей. Обычно она отображается в адресной строке браузера рядом с URL или во вкладке браузера или в том и другом месте.
Новое в HTML5: атрибут sizes может быть использован для указания размера иконки.
rel="license" был включен сообществом по микроформатам. Такое отношение означает, что ссылка ведет на страницу с авторскими правами, согласно которым предоставляется текущий документ.
rel="nofollow" указывает, что ссылка не одобрена автором или издателем страницы или что ссылка на указанный документ включена в основном из-за коммерческих отношений между людьми связанных с этими страницами. Это отношение было изобретено в Google и стандартизировано в сообществе по микроформатам. WordPress вставляет rel="nofollow" в ссылки, добавленные в комментариях, полагая, что раз ссылки с nofollow не передают PageRank, то спамеры откажутся постить спам в комментариях блога. Этого не произошло, но rel="nofollow" остался.
rel="noreferrer" указывает, что информация о реферере не должна утекать при переходе по ссылке. Браузеры не поддерживают это отношение, однако оно недавно было добавлено в браузерный движок Webkit и в конечном итоге появится в Safari, Chrome и других браузерах, основанных на этом движке.
rel="pingback" указывает адрес пингбэк-сервера. Как поясняется в спецификации, «пингбэк» это способ для блога автоматически оповещать сайты, ссылающиеся на него. Это создает обратную связь — способ пройти назад по цепочке ссылок вместо «прямого прохода». В блогах, частности WordPress, пингбэк-механизм используется для уведомления авторов, что вы ссылаетесь на кого-то при создании новой записи.
rel="prefetch" сообщает, что превентивная выборка и кэширование указанного ресурса, вероятно, будет полезна и скорее всего пользователю понадобится этот ресурс. Поисковые системы иногда добавляют на страницу результатов поиска, если они полагают, что верхние результаты более популярны других. Посмотрите исходный код результатов поиска Google для CNN через Firefox и сделайте поиск по ключевому слову prefetch. Mozilla Firefox является пока единственным браузером, поддерживающим rel="prefetch".
rel="search" говорит, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. Так, если вы хотите полезно использовать rel="search", укажите на OpenSearch-документ, который описывает, как браузер может формировать адреса для поиска ключевых слов по текущему сайту. Формат OpenSearch поддерживается браузером Internet Explorer начиная с версии 7.0 и Mozilla Firefox с версии 2.0.
rel="sidebar" показывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера. Что это значит? В Opera и Firefox это реализовано так: когда я щелкаю по ссылке, открывается окно для добавления ссылки в панель закладок. Internet Explorer, Safari и Chrome игнорируют rel="sidebar" и покажут обычную ссылку.
rel="tag" сообщает, что метка непосредственно связана с текущим документом. Понятие «метка» (теги, категории) было придумано компанией Technorati для помощи в систематизации постов блога. Ранее блоги и руководства и называли их «метки Technorati». Вы правильно поняли: коммерческая компания убедила весь мир добавить метаданные, которые сделают труд компании проще. Прекрасная работа! Синтаксис позже был стандартизирован сообществом по микроформатам, где его просто назвали rel="tag". В большинстве систем блогов, которые позволяют связывать категории, ключевые слова или метки с постами, ссылки маркируются через rel="tag". Браузеры ничего особого с такими ссылками не делают, поскольку они в действительности предназначены для поисковых систем.
И да, вы можете придумать свой вариант rel и отослать его на рассмотрение W3C (они все-равно любят фигней заниматься).
Микроформаты
Неожиданно, но микроформаты никуда не деваются. Наоборот, они "обросли" новыми свойствами и атрибутами.
<div itemscope itemtype="http://example.org/band"> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div>
Честно говоря, там столько всего, что нужно погрузиться очень глубоко, чтобы в этом разобраться досконально. У кого есть несколько часов свободного времени - велкам на страницу с описанием всех форматов.
Новые типы данных для форм
"Жирное" нововведение - новые типы данных для форм (к сожалению, не поддерживаются в полном объеме ни одним современным браузером, хотя на мой взгляд, все остальные "фичи" HTML5 по сравнению с этой - просто фигня). Суть состоит в том, что тип формы text может принимать всевозможные значения - от email до search:
<input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />
Также на отдельные типы и их состояния можно вешать свои стили:
<style>
[required] {
border-color: #88a;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
}
:invalid {
border-color: #e88;
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
}
</style>
Самый сок в том, что это работает (будет работать?) для мобильных устройств:
Accessible Rich Internet Applications (WAI-ARIA)
Еще одним семантическим нововведением являются ARIA типы, а точнее "роли", которые можно назначать различным элементам. Список ролей достаточно большой:
alert, alertdialog, application, article, banner, button, checkbox, combobox, complementary, contentinfo, definition, dialog, directory, document , grid, gridcell, group, img, link, list, listbox, listitem, log, main, marquee, math, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, navigation, note, option, presentation, progressbar, radio, radiogroup, region, row, search, separator, slider, spinbutton, status, tab, tabpanel, textbox, timer, toolbar, tooltip, tree, treegrid, treeitem
Пример использования ролей:
<ul id="tree1"
role="tree"
tabindex="0"
aria-labelledby="label_1">
<li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
<li role="group">
<ul>
<li role="treeitem" tabindex="-1">Oranges</li>
<li role="treeitem" tabindex="-1">Pineapples</li>
...
</ul>
</li>
</ul>
Многие роли пересекаются с названиями тэг. Более подробней можно почитать о ARIA по ссылке. Как и в случае с микроформатами, там "все сложно".
Выводы
На самом деле, не такие оптимистичные, как хотелось бы. Вместо понятных семантических тэгов мы получаем большое количество новых тэгов, которые заменяют устаревшие, а часть из которых попросту не нужна. Пример - тэг aside, о корректном использовании котором уже спорят. Микроформаты, ARIA роли, да еще и типы ссылок вносят больше хаоса, чем умиротворения. Так как необходимо будет верстать с использованием старых микроформатов (vcard, rss, hcalendar и т.д.), а также новых, научится не путать роли и тэги, а также расставлять типы ссылок (вот это SEO оптимизаторы зат**аются!) В общем, как всегда, последнее слово будет за поисковикам (и, возможно, небольшой голос у браузеров).
В любом случае, правильной дорогой идем, товарищи. Новые возможности дают много свободы и гибкости, а проблемы были всегда. Так что, ребята, желаю много валидной верстки и мало IE6!