Перейти к содержанию

<link>

Тег <link> (от англ. link — ссылка, связь) устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

Элемент <link> обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a>.

Демо

Метаданные документа

Синтаксис

1
2
3
<head>
    <link href="<адрес>" />
</head>

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

Атрибуты

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

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

href

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

Синтаксис

1
<link href="<адрес>" />

Значения

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

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

Нет.

media

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

Синтаксис

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

Значения

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

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

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

all

rel

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

Синтаксис

1
<link rel="<тип>" />

Значения

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

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

Нет.

sizes

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

Синтаксис

1
2
3
4
5
<link rel="icon" sizes="<ширина>X<высота>" />
<link
    rel="icon"
    sizes="<ширина1>X<высота1> <ширина2>X<высота2>* | any"
/>

Значения

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

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

Нет.

type

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

Синтаксис

1
<link type="<MIME-тип>" />

Значения

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

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

text/css

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>LINK</title>
        <link rel="stylesheet" href="ie.css" />
        <link
            rel="alternate"
            type="application/rss+xml"
            title="Статьи с сайта xsltdev.ru"
            href="https://xsltdev.ru/rss.xml"
        />
        <link
            rel="shortcut icon"
            href="https://xsltdev.ru/favicon.ico"
        />
    </head>
    <body>
        <p>...</p>
    </body>
</html>

Ссылки

Комментарии