Практический HTML: улучшаем семантику ссылок

Автор оригинала: Jeremy Keith
  • Перевод
Примечание: ниже перевод статьи «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: проверка скорости загрузки сайтов

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 44

    0
    Микроформат rel-tag иет немного дальше.
      0
      спасибо
      0
      Прочитайте про

      В данном случае для этого документа добавлена метка «Microformats».

      Ошибочка вышла. Вы имели ввиду якоря (anchors)?
        0
        Имелось ввиду, конечно:

        Прочитайте про <a href="http://en.wikipedia.org/wiki/Microformats" rel="tag">семантическую верстку</a>
          0
          в смысле? имеется ли здесь в виду #anchor или /Microformats в этой ссылке? Можете пояснить свою мысль

          в оригинале написано URL, я согласен с автором, ибо последняя часть адреса будет заключать в себе метку
        +1
        rel вызывал у меня всегда следующее противление:

        1) если там можно написать все что угодно - я могу и по-русски там писать, но разве это кому-то понравится?

        2) если только по-английски - почему тогда не стандартизировали список возможных отношений, а то опечатаюсь еще

        rev наследует эти противоречия.

        В целом, мне кажется, лучше избавляться от механики в текстах ссылок, забыть про «подробнее», «здесь», «тут», «там», «скачать». Текст ссылки обладает заметным в настоящее время преимуществом - его индексируют и учитывают поисковики. Ничто на свете не мешает парсить вместо rel/rev тот же текст ссылки, разыскивая в нем нужные слова. Мешает только лень (атрибут тэга куда как легче прочитать).

        У rel со стандартными словами есть одно важно применение (которое, впрочем, не прижилось особо) - у Opera есть тулбар, который позволяет быстро переходить на следующую/предыдущую/первую/последнюю итд страницу (адреса указываются через соотв. link rel). Еще, разумеется, упомянутые stylesheet и alternate - без этого щас ни один сайт не делается, наверное. Еще - значения rel, рекомендованные в микроформатах. Дальше этого идти я бы не рекомендовал.
          +1
          1. Пишите на английском. Он роднее для html, чем русский.
          2. Знаете, если всё в жизни стандартизовать, то жить станет трудно. Опечатаетесь - рано или поздно заметите и поправитесь. Если же вам надо, чтобы какое-нибудь интеллисенс выдавало список вариантов, то напишите расширение для своего редактора.

          Текст ссылки обладает заметным в настоящее время преимуществом - его индексируют и учитывают поисковики. Ничто на свете не мешает парсить вместо rel/rev тот же текст ссылки, разыскивая в нем нужные слова. Мешает только лень (атрибут тэга куда как легче прочитать).

          То, что текст индексируют поисковики - это преимущество для оптимизаторов, не более. А при парсинге, совсем ничто не мешает парсить rel вместе с содержанием ссылки. Единственное неприятное, что сложность человеческого языка будет затруднять «понимание» компьютером смысла содержания ссылки. Это касается и rel, но в меньшей степени - уже сейчас есть широко распространённые и принятые значения этого атрибута.
            +3
            у фф — точно такой же тулбар есть, я им пользуюсь достаточно часто
            https://addons.mozilla.org/en-US/firefox/addon/1949
            +1
            Большое спасибо за перевод
              +3
              Не существует определенного списка значений для атрибута rel, поэтому вы можете использовать все, что посчитаете семантически разумным.


              Не стоит забывать про "start", "next", "prev", "contents", "index", "glossary", "copyright", "chapter", "section", "subsection", "appendix", "help", "bookmark" — упрощает навигацию по документам, извлечение в более высокоуровневые форматы; эти значения можно найти и в документах W3 (http://www.w3.org/TR/xhtml-modularizatio…), в XHTML2 он расширен.
                +1
                Microformats шпаргалки:
                http://microformats.org/wiki/pocket-cheat-sheet
                http://www.ilovejackdaniels.com/cheat-sheets/microformats-cheat-sheet/
                  +1
                  Ошибочка — несколько &lgt; осталось, поправьте ;)

                  А статья хорошая.
                    0
                    спасибо :)
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      спасибо :)
                      –1
                      Не видно конкретной пользы от этой семантики. Когда это будет использовано, кем и как?
                        +2
                        Сделайте пользу. Используйте сейчас, сами и как угодно.
                        0
                        Глупо, очень глупо.
                        Ребята, давайте сначала доборимся за чистоту кода, а уже потом будем рассказывать про прелести логики, о том как замечательно учитывать семантику.
                        Ей богу, не все еще научились ставить к каждой картинке alt="", а вы учите уже rel и rev =) Вот и гляди, очередная куча когда, которой хвастаются авторы, где типа соблюдена семантика, а любой html валидатор вываливает по 500 ошибок.
                        Рано. Но за статью спасибо.
                          0
                          Кому-то рано, а кому-то нет. Согласен, что многие ещё не дошли до чистого кода. Чистый код, в моём понимании, это как раз и есть семантичный код, когда каждый элемент использован по смыслу.

                          А про alt… Что тут сказать. Его вообще стали писать лишь потому, что из-за него не валидируется код. Смысл же его - в предоставлении альтернативного описания.
                            0
                            погоди, погоди, а как же семантика alt`а? Разве он не добавляет логики, при отображении сайта с отключенными картинками? не зря его включили в список обязательных атрибутов тега <img>
                              0
                              Так вот теперь его многие и пишут лишь затем, чтобы пройти валидацию.
                              +1
                              Все разрабы сразу бы поняли семантику alt, если бы их хоть на день лишили зрения, завязав глаза, и пустив почитать новости хотя бы, я не говорю уже про проверку банковского счёта. Этим людям и так не повезло в жизни, а их и тут ущимляют, всего лишь забив на пару "непонятных" байтов кода.
                                0
                                Дело тут не в разработчиках вовсе - то, что вы описали, надо сделать с каждым ныне живущим. Потому как я сильно сомневаюсь, что кто-то вообще много думает о людях с ограниченными возможностями. К сожалению это данность.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                +1
                                Надо запретить все сайты с невалидным кодом. Это один из обязательных пунктов плана спасения планеты, в противном случае все люди погибнут от собственных некачественных технических решений.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    +1
                                    Абсолютно поддерживаю. А их авторов и владельцев публично сжечь.
                                    Чтоб другие больше не посмели писать невалидный код.
                                  0
                                  Спасибо за полезный перевод.
                                    0
                                    Нет, я все таки не понял. Для кого это? Роботам пофиг. Людям тем более.
                                    Как комментарии для себя?
                                      0
                                      Я тоже что то не очень дошел. Только для валидатора?
                                        0
                                        сейчас уже есть ряд софтин, позволяющих строить графы социальных сетей, исходя из такой разметки.

                                        Также в статье, которая указана в конце, описан rel="nofollow" (это к вопросу поисковых машин)

                                        К вопросу людей: расширение к Firefox Operator, который уже понимает пяток микроформатов (в том числе, умеет находить теги и предлагать их найти на Technorati (направить этот поиск на любимый сайт, я так понимаю, минутное дело)).
                                          0
                                          это для идеи веб 2.0 :-)
                                          если серьезно, то про rel и кум не знаю, а вот календарный микроформат вполне себе для людей: если все события оформлять в соответствии с ical, то гораздо проще их вносить в свой планировщик
                                            +1
                                            rel — то же самое. В любом нормальном браузере есть возможность переходить по rel-ссылкам типа "next", "prev" и искать информацию по тегам, размеченным rel-tag.
                                            +1
                                            Для будущего! Сейчас - для себя, в ближайшем будущем - для продвинутых браузеров (например Firefox уже сейчас учится понимать микроформаты), в более далеком будущем - для всего интернета.
                                              0
                                              В Opera тоже поддержка микроформатов не за горами. Тому подтверждение недавнее июньское обновление сайта сообщества:
                                              Thanks to Fred and Michael we've now added support for Microformats on the My Opera and Dev Opera sites (the changes to Dev haven't been published yet at the time of writing). Both sites now support the rel-tag microformat, and hCard (coming soon in My Opera). Dev Opera also supports rel-licence so search engines can use this information to know what licence the articles are provided under. My Opera also supports hCalender for events (They were called countdowns), xFolk, and will support XFN and any other appropriate Microformat.
                                            0
                                            Хотелось бы чтобы автором была затронута сама суть микроформатов.
                                            Из статьи абсолютно непонятно, какие плюсы приносит использование данных тегов, и главное — кому эти плюсы видны?
                                              0
                                              сама суть микроформатов есть по ссылке в конце статьи
                                              0
                                              Свежая (21 августа) статейка про готовящуюся поддержку микроформатов в Firefox 3 и про плагин Operator.
                                                +2
                                                Кармы, видимо, не хватило на ссылку: http://mozillalinks.org/wp/2007/08/on-firefox-3-and-microformats-with-michael-kaply/
                                                0
                                                Обычно использую одинаковый rel, чтобы повесить onclick-обработчики после загрузки страницы на нужные ссылки.
                                                Микроформаты будут оставаться уделом гиков до тех пор, пока интернет не станет от этого субъективно лучше для рядовых пользователей, либо поисковики не заявят об их поддержке.
                                                  0
                                                  по поводу onclick обработчиков — сейчас готовлю заметку про оптимизацию этого дела. При загрузке пробегать все ссылки и смотреть, на что повесить не самый лучший вариант.
                                                    0
                                                    Как правило, все лежит в каком-то контейнере, и c prototype это выглядит так: $$('#contents a[rel="blablabla"]'). Возможно вы правы.
                                                    Спасибо за переводы. Очень жду.)
                                                  +1
                                                  Еще полезно при создании страниц для мобильников нумеровать ссылки в навигации и указывать для них атрибут accesskey.
                                                    0
                                                    вы знаете, в существующих источниках к этому не относятся однозначно. Т.е. где-то советуют, где-то наоборот. Не все так просто. Мы же сайты не только для мобильных устройств делаем..

                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                  Самое читаемое