Элемент <head>. Дружеские отношения

Автор: Евгений Рыжков и Татьяна Головко Дата публикации: 12.03.2011

Обычные ссылки (<a href>) — это просто точки перехода на другую страницу. Ссылка с указанным отношением — это способ объяснить, почему ты отправляешь на другую страницу. Отношение как бы заканчивает фразу «Я ссылаюсь на другую страницу, потому что…»

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

И так далее. HTML5 разделяет ссылочные отношения на 2 категории:

С помощью элемента <link> можно создать две категории ссылок. Ссылки на внешние ресурсы как ссылки, которые дополняют текущий документ и гиперссылки — как ссылки на другие документы…

Поведение ссылки на внешний ресурс зависит от указанного к нему отношения.

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

Чаще всего, ссылочные отношения отображены элементами <link>, в секции <head>. Некоторые ссылочные отношения можно встретить и в элементах <a>, но так бывает редко. HTML5 позволяет указывать некоторые отношения для элемента <area>, но это встречается еще реже (HTML4 не разрешал rel для area). Ниже приведем полный список возможных отношений, по которому можно будет понять, где эти отношения можно использовать.

В: Могу ли я создать свои собственные отношения?

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

rel = stylesheet

Пример:

<link rel="stylesheet" href="style-original.css" type="text/css" /;>

Это наиболее часто встречающиеся отношение в мире (без преувеличения). <link rel="stylesheet"> служит для указания на отдельный файл, где хранятся CSS-правила. В HTML5 эта ссылка получила незначительную оптимизацию в виде устранения атрибута типа файла. Потому что имеется только один язык в Веб для описания оформления страниц — CSS. Это значения принимается по умолчанию для атрибута type:

<link rel="stylesheet" href="style-original.css" />

Это работает во всех браузерах (если кто-то когда-то придумает новый язык для оформления, тогда можно будет просто вернуть атрибут type и указать в его значении новый тип документа).

rel = alternate

Пример:

<link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />

Это отношение также весьма распространено. <link rel="alternate"> в сочетании с указанием медиа типа RSS или Atom «включает» так называемое «автоматическое обнаружение канала». Это позволяет организовать канал с последними статьями или новостями для читателей использующих, к примеру, Google Reader. Большинство браузеров тоже поддерживают автоматическое обнаружение такого канала и отображают специальный значок рядом с URL. (в отличии от rel="stylesheet" тут атрибут type нужен. Не выбрасывай его).

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

HTML5 так же закрывает глаза на запутанный вопрос — как указать отношение на документ с переводом. HTML4 говорит использовать атрибут lang в сочетании с rel="alternate" чтобы указать язык связанного документа. Но это не правильно: в списках ошибок HTML4 явно сказано, что использование rel="alternate" для указания языка документа является ошибкой. Но на этом дело пока и остановилось, вопрос не доработан. В HTML5 для указания языка документа используется атрибут hreflang.

Остальные ссылочные отношения в HTML5

rel="archives"

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

rel="author"

используется в ссылках на документы с информацией об авторе страницы. Тут можно встретить адрес электронной почты, но это неправильно. Нужно давать ссылку на страницу с контактными данными или просто страницу «Об авторе»

rel="external"

указывает, что документ, на который ведет ссылка, не является частью этого сайта, но текущей документ является частью того документа на который ссылаемся. Я думаю это пришло из WordPress, который использует эту связь для ссылок, оставленных комментаторами.

rel="start", rel="prev" и rel="next"

определяет отношения между страницами, которые являются частями одной серии (например, главы книги или даже сообщения в блоге). Все вроде бы просто, но корректно используется только rel="next". Народ привык писать rel="previous" вместо rel="prev", rel="begin" и rel="first" вместо rel="start", используют rel="end" вместо rel="last". И еще, некоторые создают rel="up" для ссылок на «родительскую» страницу.

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

Чтобы проще было понять как использовать rel="up", найди где-то и посмотри на навигацию вида «хлебные крошки» (ну или просто представь это себе). Главная страница, скорей всего, будет стоять первой, а текущая страница будет в конце. Так вот, rel="up" должен указывать на страницу, которая стоит перед последней (текущей) страницей в этой навигации.

rel="icon"

второе по популярности ссылочное отношение. Обычно используется в паре со значением shortcut:

<link rel="shortcut icon" href="/favicon.ico">

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

Что нового в HTML5? Добавилась возможность указывать размеры этой иконки с помощью атрибута sizes:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Ключевое слово any атрибута sizes означает что иконка может масштабироваться (используется векторный формат, вроде SVG). Если атрибут sizes отсутствует, браузер отобразит иконку с размерами, соответствующими реальному размеру графической картинки.

rel="license"

это отношение было придумано сообществом, продвигающим микроформаты. Это означает, что мы ссылаемся на документ, который соблюдает условия авторского права, в соответствии с которым публикуется текущая страница.

rel="nofollow"

означает, что ссылка не была одобрена автором данной страницы, и что она тут находится, скорее всего, по коммерческим соображениям. Это было придумано Google и стандартизовано сообществом микроформатчиков. Идея была таковой, что ссылки, снабженные таким атрибутом, не будут передавать PageRank и это избавит сообщество от спамеров в комментариях блогов. Как оказалось, это от спама не спасло, но rel="nofollow" сохранился. Многие популярные системы блогов по умолчанию добавляют всем ссылкам в комментариям rel="nofollow".

rel="noreferrer"

указывает, что при переходе по такой ссылке ПА не должны включать в запрос HTTP заголовок Referer. Пока это не поддерживается браузерами, но недавно была добавлена поддержка rel="noreferrer" в Webkit nightlies, а значит, скоро появится в Safari, Chrome и других webkit-браузерах.

rel="pingback"

указывает адрес "pingback" сервера. Спецификация гласит: «система pingback — это возможность блогу автоматически получить уведомление, что на него кто-то сослался. Это предоставляет возможность собрать все комментарии/отзывы к статье в одном месте». Некоторые системы блогов, в частности WordPress, включают этот механизм у себя по умолчанию.

rel="prefetch"

служит для оптимизации загрузки веб страниц. Указанный документ в такой ссылке (html, css-файл, изображение и т.д.) будет подгружен в кэш пользователю в фоновом режиме. Такие ссылки применяются к документам, которые скорей всего вот-вот понадобятся пользователю. Например, некоторые поисковые системы используют этот механизм для документов в топ выдаче. Сейчас данную технологию поддерживает только Firefox.

rel="search"

указывает, что документ, на который ссылаемся, содержит интерфейс для поиска для данной страницы и связанных с ней ресурсов. В частности, если хочешь чтобы rel="search" делал что-то полезное, то эта ссылка должна вести на Open Search документ с описанием для браузера, как ему выполнить поиск на данном ресурсе используя URL и ключевое слово. Поддержка формата Open Search (а вместе с ним и rel="search") была включена в IE7 и FF2.

rel="sidebar"

служит для добавления, указанного в ссылке документа, в закладки браузера. Когда кликаешь на ссылку с rel="sidebar", показывается окошко с предложением добавить страницу в закладки. Сейчас поддерживается Opera и Mozilla, остальные браузеры это правило игнорируют.

rel="tag"

указывает, что эта ссылка является тегом, относящимся к данной странице. Навигация по тегам (ключевые фразы, категории блога/сайта) впервые была применено Technorati, чтобы как-то классифицировать сообщения в блоге. Сначала их так и называли — теги Technorati. Позже тегирование было стандартизировано сообществом микроформатчиков и теги получили обозначение rel="tag". Большинство систем блогов добавляют ссылкам-тегам данный атрибут. Браузеры на это никак не реагируют. Это знак для поисковых систем о том, куда ведет данная ссылка.

Куда дальше