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

    HTML

    <link>

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

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

    Кратко

    Скопировано

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

    Пример

    Скопировано
            
          
          <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 запрос выполняется с отправкой учётных данных, если они доступны. Например, если вы загружаете стиль CSS с другого origin и хотите, чтобы браузер отправлял куки для аутентификации, вы можете использовать это значение.

    При использовании атрибута crossorigin в теге link, браузер будет проверять, поддерживает ли сервер заголовки CORS для запрашиваемого ресурса. Если сервер не поддерживает CORS или не возвращает нужные заголовки, то браузер может блокировать загрузку ресурса.

    В современных браузерах атрибут crossorigin обычно необязателен для большинства типов ресурсов, таких как стили CSS, изображения или шрифты. Однако, если вы загружаете скрипт с другого домена, то использование атрибута crossorigin может быть полезным для обеспечения безопасности и корректной работы скрипта.

    Пример

    Скопировано

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

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

    Скопировано

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

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

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

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

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

    Скопировано

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

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

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

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

    Предварительное подключение к домену (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)

    Скопировано

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

    Скопировано

    <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, поскольку эти теги загружают данные на страницу, а не перенаправляют пользователя или браузер куда-либо.

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

    На собеседовании

    Скопировано
    Задать вопрос в рубрику
    🤚 Я знаю ответ

    Марина Дорошук  отвечает

    Скопировано

    Когда мы размещаем стили внутри тега <head>, браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега <link> co стилями в начало документа предотвращает повторную перерисовку.

    Тег <script> обычно идёт перед закрывающимся тегом </body>. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.

    Мы можем размещать скрипт в <head>, если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу <script>. Про их отличия можно почитать подробнее в доке про <script>.

    defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.

    Ещё один способ — указать атрибут <script type="module">, который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть <script type="module" defer> равносильно <script type="module">, и указание defer не будет иметь никакого эффекта.

    Читайте также