Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

HTML тег <link>

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

Описание

HTML тег <link> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента <head>. Чаще всего тег <link> используется для подключения внешних таблиц стилей:

<link href="style.css" rel="stylesheet" type="text/css">

Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css".

Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется:
<link href="style.css" rel="stylesheet">

Предварительная загрузка страниц

Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется "предварительное получение страницы". Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch", а также указывается целевая страница, которая будет заранее загружена на компьютер.

<link rel="prefetch" href="httр://www.puzzleweb/html/tag_p.php">

Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег <link> для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.

Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).

Атрибуты

href:
Указывает месторасположение (URL) внешнего файла (путь к файлу может быть указан с помощью абсолютного или относительного адреса).
hreflang:
Указывает двухбуквенный код языка, определяющий язык документа, на который ведет ссылка. Атрибут hreflang используется только совместно с атрибутом href.
media:
Определяет под какие устройства оптимизирован файл. Главным образом он используется с файлами таблиц стилей, для определения различных стилей под разные типы носителей. Атрибут media может принимать сразу несколько значений, разделяемых между собой пробелами.
rel:
Указывает связь между текущим документом и документом, на который ведет ссылка.
  • alternate - ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
  • author - определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
  • canonical - позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег <link> с атрибутом rel="canonical".

    Атрибут href, в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной:
    <link rel="canonical" href="httр://www.puzzleweb/html/tag_p.php">
  • first - указывает ссылку, ведущую на первый документ из последовательности документов.
  • help - ссылка на документ со справкой.
  • icon - определяет путь к иконке, которая будет использована для текущего документа.
  • last - указывает ссылку, ведущую на последний документ в последовательности документов.
  • licence - ссылка на сведения об авторских правах для документа.
  • next - указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
  • prefetch - указывает, что следует заранее кэшировать файл, на который ведет ссылка.
  • prev - указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
  • search - ссылка на поиск для документа.
  • stylesheet - определяет внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
sizes:
Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", может принимать следующий значения:
  • ширинаXвысота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинаxвысота (размеры иконки определяются в пикселях), пример:
    <link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png">
  • any - иконка может масштабироваться до любого размера.
type:
Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка, используется только совместно с атрибутом href.

Тег <link> так же поддерживает Глобальные атрибуты

Стиль по умолчанию

link {
    display: none;
}  

Пример

<head>
  <link rel="stylesheet" href="style.css">
</head> 

Результат данного примера в окне браузера:

Пример использования тега <link>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь