Тег 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 используется только для запросов предварительной загрузки.
Читайте также:  Java lang noclassdeffounderror jaxb

🔡 Другие теги для изменения текста

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

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

Default CSS Settings

Most browsers will display the element with the following default values:

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

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.

Синтаксис

Ниже представлены распространенные случаи использования тега .

Подключение внешнего файла таблиц стилей CSS

Наиболее употребляемый вариант тега link — подключение к HTML документу файла стилей CSS. Для этого используются атрибуты rel=»stylesheet» и type=»text/css» .

Подробнее о способах подключения таблиц стилей CSS читайте в статье: Подключение стилей CSS к HTML документу. Как подключить CSS файл.

Подключение иконки документа favicon

С помощью конструкции ниже, подключается иконка (favicon, фавикон), которая будет выведена в заголовке вкладки возле названия документа (страницы).

Указание альтернативной версии HTML документа

Часто используется для указания иноязычной версии документа (версии страницы на другом языке). Для этого используется атрибут тега rel=»alternate» и hreflang=»код_языка» .

Пример использования тега в HTML коде

Поддержка браузерами

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
Да Да Да Да Да

Атрибуты тега

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

Поделиться в Facebook Поделиться в ВКонтакте Поделиться в Одноклассники Поделиться в Twitter

Подключение стилей CSS к HTML документу. Как подключить CSS файлТег HTML встроенные стили CSSСписки в HTML. Все о HTML спискахТеги форматирования текста в HTMLСоздание таблиц в HTML. Все о HTML таблицахТег HTML раздел заголовковТег HTML область контента

Источник

Оцените статью