Атрибут rel. Ссылочные отношения. Link relations

Have a question? Ask in chat with AI!

htmlТема сегодняшней статьи link relations или если по-русски то ссылочные отношения. Чтобы понять что это достаточно вспомнить атрибут rel, который мы указываем в теге ссылки. Если обычная ссылка просто указывает на какой-либо ресурс, то атрибут rel объясняет почему эта ссылку указывает на этот ресурс. Вариантов достаточно много и все их мы сегодня рассмотрим. Мы так же рассмотрим нововведения в HTML5, которые затронули атрибут rel и систему link relations.

[adsense]
Итак, вернемся к нашей ссылке. Ссылка указывает на какой-либо ресурс, а атрибут rel сообщает почему ссылка указывает на этот ресурс. Со слов ссылки можно сказать так — я указываю на этот ресурс потому что он:

  • содержит файл со стилями и браузер должен применить его к документу
  • является RSS лентой, которая содержит тот же самый контент, что и страница, но имеет стандартный формат для подписки
  • является переводом этой страницы на другой язык
  • является PDF версией этой же страницы
  • является следующей страницей онлайн книги и текущая страница тоже часть этой книги

Кроме этого есть еще несколько различных вариаций. HTML5 делит ссылочные отношения на две категории. Обе категории могут быть созданы с помощью элемента link. Первая категория включает в себя ссылки на внешние ресурсы, которые должны быть включены в данный документ. Вторая категория — гиперссылки — это ссылки на другие документы. Поведение конкретной ссылки на внешний ресурс зависит от того какой атрибут rel задан у этой ссылки. Для понимания этих категорий приведу пару примеров:

  • rel=stylesheet — эта ссылка на внешний ресурс
  • ссылки внутри контента — это гиперссылки. Вы можете перейти по ним, а можете и нет — они не являются чем-то необходимым для просмотра текущей страницы — страница будет отображаться и без них.

Общие значения атрибута rel это:


Первый предназначен для подключения CSS файлов, второй для автоматического обнаружения RSS ленты в формате Atom. Часть ссылочных отношений прописана в стандарте HTML 4.01; еще часть создавалась сообществом microformats community. HTML5 делает попытку собрать воедино все возможные значения атрибута rel, сделать их определения более простыми и чистыми(если требуется) и предоставить новые определения для будущего использования.

Как использовать атрибут rel?

Чаще всего атрибут rel используется в теге <link> в секции head. Часть атрибутов так же применима к обычным ссылкам с использованием тега <а>. HTML5 так же позволяет использовать атрибут rel в элементах <area>.

rel=alternate

В HTML5 определение rel=alternate было уточнено и расширено. Например, использование rel=alternate в связке с атрибутом type указывает на то же содержание, но в другом формате. Использование rel=alternate в связке с type=application/rss+xml или type=application/atom+xml указывает на ленты в формате RSS и Atom, соответственно.
С помощью rel=alternate можно так же указывать на перевод данной страницы. Для этого в HTML5 необходимо использовать hreflang в связке с rel=alternate.

rel=archives

Атрибут rel=archives указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. К примеру, основная страница блога может ссылаться на архивные статьи блога с атрибутом rel=archives. Нововведение HTML5.

rel=author

Атрибут rel=author используется для указание автора статьи. Чаще всего используется в ссылке на страницу контактов или на страницу с формой обратной связи. Атрибут rel=author является эквивалентом rev=made, введенному в HTML 3.2. В данный момент rev=made заменен атрибутом rel=author.

rel=external

Атрибут rel=external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. Этот атрибут получил широкое распространение благодаря WordPress, который использует этот атрибут в ссылках оставленных комментаторами. Нововведение HTML5.

rel=first, last, prev, next, up

В HTML4 появились rel=start, rel=prev и rel=next для того чтобы связать несколько страниц (части одной книги и т.д.). HTML5 добавляет rel=first, который указывает на первую страницу в серии. В HTML5 так же поддерживаются rel=prev и rel=next, но при этом добавлен синоним rel=previous. Так же добавлен атрибут rel=last, который по аналогии с rel=start указывает на последнюю страницу.

rel=icon

Атрибут rel=icon один из самых популярных после rel=stylesheet. Его так же часто используют с shortcut, вот пример:


Большинство браузеров поддерживают этот атрибут и с его помощью ассоциируют иконку с текущей страницей. Иконка отображается как в поисковой выдаче так и при просмотре страницы в браузере. В HTML5 добавилась возможность задавать размер иконки с помощью size. Вот так выглядит синтаксис:


rel=nofollow

Атрибут rel=nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. Этот атрибут был внедрен Google и стандартизован microformats community. Суть атрибута была в борьбе со спамерскими ссылками, которые размешают спамеры в комментариях. Предполагалось, что ссылка с rel=nofollow не будет передавать вес и PageRank и это заставит спамеров сдаться. Этого конечно не произошло, но атрибут остался. Сейчас многие блоговые платформы используют этот атрибут для ссылок в комментариях.

Вот собственно и все наиболее часто используемые атрибуты rel. Вы можете использовать их, а можете и не использовать, но знать о них нужно. Есть еще порядка 5-6 других атрибутов, но они очень редко используются и поддерживаются только в HTML5. Ну а дабы немного отдохнуть предлагаю вам посмотреть фотографии красивых животных.


3 комментария для “0

  1. Последний атрибут наиболее популярен и употребляем, когда нужно ограничить количество внешних ссылок, у вэб мастеров такая потребность возникает не редко.  Новые возможности вроде HTML5 это конечно хорошо, но палка о двух концах. Старый браузер, который не такая уж редкость если верить статистике, скорее всего начнет верещать что страница открыта но с ошибками. 

  2. А атрибут rel я могу указать дважды для одной ссылки? Поставить например и author и nofollow. Что-то найти ответ не могу(

Добавить комментарий для Capt.PR Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Что такое HTML? Анатомия HTML5 документа
Следующая запись HTML коды и символы