Примечание: ниже перевод статьи «Boost Your Hyperlink Power». В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.
Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).
Ссылка как она есть
Весь потенциал ссылок заключается в атрибуте href, сокращение от hypertext reference. Он создает одностороннюю связь текущей страницы с другим ресурсом, обычно другой такой же страницей в интернете:
<a href="http://allinthehead.com/">
Атрибут href находится в открывающем теге a, между открывающим и закрывающим тегами находится текст для описания ссылки:
<a href="http://allinthehead.com/">Drew McLellan</a>
«Ну и что», — скажите вы. — «Это я все и так знаю», — и будете абсолютно правы! Но у ссылки есть еще кое-что, кроме атрибута href.
Теория относительности (relativity)
Может быть, вы уже читали про атрибут rel у ссылки. Я готов поспорить, что в секции head ваших страниц будет располагаться что-нибудь типа этого:
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
Атрибут rel описывает связь между текущим документом и тем, на который он указывает. В этом случае, значением атрибута rel является stylesheet. Это означает, что связанный документ является таблицей стилей для текущего: между ними именно такая связь.
Еще одно распространенное употребление rel:
<link rel="alternate" type="application/rss+xml" title="Моя RSS-лента" href="index.xml" />
В данном случае связь между текущим документом и связанным — RSS-лентой — указана как alternate: альтернативное преставление текущего документа.
Оба этих примера используют тег link, но вы можете использовать атрибут rel и у обычных ссылок. Например, вы ссылаетесь на вашу RSS-ленту из секции :
Подпишитесь на <a href="index.xml">мою RSS-ленту</a>.
Вы можете добавить дополнительную информацию к этой ссылке, используя атрибут rel:
Подпишитесь на <a href="index.xml" rel="alternate" type="application/rss+xml">мою RSS-ленту</a>.
Не существует определенного списка значений для атрибута rel, поэтому вы можете использовать все, что посчитаете семантически разумным. Например, если у вас сложное коммерческое веб-приложение, в котором присутствует ссылка на подсказку, то вы можете определить связь между текущей страницей и этой подсказкой, используя значение help:
<a href="help.html" rel="help">нужна подсказка?</a>
Элементарные микроформаты
Хотя вы абсолютно свободны в использовании значений атрибута rel, существует уже некоторые общепринятые значения при использовании микроформатов. Некоторые из простейших микроформатов предлагают варианты грамотного использования rel. Например, если вы ссылаетесь на лицензию, под которой опубликован данный документ, используйте микроформат rel-license:
Распространяется под лицензией <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">Creative Commons</a>
Эта конструкция описывает, что текущая страница ссылается на документ, помеченный как «лицензия».
Микроформат rel-tag идет немного дальше. Он используется для указания на то, что последняя часть URL'а у ссылки является «меткой» для текущего документа:
Прочитайте про <a href="http://en.wikipedia.org/wiki/Microformats" rel="tag">семантическую верстку</a>
В данном случае для этого документа добавлена метка «Microformats».
XFN (XHTML Friends Network) является способом описания отношений между людьми:
<a href="http://allinthehead.com/" rel="friend">Drew McLellan</a>
Этот микроформат в значительной степени расширяет возможное применение атрибута rel. Так же, как и атрибут class, rel может принимать несколько значений, разделенных пробелом:
<a href="http://allinthehead.com/" rel="friend met colleague">Drew McLellan</a>
Таким образом я указываю, что Drew мой друг, я с ним встречался, и он мой коллега (ведь мы оба фанатеем от интернета (Web monkies)).
«Мы — хотим перемен» (revolution)
Если rel описывает связь между текущей страницей и той, на которую она ссылается, (прим.: текущая страница -> другая страница) то rev используется для обратной зависимости: он определяет вид связи страницы, на которую ссылаются, с текущей (прим.: текущая страница <- другая страница). Ниже приведен пример, который может быть использован в help.html:
<a href="shoppingcart.html" rev="help">вернуться в магазин</a>
Атрибут rev указывает, что текущая страница является страницей помощи, подсказкой для той, на которую она ссылается.
Микроформат vote-links позволяет вам использовать атрибут rev для уточнения ваших ссылок. Например, определяя значение vote-for, вы можете указать, что ваш документ поддерживает тот, на который ссылается:
Я согласен с <a href="http://richarddawkins.net/home" rev="vote-for">Richard Dawkins</a>.
Есть и соответствующее значение vote-against. Оно означает, что хоть вы и ссылаетесь на этот документ, но вы явно указываете, что с ним не согласны.
Я согласен с <a href="http://richarddawkins.net/home" rev="vote-for">Richard Dawkins</a>
по поводу <a href="http://www.icr.org/" rev="vote-against">креационистов</a>.
Естественно, ничего не мешает использовать в одной ссылке и rel, и rev:
<a href="http://richarddawkins.net/home" rev="vote-for" rel="muse">Richard Dawkins</a>
Разумность большинства
За легкостью использования rel и rev скрывается богатый потенциал. Они позволяет относительно легко добавить в ваши ссылки больше семантического смысла, что создает связи, которые затем могут быть обработы поисковыми роботами, агрегаторами или браузерами. Пусть вашим следующим шагом станет тесное знакомство с этими атрибутами и расширение возможностей ссылок.
Сссылки по теме
Большое спасибо тем, кто прочитал всю статью полностью. Мне хотелось бы услышать ваше мнение или замечания по поводу использования rel/rev, в частности, или микроформатов вообще.
Web Optimizator: проверка скорости загрузки сайтов
