- Атрибуты тега link html
- Примеры использования
- Глобальные атрибуты
- Ограничения
- Нюансы
- Предварительная загрузка страниц
- Атрибуты
- HTML Tag
- Browser Support
- Attributes
- Global Attributes
- Event Attributes
- Related Pages
- Default CSS Settings
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- Тег HTML подключение внешнего файла, ресурса
- Синтаксис
- Основные вариации тега link
- Подключение внешнего файла таблиц стилей CSS
- Подключение иконки документа favicon
- Указание альтернативной версии HTML документа
- Пример использования тега в HTML коде
- Поддержка браузерами
- Устаревшие атрибуты
Атрибуты тега link html
HTML-тег устанавливает связь между документом и внешним ресурсом, например, таблицей стилей.
Атрибуты тега :
- href — адрес гиперссылки.
- rel — указывает связь между текущим документом и связанным ресурсом.
- as — тип ресурса, на который вы ссылаетесь.
- type — MIME-тип связанного ресурса.
- media — медиазапрос, для которого предназначен связанный ресурс.
- sizes — размер иконок в ссылке rel=»icon» .
- integrity — ожидаемое криптографическое хеш-значение связанного ресурса.
- crossorigin — как элемент будет обрабатывать CORS-запросы.
Примеры использования
Ссылка на таблицу стилей для устройств с определённой шириной:
Для чего использовать тег
- Для ссылки на таблицу стилей.
- Для ссылки на иконку, которая будет отображаться в адресной строке браузера или на странице.
- Для ссылки на RSS-канал.
- Для ссылки на канонический URL, чтобы избежать проблем с дублированием контента.
Глобальные атрибуты
Ограничения
Тег может использоваться только для ссылки на внешние ресурсы. Его нельзя использовать для определения внутренних стилей или скриптов.
Нюансы
- Если атрибут rel имеет значение stylesheet , атрибут type может быть опущен, так как по умолчанию используется значение text/css .
- Если атрибут rel имеет значение icon , атрибут type должен иметь значение image/png .
- Атрибут as используется только для запросов предварительной загрузки.
🔡 Другие теги для изменения текста
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
HTML тег
HTML тег определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента . Чаще всего тег используется для подключения внешних таблиц стилей:
Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет «text/css» .
Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется:
Предварительная загрузка страниц
Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется «предварительное получение страницы». Чтобы сделать это, используется тег с атрибутом rel=»prefetch» , а также указывается целевая страница, которая будет заранее загружена на компьютер.
Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.
Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).
Атрибуты
- alternate — ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
- author — определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
- canonical — позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег с атрибутом rel=»canonical» .
Атрибут href , в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной:
HTML Tag
The tag defines the relationship between the current document and an external resource.
The tag is most often used to link to external style sheets or to add a favicon to your website.
The element is an empty element, it contains attributes only.
Browser Support
Attributes
Attribute | Value | Description |
---|---|---|
crossorigin | anonymous use-credentials | Specifies how the element handles cross-origin requests |
href | URL | Specifies the location of the linked document |
hreflang | language_code | Specifies the language of the text in the linked document |
media | media_query | Specifies on what device the linked document will be displayed |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer to use when fetching the resource |
rel | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet | Required. Specifies the relationship between the current document and the linked document |
sizes | HeightxWidth any | Specifies the size of the linked resource. Only for rel=»icon» |
title | Defines a preferred or an alternate stylesheet | |
type | media_type | Specifies the media type of the linked document |
Global Attributes
Event Attributes
Related Pages
Default CSS Settings
Most browsers will display the element with the following default values:
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Тег HTML подключение внешнего файла, ресурса
Тег в HTML используется для связи текущего документа (страницы) с внешним ресурсом.
Чаще всего HTML тег используют для подключения каскадных таблиц стилей CSS.
Синтаксис
Основные вариации тега link
Ниже представлены распространенные случаи использования тега .
Подключение внешнего файла таблиц стилей CSS
Наиболее употребляемый вариант тега link — подключение к HTML документу файла стилей CSS. Для этого используются атрибуты rel=»stylesheet» и type=»text/css» .
Подробнее о способах подключения таблиц стилей CSS читайте в статье: Подключение стилей CSS к HTML документу. Как подключить CSS файл.
Подключение иконки документа favicon
С помощью конструкции ниже, подключается иконка (favicon, фавикон), которая будет выведена в заголовке вкладки возле названия документа (страницы).
Указание альтернативной версии HTML документа
Часто используется для указания иноязычной версии документа (версии страницы на другом языке). Для этого используется атрибут тега rel=»alternate» и hreflang=»код_языка» .
Пример использования тега в HTML коде
Поддержка браузерами
Тег | |||||
Да | Да | Да | Да | Да |
Атрибуты тега
Определяет как будут обрабатываться запросы, использующие CORS .
Обязательный атрибут. Определяет отношение текущего ресурса к прикрепленному (чем является прикрепленный ресурс для текущего).
- alternate — альтернативная версия документа. Например, страница на другом языке, версия страницы для печати, зеркало;
- author — ссылка на автора страницы;
- dns-prefetch — предварительная конвертация домена связанного файла в IP через DNS (ускоряет дальнейшую загрузку подключаемого файла);
- help — ссылка на справку;
- icon — подключение иконки документа. Иконка обычно выводится возле названия страницы в списке вкладок;
- license — ссылка на документ, содержащий правовую информацию о текущем документе;
- next — следующий документ (для документов, объединенных в последовательность);
- pingback — адрес ресурса, отвечающего за обработку pingback текущего документа;
- preconnect — предварительная установка TCP, TLS связи со связанным файлом (ускоряет дальнейшую загрузку подключаемого файла);
- prefetch — предварительная загрузка файла с дальнейшим кешированием с низким приоритетом. Позволяет не ждать загрузки файла в момент первого использования;
- preload — предварительная загрузка файла. Позволяет не ждать загрузки файла в момент первого использования файла;
- prerender — предварительная загрузка и рендер. Браузер предварительно загрузит страницу по ссылке и подключенные к ней файлы, построит DOM дерево. При дальнейшем переходе на эту страницу, она загрузится (будет доступна) моментально;
- prev — предыдущий документ (для документов, объединенных в последовательность);
- search — ссылка на ресурс, способный выполнить поиск по текущему документу;
- stylesheet — подключение каскадных таблиц стилей CSS.
Указывает размер прикрепляемых иконок.
Формат: значение ширины в пикселях, латинская буква «x» (большая или маленькая), значение высоты в пикселях. Можно указывать несколько размеров через пробел.
Для масштабируемых иконок используется значение «any».
Определяет тип содержимого тега.
Для подключения таблиц стилей используется значение: «text/css».
Устаревшие атрибуты
alternate
author
dns-prefetch
help
icon
license
next
pingback
preconnect
prefetch
preload
prerender
prev
search
stylesheet
Определяет отношение прикрепленного ресурса к текущему (чем является текущий ресурс для прикрепленного).
Смотрите расшифровку значений выше, в описании атрибута «rel».
Определяет где будет открыт связанный ресурс:
- _blank — в новой вкладке или окне;
- _parent — в родительском окне;
- _self — в текущем окне (используется по умолчанию);
- _top — на весь экран.
Подключение стилей CSS к HTML документу. Как подключить CSS файлТег HTML встроенные стили CSSСписки в HTML. Все о HTML спискахТеги форматирования текста в HTMLСоздание таблиц в HTML. Все о HTML таблицахТег HTML раздел заголовковТег HTML область контента