Тег link в коде 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 область контента

Источник