<link>¶

Тег <link> (от англ. link — ссылка, связь) устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

Элемент <link> обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a>.

Метаданные документа

base
link
meta
style
title

Синтаксис¶

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

Закрывающий тег не требуется.

Атрибуты¶

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

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

href¶

Путь к файлу, на который делается ссылка.

Синтаксис

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

Значения

В качестве значения принимается полный или относительный путь к файлу.

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

Нет.

media¶

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

Синтаксис

<link media="all | print | screen | speech" />

Значения

all: Все устройства.
print: Печатающее устройство вроде принтера.
screen: Экран монитора.
speech: Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

В HTML5 в качестве значений могут быть указаны медиа-запросы.

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

all

rel¶

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

Синтаксис

<link rel="<тип>" />

Значения

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

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

Нет.

sizes¶

Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).

Синтаксис

<link rel="icon" sizes="<ширина>X<высота>" />
<link
  rel="icon"
  sizes="<ширина1>X<высота1> <ширина2>X<высота2>* | any"
/>

Значения

Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

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

Нет.

type¶

Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Синтаксис

<link type="<MIME-тип>" />

Значения

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

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

text/css

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

Preload, определение <link rel="preload">
Subresource Integrity, определение атрибута integrity
WHATWG HTML Living Standard
HTML 5
HTML 4.01 Specification
Resource Hints, определение dns-prefetch, preconnect, prefetch и prerender

Описание и примеры¶

<!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="Статьи с сайта xsltdev.ru"
      href="http://xsltdev.ru/rss.xml"
    />
    <link
      rel="shortcut icon"
      href="http://xsltdev.ru/favicon.ico"
    />
  </head>
  <body>
    <p>...</p>
  </body>
</html>

Ссылки¶

Тег <link> ^{MDN (рус.)}