С помощью какого атрибута указывается тип подключаемого файла в теге link
Обновлено: 07.07.2024
Время чтения: 8 мин
- Кратко
- Пример
- Как это понять
- Атрибуты
- Пример
- Оптимизация
- Условная загрузка ресурсов с медиавыражениями
- Предзагрузка ресурсов (preload)
- Предзагрузка и кэширование (prefetch)
- Предварительное подключение к домену (preconnect)
- Предварительное разрешение записи DNS (dns-prefetch)
- Предзагрузка и пререндер страницы (prerender)
- Дока Дог
- Алёна Батицкая
Обновлено 9 октября 2021
Кратко
Позволяет загружать на страницу содержимое из внешнего файла.
Пример
Как это понять
Матёрые программисты советуют описывать CSS-стили в отдельных файлах: так их легче редактировать, сортировать и подключать к разным страницам сайта. Чтобы применить стили из внешнего файла на странице, используйте тег <link> .
Однако внешним ресурсом может выступать не только файл со стилями, но и любой другой, или же ссылка на него.
Рассмотрим два наиболее часто встречающихся случая:
- Изображение, которое будет отображено в качестве фавиконки на вашем сайте;
- Внешняя ссылка на шрифт, который применяется на сайте.
Во всех описанных случаях <link> пишется внутри <head> .
Атрибуты
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-файла, каждый из которых содержит стили для одной из тем, то приоритет при загрузке будет отдаваться именно тому файлу, который относится к выбранной системной теме:
- as — позволяет указать тип загружаемого контента. Благодаря ему мы помогаем браузеру правильно расставлять приоритеты и планировать загрузку. as стоит применять, если указан атрибут rel="preload" или rel="prefetch" .
- crossorigin — указывает должен ли ресурс загружаться с помощью запроса CORS. Данный атрибут имеет два доступных значения:
- anonymous — Cross-origin запрос выполняется без отправки учётных данных;
- use-credentials — Cross-origin запрос выполняется с отправкой учётных данных.
Пример
Самый простой пример, как подключить файл со стилями:
Можно сделать разные версии сайта, чтобы пользователь мог выбрать удобную для него, например, версию для слабовидящих. Тогда для каждой версии можно подключить свой файл стилей:
Вот как можно использовать разные фавиконки для разных экранов и устройств:
В этом примере мы подключаем внешний файл со стилями с помощью атрибута rel="stylesheet" тега <link> , указываем RSS-документ текущего сайта ( <link rel="alternate" type="application/rss+xml"> ) и устанавливаем иконку сайта — фавиконку — в адресной строке браузера ( <link rel="shortcut icon"> ):
Оптимизация
<link> — очень мощный и гибко настраиваемый тег. С его помощью можно многое оптимизировать, давайте посмотрим, как.
Условная загрузка ресурсов с медиавыражениями
Вы можете обозначить тип или условие внутри атрибута media . Этот ресурс будет загружен только в том случае, если прописанные условия соответствуют действительности.
Предзагрузка ресурсов ( preload )
<link rel="preload"> говорит браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы, и вы хотите ускорить процесс.
Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
Используйте предзагрузку, когда ресурс понадобится в самое ближайшее время.
Предзагрузка и кэширование ( prefetch )
<link rel="prefetch"> просит браузер загрузить и кэшировать ресурс в фоновом режиме. Загрузка происходит с низким приоритетом, поэтому не мешает более важным ресурсам. Это полезно, если ресурс понадобится на следующей странице, а вы хотите заранее его кэшировать.
Здесь та же ситуация, что и у rel="preload" — браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
Вероятно, этот тег можно безопасно использовать в любом объёме. Браузеры обычно планируют prefetch с наименьшим приоритетом, так что он никому не мешает. Только всегда стоит учитывать тот факт, что расходуется трафик пользователя, который может стоить денег.
Предварительное подключение к домену ( preconnect )
<link rel="preconnect"> просит браузер заранее подключиться к домену, когда вы хотите ускорить установку соединения в будущем.
Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts или запрашивает ответ в формате JSON с сервера.
Установка нового соединения обычно занимает несколько сотен миллисекунд. Она производится один раз, но всё равно отнимает время. Если вы заранее установили соединение, то сэкономите время и быстрее загрузите ресурсы с этого домена.
Используйте этот тег, чтобы немного ускорить загрузку стороннего скрипта или стилей за счёт предварительной установки соединения. Но не забывайте о том, что установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Поэтому используйте preconnect максимум для 4-6 доменов.
Предварительное разрешение записи DNS ( dns-prefetch )
<link rel="dns-prefetch"> просит браузер заранее выполнить резолвинг DNS для домена, если вы скоро будете подключаться к нему и хотите ускорить начальное соединение.
Браузер должен определить его IP-адрес, если будет извлекать какие-то ресурсы оттуда. Например, загружать React из CDN.
Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.
Обратите внимание на схожие характеристики у <link rel="dns-prefetch"> и <link rel="preconnect"> .
Использовать их вместе для одного домена обычно не имеет смысла, так как <link rel="preconnect"> уже включает в себя <link rel="dns-prefetch"> и многое другое. Это может быть оправданным в двух случаях:
- Вы планируете поддерживать старые браузеры: используйте <link rel="dns-prefetch"> в качестве запасного варианта для <link rel="preconnect"> .
- Вы планируете ускорить подключение более чем к 4−6 доменам: тег <link rel="preconnect"> не рекомендуется использовать более чем с 4−6 доменами. <link rel="dns-prefetch"> потребляет меньше ресурсов, поэтому в случае необходимости используйте его.
Предзагрузка и пререндер страницы ( prerender )
<link rel="prerender"> просит браузер загрузить URL-адрес и отобразить его на невидимой вкладке.
Когда пользователь нажимает на ссылку, страница должна отобразиться немедленно. Это полезно, если вы уверены, что пользователь посетит определённую страницу, и хотите ускорить её отображение.
Но не злоупотребляйте такой возможностью! Предварительный рендеринг чрезвычайно дорого обходится с точки зрения трафика и памяти. Поэтому не используйте <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 , поскольку эти теги загружают данные на страницу, а не перенаправляют пользователя или браузер куда-либо.
Элемент HTML - Ссылка на Внешний Ресурс ( <link> ) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.
Чтобы подключить таблицу стилей, вы должны включить элемент <link> внутри вашего <head> следующим образом:
В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet . rel означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <link> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок, есть много различных видов отношений.
Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:
Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:
Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.
Вы можете, также, указать медиа тип или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:
В элемент <link> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:
Значение rel - preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса CORS.
Другие замечания по использованию:
- Элемент <link> может присутствовать в элементах <head> или <body> , в зависимости от того, имеет ли он тип ссылки, являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому, <link rel="stylesheet"> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <link> от содержимого body, помещая их в <head> .
- При использовании <link> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива заголовка Content-Security-Policy (en-US) не препятствует доступу к ней.
- Спецификации HTML и XHTML определяют обработчики событий для элемента <link> , но не указывают как они будут использоваться.
- В XHTML 1.0, пустые элементы, такие как <link> , требуют слеш: <link /> .
- WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
auto : указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.
high : указывает браузеру, что ресурс находится в высоком приоритете.
low : указывает браузеру, что ресурс находится в низком приоритете.
Примечание: Атрибут importance можно использовать только для элементов <link> с атрибутами rel="preload" или rel="prefetch" .
integrity Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity. media Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиавыражением. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.Примечания:
- В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print , screen , aural , braille . HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
- Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.
title Атрибут title имеет особое значение для элемента <link> . При использовании <link rel="stylesheet"> он определяет предпочтительную или альтернативную таблицу стилей. Неверное использование может стать причиной игнорирования таблицы стилей. type Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок rel="preload" , чтобы браузер загружал только те типы файлов, которые он поддерживает.Нестандартные атрибуты
disabled Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.Примечание: Хотя в стандарте HTML нет атрибута disabled , атрибут disabled есть в объекте DOM HTMLLinkElement .
Устаревшие атрибуты
charset Этот API вышел из употребления и его работа больше не гарантируется.Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию iso-8859-1 .
rev Этот API вышел из употребления и его работа больше не гарантируется.Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом href . Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута rel . Значения типов ссылки для атрибута аналогичны возможным значениям для rel .
Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.
Взамен, вы должны использовать атрибут rel с противоположным значением типов ссылки. Например, чтобы установить обратную ссылку для made , укажите author .Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.
Стилизация с CSS
Элемент <link> не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.
Примеры
Включение таблицы стилей
Включение таблицы стилей на страницы имеет следующий синтаксис:
Предоставление альтернативных таблиц стилей
Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.
Предоставление иконок для различных контекстов использования
Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения rel и sizes как подсказки.
Условная загрузка ресурсов с медиавыражениями
Вы можете предоставить тип медиа или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:
События загрузки таблицы стилей
Вы можете определить, когда таблица стилей была загружена, наблюдая за событием load , запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием error :
Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
HTML тег <link> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента <head>. Чаще всего тег <link> используется для подключения внешних таблиц стилей:
Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css" .
Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется:Предварительная загрузка страниц
Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется "предварительное получение страницы". Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch" , а также указывается целевая страница, которая будет заранее загружена на компьютер.
Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег <link> для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.
Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).
Атрибуты
- alternate - ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
- author - определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
- canonical - позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег <link> с атрибутом rel="canonical" .
Тег <link> (от англ. link — ссылка, связь) устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.
Элемент <link> обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a> .
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
href Путь к связываемому файлу. media Определяет устройство, для которого следует применять стилевое оформление. rel Определяет отношения между текущим документом и файлом, на который делается ссылка. sizes Указывает размер иконок для визуального отображения. type MIME-тип данных подключаемого файла.Также для этого элемента доступны универсальные атрибуты.
Путь к файлу, на который делается ссылка.
Синтаксис
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
media¶
Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько значений через запятую.
Синтаксис
Значения
all Все устройства. print Печатающее устройство вроде принтера. screen Экран монитора. speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
В HTML5 в качестве значений могут быть указаны медиа-запросы.
Значение по умолчанию
Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.
Синтаксис
Значения
alternate Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей. author Указывает ссылку на автора текущего документа или статьи. help Указывает ссылку на контекстно-зависимую справку. icon Адрес картинки, которая символизирует текущий документ или сайт. license Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе. next Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ. prefetch Указывает на предварительно кэшированный ресурс текущей страницы или сайта целиком. prev Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ. search Указывает ссылку на ресурс, который применяется для поиска по документу или сайту. stylesheet Определяет, что подключаемый файл хранит таблицу стилей (CSS).
Значение по умолчанию
sizes¶
Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).
Синтаксис
Значения
Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.
Значение по умолчанию
Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.
Синтаксис
Значения
Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css .
Читайте также: