Семантика ссылок, продолжаем

3 июля 2008 года, 04:27

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

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

Сегодня мы будем использовать любимое всем нам слово: микроформаты. Микроформаты, микроформаты и ещё раз. Итак, не будем тянуть кота за рога, начнём.

Атрибут rel

Доклад о микроформатах можно прослушать в W3Cast, втором выпуске.

Атрибут rel, который присутствует у элемента a (он присутствует и у элемента link, но сегодня он нам не интересен), позволяет нам указывать на то, какое отношение имеет ресурс, на который мы ссылаемся (посредством использования атрибута href) к текущему ресурсу. Rel означает отношение, что справедливо для ссылки, так как через неё мы можем выразить своё отношение к ресурсу. Спецификация W3 не определяет то, какие мы можем использовать значения атрибута rel, однако этим она предоставляет нам широкий простор для наших мыслей. Этим простором, кстати, воспользовались и разработчики микроформатов, приложив массу усилий к созданию семантики для элемента посредством использования атрибута rel. Но это не единственный атрибут, который можно использовать в элементе a.

Атрибут rev

Цель — это то, что указано в атрибуте href ссылки.

Напротив атрибута rel стоит атрибут rev, который стоит в оппозиции вышеописанному атрибуту. Из этого уже можно сделать вывод о том, что данный атрибут описывает отношение цели к самому себе.

Ссылка в разрезе

С точки зрения (X)HTML, ссылка (а точнее, гиперссылка) — это элемент a, в котором должен обязательно присутствовать атрибут href для указания цели ссылки и могут присутствовать атрибуты указания отношений цели и текущего документа.

Вот она, простая ссылка:

<a href="http://www.webmakerslounge.com/" >The Webmakers Lounge</a>

Давайте разберём её на куски, а ещё лучше представим в виде какого-нибудь псевдо-кода:

<a href="destination" [rel="relation"] [rev="reverse"]>human-readable-data</a>

В квадратных скобках здесь указаны необязательные параметры, весь остальной текст описывает то, что находится в том или ином месте, а именно:

  • 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-*.

Хорошо, хотите практики, давайте взглянем на нашу предыдущую ссылку:

<a href="http://www.webmakerslounge.com/" >The Webmakers Lounge</a>

Теперь добавим к ней микроформат XFN:

<a href="http://www.webmakerslounge.com/" rel="friend colleague" >The Webmakers Lounge</a>

Всё, готово, теперь у нас есть микроразмеченная ссылка, на которую можно даже будет нажать и отправиться на сайт моего друга (friend) и коллеги (colleague). Вот такие вот у нас пироги слоёные.

rel-tag

Rel-tag — это микроформат для разметки тегов на странице. Для того, чтобыс с помощью этого микроформата разметить тег, нам нужно всего-лишь добавить атрибут rel со значением tag, и можно спать спокойно.

У этого микроформата есть своя небольшая особенность: за тег он считает не то, что написано как human-readable-data, то есть содержимое ссылки, а текст после последнего слеша в атрибуте href, то есть:

<a href="tagspace/tagname">human-readable-data</a>

В случае с rel-tag, именем тега является параметр tagname. Помимо имени тега, вводится понятие пространства тегов (tagspace). Эта часть ссылки указывает на то, что по этому URI расположены используемые в документе теги.

Давайте рассмотрим теги на этом сайте, как если бы они были написаны обычным бесхозным верстальщиком:

<a href="http://web-zine.org/tags/концепт">концепт</a>, <a href="http://web-zine.org/tags/юзабилити">юзабилити</a>, <a href="http://web-zine.org/tags/JavaScript">JavaScript</a>, <a href="http://web-zine.org/tags/CSS" >CSS</a>

В этом случае пространство тегов — это http://web-zine.org/tags/, так как именно там расположены все теги (виртуально). Мне в этой разметке не нравятся две вещи. Давайте разметим этот код правильно, с точки зрения микроформатов, добавив уже изученный атрибут rel:

<a href="http://web-zine.org/tags/концепт" rel="tag">концепт</a>, <a href="http://web-zine.org/tags/юзабилити" rel="tag">юзабилити</a>, <a href="http://web-zine.org/tags/JavaScript" rel="tag">JavaScript</a>, <a href="http://web-zine.org/tags/CSS" rel="tag" >CSS</a>

Готово! Это значит, что теперь программные средства обработки данных не пройдут мимо таких ссылок. Но в этом коде мне ещё кое-что не нравится: он оформлен без использования POSH, что является огромным упущением. Посмотрите внимательно на этот список тегов. Список? Вы сказали список? Ах вот оно что!

<ul class="tagspace"> <li><a href="http://web-zine.org/tags/концепт" rel="tag">концепт</a>,</li> <li><a href="http://web-zine.org/tags/юзабилити" rel="tag">юзабилити</a>,</li> <li><a href="http://web-zine.org/tags/JavaScript" rel="tag">JavaScript</a>,</li> <li><a href="http://web-zine.org/tags/CSS" rel="tag" >CSS</a></li> </ul>

rel-home

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

<p> Проследуйте на <a href="http://web-zine.org/" rel="home">главную страницу</a>. </p>

Помимо элемента a, данный микроформат может встречаться в элементе link в head-секции документа.

rel-bookmark

На самом деле, rel-bookmark не является микроформатом как таковым, хотя данная конструкция присутствует в микроформате hAtom, который используется для разметки однотипного периодического содержимого (за этой конструкцией скрываются посты в блоге, к примеру).

... <p> <a class="entry-title" href="http://web-zine.org/art/select_my_site" rel="bookmark">Моя статья левее твоей</a>. </p> ...

Не пугайтесь класса entry-title: это часть микроформата hAtom, чтобы показать, что приведённый блок кода является частью чего-то большего.

rel-license

С помощью микроформата rel-license, мы можем добавить ссылку на используемую данным документом лицензию. Повторюсь, чтобы не возникло недопонимания: цель нашей ссылки будет являться лицензией для текущего документа (базового документа или документа, который содержит эту ссылку). Всё очень просто! Например, я хочу указать, что использую Public Domain:

<p> Весь материал опубликован по лицензии <a href="http://creativecommons.org/licenses/publicdomain/" rel="license">Public Domain</a>. </p>

rel-nofollow

Данный микроформат позволяет нам оповестить поисковую систему о том, что переход по данном ссылке нежелателен. Это не значит, что поисковая система не будет индексировать документ, на который нацелена подобная ссылка; зато это значит, что её вес будет меньше относительно других ссылок в документе. Добавить её просто, как и другие подобные форматы:

<p> Вот этот нехороший <a href="http://resource.spam/" rel="nofollow">ресурс</a>. </p>

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:

<a href="http://www.webmakerslounge.com/" rel="friend colleague" >The Webmakers Lounge</a>

Вот и весь XFN. Вы можете ознакомиться с подробностями о формате, а для облегчения внедрения воспользоваться генератором XFN.

VoteLinks

Последний микроформат, который мы сегодня рассмотрим, является уникальным в некотором роде: он использует атрибут rev, а не rel, но принцип остаётся тем же. Данный микроформат следует использовать для того, чтобы выразить собственное отношение к документу, на который вы ссылаетесь (поэтому и rev, а не rel). У этого атрибута rev может присутствовать три состояния:

  • vote-for — выразить своё согласие относительно целевого документа
  • vote-abstain — выразить своё нейтральное отношение к целевому документу
  • vote-against — выразить несогласие, протест целевому документу

Например, я хочу согласиться со одной из статей на Хабрахабре:

<p> Я согласен со всеми доводами <a href="http://habrahabr.ru/blog/announcements/45720.html" rev="vote-for" >данной статьи</a>. Поговорим об этом? </p>

Или давайте я выражу свой протест другой статье на том же ресурсе:

<p> Мне не понравился <a href="http://habrahabr.ru/blog/humour/45716.html" rev="vote-against" >последний комикс </a>, а вам? </p>

Конец эпизода

Мне кажется, что я за две статьи смог привести немалое количество сведений относительно применения и свойств ссылок. Теперь, я надеюсь, вы знаете, как их создавать, как их применять и как семантически их обогащать. Никогда не пренебрегайте обогащением семантикой ваших документов или частей ваших документов: семантика как кислород, а её недостаток приводит к голоданию и, в конце концов, к истощению.. Будьте бдительны, товарищи Web-разработчики.

Мнения (14)

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

  • Rakovets` Oleksandr

    05 июля 2008 г.21:56

    Интересно, спасибо!

    Можно 2 пожелания: увеличить шрифт code в блоге, т.e. разительно отличается от основного текста, и немного неудобно.

    А так же как-то лучше отдавать этот же code в RSS, а то приходит обычным текстом, некрасиво. :(

  • Дин автор

    05 июля 2008 г.23:06

    Упс, типограф опять балуется. Исправлю потом этот несчастный баг.

    Для сообщений не относящихся к содержимому статьи есть приватные сообщения. ;-)

    Но если так получилось, то отвечу прям здесь: шрифт code я могу, конечно, увеличить, но обычно они делаются меньше основного контента, так как код; RSS-представление постараюсь исправить.

    Удачи!

  • Alex Lov

    07 июля 2008 г.00:28

    Хорошая статья, спасибо.

    Может продолжишь про микроформаты? Очень понятно и структурировано получается.

  • Дин автор

    07 июля 2008 г.00:38

    Хорошо, я продолжу. Про какие писать?

  • Sannis

    07 июля 2008 г.02:48

    Интересно, а кроме микроформатов, так или иначе завязанных на rev в ссылках, ну иногда без них, только с использованием классов для элементов, есть ещё какие-то? Какие ещё DOM-атрибуты используют для микроформатов и каких?

  • Дин автор

    07 июля 2008 г.11:25

    Если говорить очень строго, то DOM-атрибуты вообще не используются. А используются лишь атрибуты, определённые в спецификации (X)HTML. Вот их краткий список: class, rel, rev, title и содержимое самого элемента (то, что заключено между открывающим и закрывающим тегами).

    Например, есть формат описания географических данных. Я могу описать местоположение, допустим, столицы Мадагаскара Антананариву:

    Летом я поеду отдыхать в <abbr class="geo" title="-18.907640;47.527679">Антананариву</abbr>

    Ещё раз напомню ключевую идею, заключённую в микроформатах: постараться использовать как можно больше существующих стандартов, чтобы не создавать ничего нового; микроформаты — это очень просто и не нужно ничего усложнять введением каких-то новых атрибутов или блоков. И ещё один не менее ключевой вывод:данные должны быть доступны как для человека, так и для автоматической обработки какими-либо приложениями.

  • Дин автор

    07 июля 2008 г.12:22

    Ах да, RSS-представление я исправил и, вроде бы, реализовал нормально подписку на комментарии.

  • Alex Lov

    07 июля 2008 г.12:43

    Хотелось бы почитать у тебя подробнее про hCard, hCalendar, hAtom и прочие более сложные микроформаты. Хотя и прочие простые, но интересные (вроде географического или XFN) тоже будет любопытно. Какие-то нюансы использования и живые примеры. Где и как лучше применять.

    А то всё как-то не получалось добраться до более пристального их рассмотрения.

  • Дин автор

    07 июля 2008 г.12:46

    Хорошо, в следующий раз разберу некоторые составные микроформаты.

    Хотя, в данной задаче основной целью всё-таки были не микроформаты (но и не без них), а разбор самого понятия «ссылка» и какую роль она играет в структуре документа.

  • Sannis

    08 июля 2008 г.03:14

    Я неверно сформулировал, не читал букварёв :( Конечно же имел в виду стандартные атрибуты из выбранного DTD. Собственно вопрос остался в силе ;) Попутно хотел для себя прояснить: микроформаты используют только в xhtml, или и в html тоже?

  • Дин автор

    08 июля 2008 г.03:21

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

    На твой вопрос я ответил же, по поводу атрибутов? Даже перечислил большинство и объяснил, почему другие не используются.

  • Sannis

    08 июля 2008 г.12:45

    Да, похоже я так хотел услышать противоположный ответ, что пропустил его, больше обратил внимание на окончание комментария.

  • Avatara

    08 января 2010 г.20:04

    Влияет ли расширение на rel-tag Типа: /index.html rel="tag" или учитывается только само — index ? а расширение игнорируется

  • юрий кобзенко

    22 апреля 2011 г.19:04

    расскажите всем!!! СЕМАНТИКА и СВЯТОЕ ПИСАНИЕ. Именно в нём я и нашёл истинный смысл, употребляемых нами слов: русь (главный, муж. род), «руський» данник (налогоплательщик «главного». Киевский?), словян (крестьян, исконный. Автохтон?), украйн (оседлый), и стало ясно, что слово «МОВА», от того же корня, что и Божье имя. Осуществление, творчество, а не рос. язык, евр. губы, арб. горло. Указка на это в Бытии, 11:1, «А было, — вся Земля… …слова одни.». Именно, соки жизненесущих корней глаголов еврея Моисея (7 из них, - однобуквенные!), и являются истоком всех земных слов, а не перегной листьев и отпавших вервей, давших форму, «языку великого и могучего еврея Пушкина», который, в действительности, — гибрид греко-солуньско-македонско-моравско-киевско-церковнославянских слов, сочленённых с московко-суздльским говором фино-угорских племён. Плохих слов нет. Это люди их такими считают, а в Святом Писании, — эти слова имеют обыденное значение, зачастую, с иным смыслом. Около 5000 слов растолковано и собрано в словар «Матiр мов». Да, по-украински. Желающим пришлю эл. версию. Юрий Кобзенко, kobzan1@rambler.ru

Я тоже знаю!

Для обращения к человеку используйте символ @, после которого следует имя того, к кому обращаетесь (пробелы заменяются на знак подчёркивания). Если вам интересно, можете подписаться на комментарии по RSS или по эл. почте. Ведите себя достойно, вы же не роботы, правда?

Вы можете использовать следующие XHTML-элементы в разметке комментария: strong, em, span[class=crossline], a[href=uri], code[type=язык], blockquote, ul и ol. В качестве языка кода может быть указан, например, javascript или css.