Тег link в коде HTML страницы

Синтаксис¶

Закрывающий тег не требуется.

Атрибуты¶

href Путь к связываемому файлу. media Определяет устройство, для которого следует применять стилевое оформление. rel Определяет отношения между текущим документом и файлом, на который делается ссылка. sizes Указывает размер иконок для визуального отображения. type MIME-тип данных подключаемого файла.

Также для этого элемента доступны универсальные атрибуты.

href¶

Путь к файлу, на который делается ссылка.

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

media¶

Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько значений через запятую.

link media="all | print | screen | speech" /> 

all Все устройства. print Печатающее устройство вроде принтера. screen Экран монитора. speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию

rel¶

Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.

alternate Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей. author Указывает ссылку на автора текущего документа или статьи. help Указывает ссылку на контекстно-зависимую справку. icon Адрес картинки, которая символизирует текущий документ или сайт. license Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе. next Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ. prefetch Указывает на предварительно кэшированный ресурс текущей страницы или сайта целиком. prev Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ. search Указывает ссылку на ресурс, который применяется для поиска по документу или сайту. stylesheet Определяет, что подключаемый файл хранит таблицу стилей (CSS).

Значение по умолчанию

sizes¶

Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).

link rel="icon" sizes="X" /> link rel="icon" sizes="X X* | any" /> 

Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

Значение по умолчанию

type¶

Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css .

Значение по умолчанию

Спецификации¶

• Preload, определение
• Subresource Integrity, определение атрибута integrity
• WHATWG HTML Living Standard
• HTML 5
• HTML 4.01 Specification
• Resource Hints, определение dns-prefetch , preconnect , prefetch и prerender

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

 html> head> meta charset="utf-8" /> title>LINKtitle> link rel="stylesheet" href="ie.css" /> link rel="alternate" type="application/rss+xml" title="Статьи с сайта xsltdev.ru" href="http://xsltdev.ru/rss.xml" /> link rel="shortcut icon" href="http://xsltdev.ru/favicon.ico" /> head> body> p>. p> body> html> 

Источник

Тег link

Тег link подключает CSS файлы на HTML страницу. Кроме того, link подключает некоторые другие файлы, например, фавикон. (Фавикон — это ярлычок сайта, который виден во вкладке браузера. Его также можно увидеть в некоторых поисковиках при поиске напротив сайтов, например в Яндексе).

У данного тега очень много атрибутов и они могут принимать разнообразные значения, однако в реальной жизни они все практически не используются. Самое популярное — это подключение CSS и добавление фавикона.

Как подключить CSS в HTML5: . В более ранних версиях нужно было добавлять атрибут type в значении text/css. В HTML5 так тоже можно делать, но это не обязательно.

Тег link не требует закрывающего тега.

Атрибуты

Значения атрибута media

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию: all .

Пример

Давайте посмотрим, как выглядит структура простейшей html страницы, к которой добавим подключение CSS файлов и фавикона:

Смотрите также

• тег style ,
  который добавляет CSS прямо на странице
• атрибут style , который задает стили конкретному тегу

Источник

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

Источник