Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>21 авг 2025</li>

3 <li>0</li>

4 </ul>Рассказываем, как правильно использовать тег для подключения внешних ресурсов к нашей странице.

5 Иллюстрация: Polina Vari для Skillbox Media

6 Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

7 С помощью тега <link> к HTML-документу подключают внешние ресурсы. Чаще всего это таблицы стилей (CSS), иконки, шрифты и другие файлы, которые помогают странице быть красивой.

8 В этой статье мы поговорим о том, как устроен тег <link>, какие у него атрибуты и как правильно его использовать в разных задачах.

9 Содержание

10 <ul><li><a>Что такое тег <link> и зачем он нужен</a></li>

11 <li><a>Атрибуты тега <link></a></li>

12 <li><a>Предзагрузка файлов</a></li>

13 <li><a>Частые ошибки при подключении стилей или иконок</a></li>

14 </ul>Тег <link> находится внутри <head>. Пользователи его не видят, он только помогает браузеру правильно загрузить и оформить сайт.

15 Всё, что находится в <head>, загружается до того, как страница отобразится. Это важно: если <link> разместить в другом месте, пользователь увидит мигание - сначала необработанную вёрстку, а потом уже оформленную страницу. Поэтому <link> и помещают в <head>.

16 С помощью тега можно решить несколько задач:

17 <ul><li>подключить таблицы стилей CSS;</li>

18 <li>подключить фавиконку - это иконка сайта, которую видно на вкладке браузера;</li>

19 <li>подключить внешние шрифты, например, из Google Fonts;</li>

20 <li>сообщить браузеру, какие файлы нужно загрузить заранее, ещё до того, как они реально понадобятся на странице.</li>

21 </ul>Тег <link> непарный, ему не нужен закрывающий тег. Всю информацию браузеру мы передаём с помощью атрибутов.

22 Основные атрибуты, которые мы рассмотрим, - rel и href, type, media, crossorigin, sizes. Вообще, их намного больше, мы выбрали только самые распространённые.

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

24 <link href="css/style.css">С помощью этого же атрибута подключаются внешние шрифты. Обычно вы выбираете подходящий шрифт в библиотеке, а она сама выдаёт вам готовую ссылку для подключения. Выглядит эта ссылка обычно так:

25 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Здесь ещё используется атрибут rel, о нём мы поговорим в следующем разделе.

26 Следующий атрибут - rel. Он объясняет браузеру, что за связь между HTML-документом и указанным в href файлом. Без этого браузер не поймёт, что вы подключаете именно стили, и может проигнорировать <link>.

27 Для подключения CSS используем:

28 <link rel="stylesheet" href="css/style.css">Всего у rel четыре значения:

29 <ul><li>stylesheet - подключение таблицы стилей CSS;</li>

30 <li>icon - подключение иконки сайта (favicon);</li>

31 <li>preload - предварительная загрузка ресурсов;</li>

32 <li>alternate - ссылка на альтернативную версию страницы, например, на другом языке.</li>

33 </ul>В этом атрибуте мы объясняем браузеру, что за тип у файла, который мы собираемся подключить.

34 Для таблицы стилей используем:

35 <link rel="stylesheet" href="css/style.css" type="text/css">А для фавиконки:

36 <link rel="icon" href="favicon.ico" type="image/x-icon">Вообще, в большинстве случаев атрибут type писать не обязательно - современные браузеры сами определяют тип файла по расширению. Например, если подключить CSS-файл и написать:

37 <link rel="stylesheet" href="style.css">Браузер поймёт, что это таблица стилей, даже если вы не указали type="text/css". То же касается фавиконки с расширением .ico.

38 Но бывают ситуации, когда type лучше всё же указать:

39 <ul><li>Вы заботитесь о совместимости со старыми браузерами.Некоторые из них не определяют тип файла по расширению. Особенно старые версии Internet Explorer.</li>

40 <li>У файла нестандартное расширение или его вообще нет.В такой ситуации браузер может и не догадаться, чего вы от него хотите.</li>

41 <li>Код будет встраиваться в другие системы или платформы.В некоторых CMS или конструкторах сайтов требуется явно указывать типы.</li>

42 </ul>В остальных случаях можно опустить type без проблем. Код останется рабочим.

43 Атрибут sizes адаптирует фавиконку под разные устройства. Его используют вместе с <link rel="icon">. Он подсказывает браузеру, для каких размеров экрана подходит конкретная иконка.

44 Значение указывается в формате ширина x высота, например:

45 <ul><li>16×16 - маленькая иконка для старых браузеров;</li>

46 <li>32×32 - универсальный размер для большинства устройств;</li>

47 <li>48×48 - для экранов с высоким разрешением;</li>

48 <li>any - используется с векторными SVG-иконками, которые можно масштабировать до любого размера.</li>

49 </ul>В коде это выглядит так:

50 <link rel="icon" href="images/favicon-small.png" sizes="16x16" type="image/png"> <link rel="icon" href="images/favicon-medium.png" sizes="32x32" type="image/png"> <link rel="icon" href="images/favicon-large.png" sizes="48x48" type="image/png"> <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">Иногда бывает нужно, чтобы сайт выглядел по-своему в разных ситуациях. Например, одни стили - для экрана компьютера, другие - для телефона, а третьи - для печати. Чтобы такое сделать, мы прописываем стили в разных файлах, подключаем их и добавляем к тегу <link> атрибут media. Он подсказывает браузеру, когда использовать конкретный CSS-файл.

51 У атрибута есть несколько значений:

52 <ul><li>all - стили работают всегда (это значение по умолчанию).</li>

53 <li>screen - стили работают, когда пользователь использует устройство с экраном, то есть телефон, планшет, десктоп и прочие.</li>

54 <li>print - включается, когда пользователь печатает страницу.</li>

55 <li>speech - для скринридеров - устройств, которые озвучивают текст для людей с проблемами зрения.</li>

56 <li>screen and (max-width: 768px) - применяется только к экранам меньше указанной ширины.</li>

57 </ul>Синтаксис выглядит так:

58 <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="css/print.css" media="print" type="text/css"> <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 768px)" type="text/css"> <link rel="stylesheet" href="css/desktop.css" media="screenИногда мы подключаем ресурсы не со своего сайта, а с другого домена. Это называют кросс-доменными запросами. Атрибут crossorigin сообщает браузеру, нужно ли передавать при таком запросе учётные данные: куки, заголовки авторизации и тому подобное.

59 Значения атрибута:

60 <ul><li>anonymous - запрос выполняется без учёных данных. Браузер не будет отправлять cookie, сертификаты и заголовки HTTP basic authentication. Значение по умолчанию.</li>

61 <li>use-credentials - запрос выполняется с отправкой учётных данных.</li>

62 </ul>Пример подключения иконки с другого домена:

63 <link rel="icon" href="https://example.com/favicon.png" type="image/png" crossorigin="anonymous">В большинстве случаев достаточно использовать anonymous или вообще не указывать атрибут - браузеры работают с ним по умолчанию.

64 Браузер обычно загружает все ресурсы в том порядке, в котором они прописаны в коде. Но мы можем заранее указать, какие ресурсы хотим загрузить первыми. Это называется предзагрузка (preload). Предзагрузка - часть оптимизации сайта, благодаря ей страница загружается быстрее.

65 Чтобы включить предзагрузку, используем атрибут rel="preload", который сообщает браузеру, что ресурс нужно загрузить заранее, и атрибут as, который подсказывает, что именно мы загружаем: изображение, шрифт, скрипт и так далее.

66 <link rel="preload" href="fonts/main.woff2" as="font" type="font/woff2" crossorigin="anonymous"> <link rel="preload" href="image.jpg" as="image">В первом примере мы говорим браузеру сначала загрузить шрифт, а во втором - изображение.

67 Атрибут rel может повлиять на последовательность загрузки и другими способами:

68 <ul><li>prefetch - загружает файл в фоне после основной загрузки страницы. Это делается, если мы ожидаем от пользователя какого-то действия - скажем, перехода на следующую страницу: файл окажется в кэше, и посетитель сразу сможет его использовать.</li>

69 <li>prerender - полностью загружает следующую страницу в фоне, чтобы при переходе она открылась мгновенно.</li>

70 <li>preconnect - если нужно установить соединение с другим сервером, браузер сделает это заранее. Дело в том, что при соединении серверам нужно обменяться информацией. Обычно это занимает доли секунды, но, если канал перегружен, это может заметно замедлить загрузку.</li>

71 <li>dns-prefetch - ускоряет определение IP-адреса внешнего домена. Когда браузеру нужно загрузить ресурс с другого сайта, он сначала должен узнать IP-адрес этого домена. Для этого он делает DNS-запрос. Этот процесс называется разрешением доменного имени и может занять несколько десятков миллисекунд. Если таких ресурсов много, задержка становится заметной. dns-prefetch позволяет сделать всё это заранее.</li>

72 </ul>Если вы укажете rel="preload", но не добавите as, браузер не поймёт, какой тип ресурса вы хотите предзагрузить, и просто не станет этого делать. Кроме того, важно точно указать тип: as="font" - для шрифта, as="image" - для картинки и так далее.

73 Если вы подключаете файл через preload, но потом нигде его не используете, браузер потратит время и трафик зря. Это может даже замедлить загрузку страницы. Загружайте только то, что действительно понадобится.

74 Если добавить в preload слишком много ресурсов - например, все шрифты на сайте, - они начнут загружаться одновременно и мешать друг другу. Используйте preload только для действительно ценных элементов.

75 Узнать больше о теге <link> и его атрибутах вы сможете, прочитав<a>документацию</a>.

76 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>