Атрибут rel тега <link> — тип пов'язаного ресурсу
Атрибут rel визначає відносини між поточним документом і зв'язаним документом/ресурсом.
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<link rel="value">Атрибут rel може отримувати 14 значень:
-
alternate -
Надає посилання на альтернативний вигляд документа (тобто друк сторінки, переклад або дзеркала).
Приклад:
автор: NagarD<link rel="alternate" type="application/atom+xml" title="W3Schools News" href="/blog/news/atom">. -
author -
Надає посилання на автора документа.
автор: NagarD -
dns-prefetch -
Вказує, що браузер повинен виконувати превентивно дозвіл DNS для появи цільових ресурсів.
автор: NagarD -
help -
Надає посилання на документ довідки.
Приклад :
автор: NagarD<link rel="help" href="/help/"> -
icon -
Імпортування значка, щоб представити цей документ.
Приклад:
автор: NagarD<link rel="icon" href="/favicon.ico" type="image/x-icon">. -
license -
Надає посилання на інформацію про авторські права для документа.
автор: NagarD -
next -
Надає посилання на наступний документ в серії.
автор: NagarD -
pingback -
Надає адресу сервера pingback, який обробляє pingback до поточного документа.
автор: NagarD -
preconnect -
Вказує, що браузер повинен превентивно підключитися до появи цільових ресурсів.
автор: NagarD -
prefetch -
Вказує, що браузер повинен превентивно завантажити і кешувати цільової ресурс, як це, ймовірно, буде потрібно для подальшої навігації.
автор: NagarD -
preload -
Вказує, що браузер повинен превентивно завантажити і кешувати цільової ресурс для подальшої навігації відповідно до призначення заданої як “as” атрибут (і пріоритету, пов'язаного з цим призначенням).
автор: NagarD -
prev -
Вказує, що даний документ є частиною серії, і що попередній документ в серії посилального документа.
автор: NagarD -
search -
Надає посилання на ресурс, який може використовуватися для пошуку за поточним документом і його сторінок.
автор: NagarD -
stylesheet -
Визначає, файл, що підключається є таблицею зі стилями (CSS).
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 9 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
rel каже браузеру, ЧИМ є підключений ресурс: stylesheet — таблицею стилів, тому абзац синій. Без rel link не знав би, що робити з файлом.
<link rel="stylesheet" href="data:text/css,p%7Bcolor:%230172ad;font-weight:bold%7D">
<p>Мене пофарбував ресурс, підключений із rel="stylesheet".</p>Два однакові <link> з однаковими стилями — різниця лише в rel. Перший браузер підхопив, у другого слово написано з помилкою, і файл проігноровано мовчки: ні попередження, ні запису в консолі.
HTML
<html lang="uk">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="data:text/css,.ok%7Bcolor:%23127a4d%7D">
<link rel="styleshet" href="data:text/css,.oops%7Bcolor:%23c1121f%7D">
</head>
<body>
<p class="ok">rel="stylesheet" — файл підключено, текст зелений.</p>
<p class="oops">rel="styleshet" — файл проігноровано, текст лишився чорним.</p>
</body>
</html>CSS
body { font: 16px/1.6 system-ui, sans-serif; margin: 12px; background: #fff; color: #111; }
p { font-weight: 700; }Різниця між HTML 4.01 та HTML5
Деякі значення видалені, а деякі нові значення добавлені.
Коментарі
Коментарів ще немає — будьте першим!