Окно браузера с вкладкой и собака на цепи. Цепь прикреплена в открытой вкладке в браузере.
Иллюстрация: Кира Кустова

<link>

Подключает внешние ресурсы — стили, фавиконки, шрифты и прочее.

Время чтения: 8 мин

Кратко

Секция статьи "Кратко"

Позволяет загружать на страницу содержимое из внешнего файла.

Пример

Секция статьи "Пример"
        
          
          <head>  <link href="style.css" rel="stylesheet"></head>
          <head>
  <link href="style.css" rel="stylesheet">
</head>

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Матёрые программисты советуют описывать CSS-стили в отдельных файлах: так их легче редактировать, сортировать и подключать к разным страницам сайта. Чтобы применить стили из внешнего файла на странице, используйте тег <link>.

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

Рассмотрим два наиболее часто встречающихся случая:

  1. Изображение, которое будет отображено в качестве фавиконки на вашем сайте;
  2. Внешняя ссылка на шрифт, который применяется на сайте.

Во всех описанных случаях <link> пишется внутри <head>.

Атрибуты

Секция статьи "Атрибуты"
  • href — URL-ссылка на внешний файл. Ссылка может быть как полной или абсолютной http://localhost/sitename/css/style.css, так и неполной или относительной /sitename/css/style.css.

  • rel — говорит браузеру, какую роль играет ссылка внутри тега. Иными словами, этот атрибут выражает отношения между вашей страницей и файлом, на который ведёт ссылка. Самое часто встречающееся значение — rel="stylesheet", оно означает, что ссылка внутри <link> ведёт на внешний файл с CSS-стилями. А для добавления фавиконки используется rel="icon". Также rel помогает определить, какую фавиконку на каком устройстве загружать, например: rel="apple-touch-icon-precomposed".

  • sizes — устанавливает размер — ширину и высоту — фавиконки в пикселях, например sizes="114x114". А если написать sizes="any", то браузер сможет масштабировать иконку под любой размер. Так можно делать с иконками в векторном формате, например SVG.

  • media — в зависимости от того, на каком устройстве открывают вашу страницу, можно применять разные стили к тексту или показывать разные иконки. Атрибут media указывает устройство, на котором работает тот или иной стиль. Например, <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">.

    Также атрибут media может определять, какая тема используется в ОС. Благодаря этому можно произвести небольшие оптимизации. Например, если у нас есть два разделённых CSS-файла, каждый из которых содержит стили для одной из тем, то приоритет при загрузке будет отдаваться именно тому файлу, который относится к выбранной системной теме:

        
          
          <link rel="stylesheet" href="css/light.css" media="(prefers-color-scheme: light)"><link rel="stylesheet" href="css/dark.css" media="(prefers-color-scheme: dark)">
          <link rel="stylesheet" href="css/light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="css/dark.css" media="(prefers-color-scheme: dark)">

        
        
          
        
      
  • as — позволяет указать тип загружаемого контента. Благодаря ему мы помогаем браузеру правильно расставлять приоритеты и планировать загрузку. as стоит применять, если указан атрибут rel="preload" или rel="prefetch".
  • crossorigin — указывает должен ли ресурс загружаться с помощью запроса CORS. Данный атрибут имеет два доступных значения:
    • anonymous — Cross-origin запрос выполняется без отправки учётных данных;
    • use-credentials — Cross-origin запрос выполняется с отправкой учётных данных.

Пример

Секция статьи "Пример"

Самый простой пример, как подключить файл со стилями:

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

        
        
          
        
      

Можно сделать разные версии сайта, чтобы пользователь мог выбрать удобную для него, например, версию для слабовидящих. Тогда для каждой версии можно подключить свой файл стилей:

        
          
          <link href="default.css" rel="stylesheet" title="Default Style"><link href="accessibility.css" rel="alternate stylesheet" title="Accessibility">
          <link href="default.css" rel="stylesheet" title="Default Style">
<link href="accessibility.css" rel="alternate stylesheet" title="Accessibility">

        
        
          
        
      

Вот как можно использовать разные фавиконки для разных экранов и устройств:

        
          
          <!-- На iPad третьего поколения с Retina-дисплеем: --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"><!-- iPhone с Retina-дисплеем: --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"><!-- iPad первого и второго поколений: --><link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"><!-- iPhone, iPod Touch и Android 2.1+ устройства без Retina дисплея: --><link rel="apple-touch-icon-precomposed" href="favicon57.png"><!-- стандартная фавиконка --><link rel="icon" href="favicon32.png">
          <!-- На iPad третьего поколения с Retina-дисплеем: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- iPhone с Retina-дисплеем: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- iPad первого и второго поколений: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- iPhone, iPod Touch и Android 2.1+ устройства без Retina дисплея: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- стандартная фавиконка -->
<link rel="icon" href="favicon32.png">

        
        
          
        
      

Страница может выглядеть по-разному на разных устройствах. Для этого подключим разные стили, в зависимости от устройства и размера экрана:

        
          
          <link href="print.css" rel="stylesheet" media="print"><link href="mobile.css" rel="stylesheet" media="all"><link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"><link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
          <link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

        
        
          
        
      

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

        
          
          <!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>Кулинарный блог</title>  <link rel="stylesheet" href="ie.css">  <link rel="alternate" type="application/rss+xml" title="Статьи с сайта cookbook.ru" href="http://cookbook.ru/rss.xml">  <link rel="shortcut icon" href="http://cookbook.ru/favicon.ico"></head><body><p>...</p></body></html>
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Кулинарный блог</title>
  <link rel="stylesheet" href="ie.css">
  <link rel="alternate" type="application/rss+xml" title="Статьи с сайта cookbook.ru" href="http://cookbook.ru/rss.xml">
  <link rel="shortcut icon" href="http://cookbook.ru/favicon.ico">
</head>
<body>
<p>...</p>
</body>
</html>

        
        
          
        
      

Оптимизация

Секция статьи "Оптимизация"

<link> — очень мощный и гибко настраиваемый тег. С его помощью можно многое оптимизировать, давайте посмотрим, как.

Условная загрузка ресурсов с медиавыражениями

Секция статьи "Условная загрузка ресурсов с медиавыражениями"

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

        
          
          <link href="print.css" rel="stylesheet" media="print"><link href="mobile.css" rel="stylesheet" media="all"><link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"><link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
          <link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

        
        
          
        
      

Предзагрузка ресурсов (preload)

Секция статьи "Предзагрузка ресурсов (preload)"

<link rel="preload"> говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы, и вы хотите ускорить процесс.

Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.

        
          
          <link rel="preload" href="style.css" as="style">
          <link rel="preload" href="style.css" as="style">

        
        
          
        
      

Используйте предзагрузку, когда ресурс понадобится в самое ближайшее время.

Предзагрузка и кэширование (prefetch)

Секция статьи "Предзагрузка и кэширование (prefetch)"

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

Здесь та же ситуация, что и у rel="preload" — браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.

        
          
          <link rel="prefetch" href="style.css" as="style">
          <link rel="prefetch" href="style.css" as="style">

        
        
          
        
      

Вероятно, этот тег можно безопасно использовать в любом объёме. Браузеры обычно планируют prefetch с наименьшим приоритетом, так что он никому не мешает. Только всегда стоит учитывать тот факт, что расходуется трафик пользователя, который может стоить денег.

Предварительное подключение к домену (preconnect)

Секция статьи "Предварительное подключение к домену (preconnect)"

<link rel="preconnect"> просит браузер заранее подключиться к домену, когда вы хотите ускорить установку соединения в будущем.

Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts или запрашивает ответ в формате JSON с сервера.

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

        
          
          <link rel= "preconnect" href="https://api.my-app.com">
          <link rel= "preconnect" href="https://api.my-app.com">

        
        
          
        
      

Используйте этот тег, чтобы немного ускорить загрузку стороннего скрипта или стилей за счёт предварительной установки соединения. Но не забывайте о том, что установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Поэтому используйте preconnect максимум для 4-6 доменов.

Предварительное разрешение записи DNS (dns-prefetch)

Секция статьи "Предварительное разрешение записи DNS (dns-prefetch)"

<link rel="dns-prefetch"> просит браузер заранее выполнить резолвинг DNS для домена, если вы скоро будете подключаться к нему и хотите ускорить начальное соединение.

Браузер должен определить его IP-адрес, если будет извлекать какие-то ресурсы оттуда. Например, загружать React из CDN.

Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.

        
          
          <link rel="dns-prefetch" href="https://api.my-app.com">
          <link rel="dns-prefetch" href="https://api.my-app.com">

        
        
          
        
      

Обратите внимание на схожие характеристики у <link rel="dns-prefetch"> и <link rel="preconnect">.

Использовать их вместе для одного домена обычно не имеет смысла, так как <link rel="preconnect"> уже включает в себя <link rel="dns-prefetch"> и многое другое. Это может быть оправданным в двух случаях:

  1. Вы планируете поддерживать старые браузеры: используйте <link rel="dns-prefetch"> в качестве запасного варианта для <link rel="preconnect">.
  2. Вы планируете ускорить подключение более чем к 4−6 доменам: тег <link rel="preconnect"> не рекомендуется использовать более чем с 4−6 доменами. <link rel="dns-prefetch"> потребляет меньше ресурсов, поэтому в случае необходимости используйте его.

Предзагрузка и пререндер страницы (prerender)

Секция статьи "Предзагрузка и пререндер страницы (prerender)"

<link rel="prerender"> просит браузер загрузить URL-адрес и отобразить его на невидимой вкладке.

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

        
          
          <link rel="prerender" href="https://my-app.com/pricing">
          <link rel="prerender" href="https://my-app.com/pricing">

        
        
          
        
      

Но не злоупотребляйте такой возможностью! Предварительный рендеринг чрезвычайно дорого обходится с точки зрения трафика и памяти. Поэтому не используйте <link rel="prerender"> более чем для одной страницы.

На практике

Секция статьи "На практике"

Дока Дог советует

Секция статьи "Дока Дог советует"

🛠 Чаще всего <link> используется для CSS-стилей, подгруженных из файла. А также для фавиконки и других важных ссылок.

Здесь также можно указать, является ли страница канонической (главной среди дублированных) или альтернативной: <link rel="canonical">, <link rel="alternate">.

Это нужно для качественной индексации в поисковиках. Например, если у нас мобилка на поддомене m.site.ru, то <link rel="canonical" href="https://site.ru/">, и <link rel="alternate" href="https://m.site.ru/">.

Также в alternate указываются всякие REST API и другие сервисные дела.

🛠 Для CSS не надо использовать type="text/css" — устарело.

🛠 Стоит отдельно описать правило специфичности: если какой-то стиль описывается ниже, то браузер выдаст ему больший приоритет. Это значит, что если мы подключаем стили несколькими файлами, мы можем столкнуться с проблемой, когда при правке стиля в CSS-файле это не повлияет на поведение элемента на странице, потому что в другом файле, подключённом ниже, есть какое-то переназначение того же стиля.

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 Начинающие разработчики часто путают атрибуты src и href.

src расшифровывается как source и переводится как «источник».

href расшифровывается как hyper reference, что переводится как «гиперссылка».

Разницу между этими двумя атрибутами можно описать так: всё, что должно быть загружено на странице — источник. Все сторонние ресурсы, на которые нужно перейти или сослаться — ссылка.

Соответственно, поскольку тег <link> — это ссылка, то для него мы используем атрибут href. Аналогично для тега <a>.

Тем временем, для тега <script> или <img> нужно писать атрибут src, поскольку эти теги загружают данные на страницу, а не перенаправляют пользователя или браузер куда-либо.

🛠 При подключении стилей не забываем про каскад! ☝️