После нашего первого разговора о лексической, с точки зрения языка, семантике ссылок возникло чувство какой-то незавершённости, незаконченности. Данная статья призвана восполнить подобное упущение и добавить ещё чуть-чуть теории к семантике ссылок.
Теперь мы, по крайней мере, знаем, как следует создавать ссылки и какие из них являются правильными с точки зрения языка. Не будем терять полученные ранее сведения о принципах построения ссылок, напротив: давайте добавим в копилку наших знаний что-то новое и вместе с тем постараемся обобщить весь имеющийся набор знаний.
Сегодня мы будем использовать любимое всем нам слово: микроформаты. Микроформаты, микроформаты и ещё раз. Итак, не будем тянуть кота за рога, начнём.
Атрибут rel
Атрибут rel, который присутствует у элемента a (он присутствует и у элемента link, но сегодня он нам не интересен), позволяет нам указывать на то, какое отношение имеет ресурс, на который мы ссылаемся (посредством использования атрибута href) к текущему ресурсу. Rel означает отношение, что справедливо для ссылки, так как через неё мы можем выразить своё отношение к ресурсу. Спецификация W3 не определяет то, какие мы можем использовать значения атрибута rel, однако этим она предоставляет нам широкий простор для наших мыслей. Этим простором, кстати, воспользовались и разработчики микроформатов, приложив массу усилий к созданию семантики для элемента посредством использования атрибута rel. Но это не единственный атрибут, который можно использовать в элементе a.
Атрибут rev
Напротив атрибута rel стоит атрибут rev, который стоит в оппозиции вышеописанному атрибуту. Из этого уже можно сделать вывод о том, что данный атрибут описывает отношение цели к самому себе.
Ссылка в разрезе
С точки зрения (X)HTML, ссылка (а точнее, гиперссылка) — это элемент a, в котором должен обязательно присутствовать атрибут href для указания цели ссылки и могут присутствовать атрибуты указания отношений цели и текущего документа.
Вот она, простая ссылка:
Давайте разберём её на куски, а ещё лучше представим в виде какого-нибудь псевдо-кода:
В квадратных скобках здесь указаны необязательные параметры, весь остальной текст описывает то, что находится в том или ином месте, а именно:
- destination — то, на что направлена ссылка, на какой документ она ведёт, какой документ она связывает с текущим
- relation — это то, как цель ссылки соотносится с текущим документом (базовым документом)
- reverse — указывает на обратное значение relation
- human-readable-data — это, что видит пользователь как текст ссылки (о чём мы говорили в предыдущей статье)
С рекоммендаций мы знаем, что ссылка не может содержать в себе блочные элементы и не может содержать саму ссылку. От себя добавлю, что очень нежелательно располагать в ссылке любые элементы, кроме элементов текстовой разметки, таких как emphasis, strong emphasis. Изображения-ссылки со своей стороны я тоже не считаю слишком правильным и верным ходом, но без него порой не обойдёшься.
Если ещё раз вернуться к спецификации, то мы заметим, что у каждого элемента на странице может быть атрибут title, с помощью которого мы сможем представить неявную информацию об элементе, к которому применён данный атрибут, а также предоставим некоторый набор метаданных для людей с ограничением физических возможностей. Кроме того, использование данного атрибута может способствовать при исполнении такой задачи, как превращение определённых блоков кода на странице в данные, доступные для автоматической обработки приложениями.
Помимо всех вышеуказанных атрибутов, у ссылки есть два забытых и заброшенных атрибута: charset и hreflang, с помощью которых можно указать, соответственно, кодировку цели и язык цели (что является неоспоримым плюсом при работе с устройствами, которые используются людьми с ограниченными физическими возможностями). Смотрим в сторону XHTML 2.0 и видим следующее:
«The user agent must use this list as the field value of the accept-language request header when requesting the resource using HTTP»
Это значит, что данный атрибут играет не последнюю роль в формировании запроса к новому ресурсу браузером.
Микроформаты и ссылки
Что такое микроформат относительно ссылки? Говоря простым языком, это определённый набор атрибутов и их значений. Представьте себе слоёный пирог, в котором самым нижним слоем будет являться (X)HTML, а поверх него будет слой, ммм, с микроформатом rel-*.
Хорошо, хотите практики, давайте взглянем на нашу предыдущую ссылку:
Теперь добавим к ней микроформат XFN:
Всё, готово, теперь у нас есть микроразмеченная ссылка, на которую можно даже будет нажать и отправиться на сайт моего друга (friend) и коллеги (colleague). Вот такие вот у нас пироги слоёные.
rel-tag
Rel-tag — это микроформат для разметки тегов на странице. Для того, чтобыс с помощью этого микроформата разметить тег, нам нужно всего-лишь добавить атрибут rel со значением tag, и можно спать спокойно.
У этого микроформата есть своя небольшая особенность: за тег он считает не то, что написано как human-readable-data, то есть содержимое ссылки, а текст после последнего слеша в атрибуте href, то есть:
В случае с rel-tag, именем тега является параметр tagname. Помимо имени тега, вводится понятие пространства тегов (tagspace). Эта часть ссылки указывает на то, что по этому URI расположены используемые в документе теги.
Давайте рассмотрим теги на этом сайте, как если бы они были написаны обычным бесхозным верстальщиком:
В этом случае пространство тегов — это http://web-zine.org/tags/, так как именно там расположены все теги (виртуально). Мне в этой разметке не нравятся две вещи. Давайте разметим этот код правильно, с точки зрения микроформатов, добавив уже изученный атрибут rel:
Готово! Это значит, что теперь программные средства обработки данных не пройдут мимо таких ссылок. Но в этом коде мне ещё кое-что не нравится: он оформлен без использования POSH, что является огромным упущением. Посмотрите внимательно на этот список тегов. Список? Вы сказали список? Ах вот оно что!
rel-home
На момент написания статьи, данный формат является неутверждённым, но я думаю, он найдёт своё подтверждение в группе, работающей над микроформатами и его не отклонят. Данный микроформат очень прост и выполняет очень узкую и специфичную задачу: указывает на домашнюю, главную страницу сайта.
Помимо элемента a, данный микроформат может встречаться в элементе link в head-секции документа.
rel-bookmark
На самом деле, rel-bookmark не является микроформатом как таковым, хотя данная конструкция присутствует в микроформате hAtom, который используется для разметки однотипного периодического содержимого (за этой конструкцией скрываются посты в блоге, к примеру).
Не пугайтесь класса entry-title: это часть микроформата hAtom, чтобы показать, что приведённый блок кода является частью чего-то большего.
rel-license
С помощью микроформата rel-license, мы можем добавить ссылку на используемую данным документом лицензию. Повторюсь, чтобы не возникло недопонимания: цель нашей ссылки будет являться лицензией для текущего документа (базового документа или документа, который содержит эту ссылку). Всё очень просто! Например, я хочу указать, что использую Public Domain:
rel-nofollow
Данный микроформат позволяет нам оповестить поисковую систему о том, что переход по данном ссылке нежелателен. Это не значит, что поисковая система не будет индексировать документ, на который нацелена подобная ссылка; зато это значит, что её вес будет меньше относительно других ссылок в документе. Добавить её просто, как и другие подобные форматы:
XFN
XFN — это самая простая и самая ёмкая конструкция для создания микроформата, которая имеет, пожалуй, самый большой профиль из всех приведённых выше микроформатов. XFN также утилизирует атрибут rel, но делает это он чуть-чуть по-другому. XFN — это такой интересный формат, который помогает указать взаимоотношения между людьми, которые имеют прямое отношение к целевым ресурсам. XFN не используется для обозначения взаимоотношений между документами, только между людьми.
Атрибут rel в XFN может принимать следующий набор значений:
- Дружба, одно из значений: contact (знакомый, пару раз переписывались), acquaintance (обменивались репликами, не более), friend (друг)
- Физически: met (встречались физически)
- Профессиональные, любое из значений или несколько: co-worker (вместе работаете), colleague (коллега, объединяет профессия)
- Географические, одно из: co-resident (живёте под одной крышей), neighbor (сосед)
- Семейные: child (ребёнок), parent (родитель), sibling (сестра, брат, без разграничения), spouse (супруга), kin (дядя, тёта, и другие)
- Романтические, любое из значений: muse (муза), crush (разбила сердце), date (знакомая по службе знакомств), sweetheart (любимая)
Перечисляются данные значения через пробел, может быть несколько.
Вот, к примеру, мои взаимоотношения с CurlyBrace:
Вот и весь XFN. Вы можете ознакомиться с подробностями о формате, а для облегчения внедрения воспользоваться генератором XFN.
VoteLinks
Последний микроформат, который мы сегодня рассмотрим, является уникальным в некотором роде: он использует атрибут rev, а не rel, но принцип остаётся тем же. Данный микроформат следует использовать для того, чтобы выразить собственное отношение к документу, на который вы ссылаетесь (поэтому и rev, а не rel). У этого атрибута rev может присутствовать три состояния:
- vote-for — выразить своё согласие относительно целевого документа
- vote-abstain — выразить своё нейтральное отношение к целевому документу
- vote-against — выразить несогласие, протест целевому документу
Например, я хочу согласиться со одной из статей на Хабрахабре:
Или давайте я выражу свой протест другой статье на том же ресурсе:
Конец эпизода
Мне кажется, что я за две статьи смог привести немалое количество сведений относительно применения и свойств ссылок. Теперь, я надеюсь, вы знаете, как их создавать, как их применять и как семантически их обогащать. Никогда не пренебрегайте обогащением семантикой ваших документов или частей ваших документов: семантика как кислород, а её недостаток приводит к голоданию и, в конце концов, к истощению.
. Будьте бдительны, товарищи Web-разработчики.
