Тег <link> прописывается внутри тега <head> и подключает к странице внешний файл - чаще всего файл CSS-стилей, а ещё favicon вкладки. Важно не путать его с кликабельной ссылкой: за неё отвечает совсем другой тег, <a>, который виден на странице и находится в body. <link> сам по себе на странице невидим, ничего не оборачивает и не имеет закрывающего тега - а на одной странице таких тегов обычно несколько, по одному на каждый подключаемый файл.
В этой статье
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png">Атрибуты: rel, href, type
| Атрибут | Для чего |
|---|---|
rel | Обязательный. Тип связи с файлом - stylesheet для CSS, icon для favicon. Без него браузер не понимает, что делать с файлом, и обычно просто игнорирует тег |
href | Путь к подключаемому файлу - точно такой же по смыслу, как у ссылки, только ведёт не на страницу, а на ресурс |
type | Необязательная подсказка о MIME-типе файла (например text/css). Современные браузеры и так определяют тип по rel, поэтому на практике часто опускается |
link rel="stylesheet" - подключение CSS
Самое частое применение <link> - вынести CSS-правила в отдельный файл и подключить его к странице, вместо того чтобы писать стили прямо в HTML. Пока файл не подключён (или подключён неверно), у страницы нет ни одного из этих правил - она отображается совсем без оформления.
Пример: страница со стилями и без них
Нажмите на переключатель - карточка ниже показывает эффект подключённого файла стилей:
Карточка товара
Цена: 1200 руб.
На реальной странице роль переключателя играет сам тег <link rel="stylesheet"> - есть он в <head> или нет, работает ли правильно путь в href.
link rel="icon" - favicon вкладки
Вторая частая роль <link> - подключить favicon, маленькую иконку сайта на вкладке браузера, в закладках и во вкладках последних открытых страниц. Без этого тега браузер обычно показывает вкладку вообще без иконки или подставляет иконку по умолчанию.
Пример: вкладка браузера с favicon и без него
Нажмите на переключатель - ниже упрощённый макет вкладки браузера:
Это макет, а не настоящая вкладка браузера - реальную вкладку одной страницы через JS менять некорректно, но принцип совпадает: цветной квадрат появляется или пропадает ровно вместе с тегом <link rel="icon"> в head.
Ошибки при работе с тегом link
| Ошибка | Что происходит | Как исправить |
|---|---|---|
У <link> нет атрибута rel | Браузер не понимает, для чего нужен файл, и обычно просто игнорирует тег | Всегда указывать rel - stylesheet для CSS, icon для favicon |
Неверный путь в href | Файл не находится, стили не применяются или иконка не показывается, а явной ошибки на странице не видно | Проверить путь к файлу - относительный он или абсолютный, нет ли опечатки |
<link> путают с тегом ссылки | Кликабельная ссылка на странице - это тег <a>, а не <link>: это два разных тега с разным назначением | Для перехода по клику - <a href="...">, для подключения файла - <link> |
Несколько <link rel="stylesheet"> в неверном порядке | При одинаковой специфичности правил побеждает файл, подключённый позже - порядок в head влияет на итоговый вид страницы | Подключать базовые стили раньше, а те, что должны их переопределять, - позже |
