Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ What Does It All Mean/ Дружеские отношения. HTML5. Up and Running. Марк Пилгрим

Элемент <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». Большинство систем блогов добавляют ссылкам-тегам данный атрибут. Браузеры на это никак не реагируют. Это знак для поисковых систем о том, куда ведет данная ссылка.

Куда дальше

Теги: , , ,
Показать комментарии