HTML: тег link

link-tag

link HTML применяется для ссылки на другие ресурсы, используемые в документе.

Типы ссылок

Существует много типов ресурсов, на которые может ссылаться документ. Это делается с помощью ключевых слов, указанных в атрибуте отношения (rel). Они должны использоваться в разделе <head> как метаданные:

  • alternate;
  • author;
  • help;
  • icon;
  • license;
  • next;
  • prefetch;
  • prev;
  • search;
  • stylesheet.

Тег <link> в HTML размещается в <head> и <body>, хотя чаще он встречается в <head> в качестве метаданных. Тег <link> может ссылаться на традиционную гиперссылку, используемую для навигации или присоединения к документу внешних ресурсов, таких как CSS и Javascript.

Alternate

Используется для альтернативного представления HTML документа.

В приведенном ниже примере представлены два альтернативных языка для данного документа HTML на английском — французский и испанский языки. Атрибут hreflang используется, чтобы сообщить пользовательскому агенту доступный код страны по стандарту ISO 639-1:

<head>
  <link rel="alternate" hreflang="fr" type="text/html" href="http://www.site.com/lang/fr/html/this-doc.html"/>
  <link rel="alternate" hreflang="es" type="text/html" href="http://www.site.com/lang/es/html/this-doc.html"/>
</head>

Еще один пример использования HTML link rel предлагает три различных текстовых документа на английском, французском и испанском языках:

<head>
  <link rel="alternate" hreflang="en" type="application/msword" href="http://www.site.com/lang/en/msword/this-doc.doc"/>
  <link rel="alternate" hreflang="fr" type="application/msword" href="http://www.site.com/lang/fr/msword/this-doc.doc"/>
  <link rel="alternate" hreflang="es" type="application/msword" href="http://www.site.com/lang/es/msword/this-doc.doc"/>
</head>

Author

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

<head>
  <link rel="author" href="http://www.site.com/the-author-bio"/>
</head>

Если имеется много авторов, связанных с HTML-страницей, нужно применить несколько тегов link HTML:

<head>
  <link rel="author" href="http://www.site1.com/the-author-bio"/>
  <link rel="author" href="http://www.site2.com/the-author-bio"/>
  <link rel="author" href="http://www.site3.com/the-author-bio"/>
</head>

В завершении можно добавить метатег author:

<head>
  <meta name="author" content="Статья написана Joe Smith, Harry Paul, Samantha Lang">
</head>

Help

Позволяет предоставить помощь посетителям страницы. Пользовательский агент, поддерживающий справку, может иметь два вида — основная вкладка для отображения документа и другая для вывода справки:

<head>
  <link rel="help" href="http://www.site.com/category/article-title/help.html"/>
</head>

Icon

Это значение HTML link rel указывает на иконку страницы. Может быть множество иконок, представляющих страницу. Используется та, которая является наиболее подходящей:

<head>
  <link rel="icon" type="image/png" href="http://www.site.com/icons/favicon.png"/>
  <link rel="icon" type="image/jpeg" href="http://www.site.com/icons/apple.jpg"/>
  <link rel="icon" type="image/gif" href="http://www.site.com/icons/msoft.gif" sizes="64x64"/>
  <link rel="icon" type="image/png" href="http://www.site.com/icons/android.png" sizes="64x64"/>
</head>

License

Это условия лицензии авторских прав на документ. Можно использовать лицензию на весь сайт или лицензию, имеющую отношение к конкретному документу:

<head>
  <link rel="license" type="text/html" href="http://www.site.com/legal/sitewide.html"/>
  <link rel="license" type="text/html" href="http://www.site.com/legal/item-100.html"/>
</head>

Next

Указывает на следующую страницу в HTML-документе. Для поисковых систем весьма полезно знать, какая страница является следующей:

<head>
  <link rel="next" href="http://www.site.com/article-title/2"/>
</head>

Prefetch

Это значение HTML link rel дает подсказку пользовательскому агенту о том, что он должен кэшировать ресурс для ускорения загрузки и обработки. Это делается, когда разработчик точно знает, что ресурсы, используемые на странице, будут запрашиваться:

<head>
  <link rel="prefetch" href="http://www.site.com/fonts/myfonts"/>
  <link rel="prefetch" href="http://www.site.com/images/mylogo.jpg"/>
  <link rel="prefetch" href="http://www.site.com/article-title/1"/>
  <link rel="prefetch" href="http://www.site.com/article-title/3"/>
</head>

Prev

Определяет предыдущую страницу в HTML-документе. Полезно для навигации по страницам:

<head>
  <link rel="prev" href="http://www.site.com/article-title/1"/>
</head>

Search

Определяет документ, который используется для поиска существующего документа. Как правило, это страница со специальной формой для поиска ключевых слов в документе. Для реализации рекомендуется использовать спецификацию OpenSearch:

<head>
  <link rel="search" href="http://www.site.com/search/search.html"/>
</head>

Stylesheet

HTML link CSS используется для импорта таблицы стилей, используемой для отображения документа. Это делается с помощью каскадных таблиц стилей (CSS):

<head>
  <link rel="stylesheet" type="text/css" href="http://www.site.com/css/styles.css"/>
</head>

Перевод статьи “HTML: The Link Tag” был подготовлен дружной командой проекта Сайтостроение от А до Я.