Тег link в HTML
Тег 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" href="http://www.site.com/css/styles.css"/>
</head>