Html link rel – [.m] masterhost — профессиональный хостинг сайта www.webpagesdesign.ru

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <link> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента <head>. Чаще всего тег <link> используется для подключения внешних таблиц стилей:


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

Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css".

Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется:

<link href="style.css" rel="stylesheet">

Предварительная загрузка страниц

Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется "предварительное получение страницы". Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch", а также указывается целевая страница, которая будет заранее загружена на компьютер.

<link rel="prefetch" href="httр://www.puzzleweb/html/tag_p.php">

Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег <link> для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.

Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).

Атрибуты

href:
Указывает месторасположение (URL) внешнего файла (путь к файлу может быть указан с помощью абсолютного или относительного адреса).
hreflang:
Указывает двухбуквенный код языка, определяющий язык документа, на который ведет ссылка. Атрибут hreflang используется только совместно с атрибутом href.
media:
Определяет под какие устройства оптимизирован файл. Главным образом он используется с файлами таблиц стилей, для определения различных стилей под разные типы носителей. Атрибут media может принимать сразу несколько значений, разделяемых между собой пробелами.
rel:
Указывает связь между текущим документом и документом, на который ведет ссылка.
  • alternate - ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
  • author - определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
  • canonical - позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег <link> с атрибутом rel="canonical".

    Атрибут href, в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной:

    <link rel="canonical" href="httр://www.puzzleweb/html/tag_p.php">
  • first - указывает ссылку, ведущую на первый документ из последовательности документов.
  • help - ссылка на документ со справкой.
  • icon - определяет путь к иконке, которая будет использована для текущего документа.
  • last - указывает ссылку, ведущую на последний документ в последовательности документов.
  • licence - ссылка на сведения об авторских правах для документа.
  • next - указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
  • prefetch - указывает, что следует заранее кэшировать файл, на который ведет ссылка.
  • prev - указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
  • search - ссылка на поиск для документа.
  • stylesheet - определяет внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
sizes:
Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", может принимать следующий значения:
type:
Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка, используется только совместно с атрибутом href.

Тег <link> так же поддерживает Глобальные атрибуты

Стиль по умолчанию


link {
    display: none;
}  

Пример


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

Результат данного примера в окне браузера:

Пример использования тега <link>

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.

Синтаксис

HTML
<head>
  <link атрибуты>
</head>
XHTML
<head>
  <link атрибуты />
</head>

Атрибуты

charset
Кодировка связываемого документа.
href
Путь к связываемому файлу.
media
Определяет устройство, для которого следует применять стилевое оформление.
rel
Определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes
Указывает размер иконок для визуального отображения.
type
MIME-тип данных подключаемого файла.

Также для этого тега доступны универсальные атрибуты.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>Тег LINK</title>  
   <link rel="stylesheet" href="ie.css">
   <link rel="alternate" type="application/rss+xml" 
     title="Статьи с сайта htmlbook.ru" href="http://htmlbook.ru/rss.xml"> 
   <link rel="shortcut icon" href="http://htmlbook.ru/favicon.ico">
  </head> 
  <body>
    <p>...</p>
  </body>
</html>

В данном примере подключается внешний файл со стилями с помощью атрибута rel="stylesheet" тега <link>, указывается RSS-документ текущего сайта (link rel="alternate" type="application/rss+xml") и устанавливается иконка сайта в адресной строке браузера (link rel="shortcut icon").

| HTML | WebReference

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Элемент <link> (от англ. link — ссылка) обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a>.

Синтаксис

<head>
  <link href="<адрес>">
</head>

Закрывающий тег

Атрибуты

charset
Кодировка связываемого документа.
href
Путь к связываемому файлу.
media
Определяет устройство, для которого следует применять стилевое оформление.
rel
Определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes
Указывает размер иконок для визуального отображения.
type
MIME-тип данных подключаемого файла.

Также для этого элемента доступны универсальные атрибуты.

Пример

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>LINK</title>  
   <link rel="stylesheet" href="ie.css">
   <link rel="alternate" type="application/rss+xml" 
     title="Статьи с сайта webref.ru" href="https://webref.ru/rss.xml"> 
   <link rel="icon" href="https://webref.ru/favicon.ico">
  </head> 
  <body>
    <p>...</p>
  </body>
</html>

В данном примере подключается внешний файл со стилями с помощью атрибута rel="stylesheet" элемента <link>, указывается RSS-документ текущего сайта (link rel="alternate" type="application/rss+xml") и устанавливается иконка сайта в адресной строке браузера (link rel="icon").

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Атрибут rel | HTML | WebReference

Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.

Значения

alternate
Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
author
Указывает ссылку на автора текущего документа или статьи.
help
Указывает ссылку на контекстно-зависимую справку.
icon
Адрес картинки, которая символизирует текущий документ или сайт.
license
Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
next
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
prev
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
search
Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
stylesheet
Определяет, что подключаемый файл хранит таблицу стилей (CSS).

Значение по умолчанию

Пример

<!DOCTYPE HTML>
<html>
  <head>
   <meta charset="utf-8">
   <title>LINK, атрибут rel</title> 
   <link rel="stylesheet" href="hb.css">
  </head> 
  <body>
   <p>...</p>
  </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.05.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

HTML: тег link | HTML/xHTML


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

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

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

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

Используется для альтернативного представления 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>

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

<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>

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

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

Это значение 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"/>
  <link rel="icon" type="image/png" href="http://www.site.com/icons/android.png"/>
</head>

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

<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>

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

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

Это значение 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>

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

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

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

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

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

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

Данная публикация представляет собой перевод статьи «HTML: The Link Tag» , подготовленной дружной командой проекта Интернет-технологии.ру

Элемент link | HTML/xHTML

Элемент link HTML содержит связанную с документом информацию: альтернативные версии, авторы, авторские лицензии, иконки и т.д. Он должен содержать атрибут rel или itemprop, но не оба сразу. Атрибут href также является обязательным.

Когда атрибут itemprop отсутствует, этот элемент может быть объявлен только в разделе head. В противном случае он может быть объявлен в другом месте.

В следующем примере предоставляется информация о документе с помощью элемента link с различными типами гиперссылок:

<!DOCTYPE html>

<html>

  <head>

    <title>Фильм "Звездные войны: Новая надежда"</title>

    <link rel="license" href="copyright.html">

    <link rel="next" href="the-empire-strikes-back.html">

    <link rel="search" href="movies-search.html">

    <link rel="alternate" hreflang="es" href="es/una-nueva-esperanza.html">

    <link rel="stylesheet" href="default.css">

    <link rel="stylesheet alternate" media="print" href="print.css">

    <link rel="icon" href="a-new-hope-16.png">

  </head>

  <body>

    <h2>Новая надежда</h2>

    <p>После падения демократии и восстановления империи надежда была утеряна...</p>

  </body>

</html>

Этот атрибут тега link в HTML содержит адрес (URI) связанного ссылкой ресурса. Он указывает браузеру, куда переходить по ссылке.

Наличие этого атрибута является обязательным. Если он отсутствует или имеет значение, которое не является допустимым URI, элемент не определяет ссылку.

Пример

<link rel="stylesheet" href="../styles/default.css">

Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения (без учета регистра):

  • anonymous: CORS запросы к элементу будут содержать установленный флаг «omit credentials«;
  • use-credentials: CORS запросы к элементу не будут содержать установленный флаг «omit credentials«.

Пример

<link rel="icon" href="http://www.otherserver.com/icons/default.png" crossorigin="anonymous">

Атрибут HTML link rel содержит разделенный пробелами список типов ссылок, указывающий, какое значение связанный ссылкой ресурс имеет для документа (содержащего ссылку).

Элемент link должен содержать либо атрибут rel, либо атрибут itemprop, но не оба сразу. Атрибут href также является обязательным.

Пример

<link rel="prev" href="article1.html"> 
<link rel="next" href="article3.html"> 
<link rel="license" href="copyright.html"> 
<link rel="alternate" href="spanish-version.html" hreflang="es">

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

Пример

<link rel="alternate" href="printer-version.html" media="print">

Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе (указан в атрибуте HREF).

Пример

<link rel="alternate" hreflang="es" href="spanish-version.html">

Тип контента (или Internet Media Type), который должен содержать связанный ресурс.

Пример

<link rel="icon" href="icon.png" type="image/png"> 
<link rel="next" href="article2.html" type="text/html">

Разделенный пробелами список с размерами иконки ссылки. Каждый размер может состоять из двух целых чисел, разделенных буквой «х«, или из специального ключевого слова «any«, представляющего все возможные размеры. Каждое значение чувствительно к регистру.

Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение «icon«. Иначе ситуации его использование является недействительным.

Пример

<link rel="icon" href="icon.ico"> <link rel="icon" href="icon.svg">

Кодировка символов целевого ресурса. Этот атрибут является устаревшим и в HTML5 уже не используется. Вместо него разработчикам рекомендуется использовать HTTP-заголовки Content-Type, чтобы предоставить информацию о наборах символов в документах и других ресурсах.

Пример

<link rel="next" href="article2.html" charset="utf-8">

Значение текущего документа (содержащего ссылку) для связанного ссылкой ресурса.

Этот атрибут HTML link tag является устаревшим и в HTML5 уже не используется. Разработчикам рекомендуется заменить его атрибутом rel.

Пример

<link rev="index" href="article1.html"> 
<link rev="index" href="article2.html"> 
<link rev="index" href="article3.html">

Данная публикация представляет собой перевод статьи «LINK ELEMENT» , подготовленной дружной командой проекта Интернет-технологии.ру

Отправить ответ

avatar
  Подписаться  
Уведомление о