Атрибут HTML – rel

{{HTMLSidebar}}

Атрибут rel (relationship – взаємозв'язок) визначає зв'язок між пов'язаним ресурсом та поточним документом. Його можна використовувати на елементах <link>, <a>, <area> та <form>. Підтримувані значення залежать від елемента, на якому знаходиться атрибут.

Тип взаємозв'язку задається значенням атрибута rel, котрий, якщо є, повинен мати значення, що є неупорядкованим набором унікальних ключових слів, розділених пробілами. На відміну від імені class, яке не виражає семантику, атрибут rel повинен виражати лексеми, які семантично дійсні як для машин, так і для людей. Поточні реєстри можливих значень атрибута rel – це реєстр взаємозв'язків посилань IANA, Живий стандарт HTML та вільно редагована сторінка наявних значень rel у вікі мікроформатів, як запропоновано Живим стандартом. Якщо використовується атрибут rel, який не входить до жодного з трьох джерел вище, то деякі валідатори HTML (наприклад, Служба перевірки розмітки W3C) будуть генерувати попередження.

Наступна таблиця перелічує частину з найважливіших наявних ключових слів. Кожне ключове слово в межах значення, розділеного пробілами, повинно бути унікальним в межах цього значення.

Атрибут rel має зміст для елементів <link>, <a>, <area> та <form>, але деякі значення мають зміст лише для їх підмножини. Як і всі значення атрибутів ключових слів HTML, ці значення нечутливі до регістру.

Атрибут rel не має усталеного значення. Якщо атрибут відсутній або жодне зі значень атрибута не підтримується, то документ не має особливого зв'язку з цільовим ресурсом, крім наявності гіперпосилання між ними. У цьому випадку, якщо атрибут rel відсутній, не має ключових слів або якщо жодне зі значень, розділених пробілами, не відповідає вищезазначеним, то елементи <link> і <form> не створюють жодних посилань. <a> та <area> в такій ситуації все одно створюють посилання, але без визначеного зв'язку.

Значення

alternate

Позначає альтернативне представлення поточного документа. Дійсне для <link>, <a> та <area>, сенс залежить від значень інших атрибутів.

• Вкупі з ключовим словом stylesheet на <link> це утворює альтернативний список стилів.

  <!-- постійний список стилів -->
  <link rel="stylesheet" href="default.css" />
  <!-- альтернативні списки стилів -->
  <link
    rel="alternate stylesheet"
    href="highcontrast.css"
    title="Високий контраст" />
  

• Вкупі з атрибутом hreflang, що відрізняється від мови документа, це позначає переклад.

• Вкупі з атрибутом type зі значенням "application/rss+xml"або "application/atom+xml", це утворює гіперпосилання, що вказує на стрічку синдикації.

  <link
    rel="alternate"
    type="application/atom+xml"
    href="posts.xml"
    title="Блоґ" />
  

• Інакше – це утворює гіперпосилання, що вказує на альтернативне представлення поточного документа, чия природа задана атрибутами hreflang і type

  • Якщо hreflang задано разом з alternate, і значення hreflang відрізняється від мови поточного документа, то це позначає, що пов'язаний документ є перекладом.
  • Якщо type задано разом з alternate, то це позначає, що пов'язаний документ має альтернативний формат (наприклад, PDF).
  • Як атрибут hreflang, так і атрибут type можуть бути задані разом з alternate.

  <link
    rel="alternate"
    href="/fr/html/print"
    hreflang="fr"
    type="text/html"
    media="print"
    title="HTML французькою (для друку)" />
  <link
    rel="alternate"
    href="/fr/pdf"
    hreflang="fr"
    type="application/pdf"
    title="PDF французькою" />
  

author

Позначає те, що пов'язаний документ надає більше інформації про автора поточного документа або статті. Дійсне для елементів <link>, <a> та <area>.

Для <a> і <area> це позначає те, що пов'язаний документ (або mailto:) надає інформацію про автора найближчого батьківського елемента <article>, якщо такий є, інакше – про весь документ.

Для <link> це позначає автора всього документа.

Примітка: Через історичні причини застаріле значення атрибута rev="made" працює як rel="author".

bookmark

Має зміст як значення атрибута rel для елементів <a> та <area>. Надає постійне посилання для найближчого елемента-предка <article>, якщо такий є. Якщо елемента-предка <article> немає, то надає постійне посилання для розділу, з яким поточний елемент найтісніше сполучений.

canonical

Це значення, дійсне для <link>, визначає головний URL поточного документа, що допомагає пошуковим системам зменшити дублювання вмісту.

dns-prefetch

Має зміст на елементах <link>, що знаходяться як всередині <body>, так і в <head>, і каже браузерові наперед виконати розв'язання DNS для походження цільового ресурсу. Корисне для ресурсів, котрі, ймовірно, знадобляться користувачеві, допомагає знизити затримку і тим самим покращити продуктивність у тому випадку, коли користувач дійсно звернеться до ресурсу, оскільки браузер наперед виконав розв'язання DNS для походження вказаного ресурсу. Дивіться dns-prefetch, описане в підказках щодо ресурсів.

external

Має зміст для <link>, <a> та <area> і позначає, що пов'язаний документ не є частиною поточного сайту. Це значення можна використовувати з селекторами атрибутів для стилізації зовнішніх посилань таким чином, щоб користувачу було зрозуміло, що він залишає поточний сайт.

help

Ключове слово help має зміст для <form>, <link>, <a> та <area> і позначає те, що пов'язаний вміст надає чутливу до контексту допомогу, вміщаючи інформацію про батьківський елемент щодо елемента, що визначає гіперпосилання, та його дочірні елементи. Коли використовується всередині <link>, така допомога стосується всього документа. Коли використовується з <a> та <area> і підтримується, то типовий cursor буде help, а не pointer.

icon

Дійсне для <link>; пов'язаний ресурс представляє піктограму, ресурс для представлення сторінки в користувацькому інтерфейсі, для поточного документа.

Найпоширеніше застосування для значення icon – це фавікон:

<link rel="icon" href="favicon.ico" />

Якщо є кілька елементів <link rel="icon">, то браузер використовує їх атрибути media, type і sizes для вибору найбільш підхожої піктограми. Якщо декілька піктограм однаково підходять, то використовується остання з них. Якщо найбільш підхожа піктограма пізніше виявиться непідхожою, наприклад, через те, що вона використовує непідтримуваний формат, то браузер переходить до наступної найбільш підхожої, і т.д.

Примітка: Атрибут crossorigin не підтримується для rel="icon" у браузерах на основі Chromium. Дивіться відкриту проблему Chromium.

Примітка: Apple iOS не використовує для вибору піктограми вебсторінки для Web Clip чи стартового заповнювача ані цей тип зв'язку, ані атрибут sizes, як це роблять інші браузери. Замість цього використовуються нестандартні можливості apple-touch-icon і apple-touch-startup-image, відповідно.

Примітка: Нерідко перед icon спостерігається тип зв'язку shortcut, але він є невідповідним, ігнорованим, і веброзробники більше не повинні його використовувати.

license

Значення license, дійсне на елементах <a>, <area>, <form>, <link>, позначає те, що гіперпосилання веде до документа, що описує ліцензійну інформацію; що основний вміст поточного документа покритий ліцензією авторського права, описаною в пов'язаному документі. Якщо він не знаходиться всередині елемента <head>, то стандарт не розрізняє, чи гіперпосилання застосовується до певної частини документа, чи до всього документа. Тільки дані на сторінці можуть вказати це.

<link rel="license" href="#license" />

Примітка: Синонім copyright, хоч він і розпізнається, є неправильним, його слід уникати.

manifest

Декларація вебзастосунку. Вимагає використання протоколу CORS для отримання ресурсів з іншого походження.

modulepreload

Корисне для покращення продуктивності, має зміст для <link>, розташованого будь-де в документі; задання rel="modulepreload" каже браузерові наперед стягнути сценарій (і його залежності) та зберегти їх в карті модулів документа для пізнішого виконання. Посилання modulepreload можуть забезпечити, щоб мережеве стягнення було виконано, і модуль був готовим (але не виконаним) в карті модулів, до того, як він буде потрібний. Див. також modulepreload.

next

Значення next мають зміст для <form>, <link>, <a> та <area> і позначають те, що поточний документ є частиною серії, і те, що наступний документ у серії – той, на який вказує посилання. Коли це значення включено в <link>, то браузери можуть припустити, що цей документ буде стягненим наступним, і розглядати це як підказку щодо ресурсів.

nofollow

Ключове слово nofollow має зміст для <form>, <a> та <area> і каже павукам пошукових рушіїв ігнорувати взаємини за зв'язком. Взаємини nofollow можуть позначати те, що власник поточного документа не дає підтверджень пов'язаному документові. Нерідко такі взаємини додають оптимізатори пошукових рушіїв, аби удати, ніби їхні ферми посилань не є спам-сторінками.

noopener

Має зміст для <form>, <a> та <area> і створює контекст перегляду найвищого рівня, котрий не є допоміжним, якщо гіперпосилання без такого значення створило б його (тобто має відповідне значення атрибута target). Іншими словами, це значення каже браузерові поводитися так, ніби window.opener було б null, а target="_parent" було б задано.

Це значення протилежне щодо opener.

noreferrer

Має зміст для <form>, <a> та <area> і каже браузерові не передавати посиланням відомості про посилача (тобто не включати заголовок Referer), і створювати контекст перегляду найвищого рівня, як ніби також було задано noopener.

opener

Створює допоміжний контекст перегляду, якщо без цього гіперпосилання створило б контекст перегляду найвищого рівня, що не є допоміжним (наприклад, має атрибут target зі значенням "_blank"). Фактично це протилежність noopener.

pingback

Надає адресу сервера відлуння, що надає відлуння до поточного документа. Дивіться Специфікацію відлуння.

preconnect

Надає браузеру підказку про те, що слід відкрити з'єднання з пов'язаним вебсайтом наперед, не видаючи йому жодної приватної інформації та не стягуючи жодний вміст, щоб коли за посиланням відбувся перехід, то пов'язаний вміст міг бути стягнутий швидше.

prefetch

Задає те, що користувацький агент повинен наперед стягнути та відкласти цільовий ресурс, адже він, ймовірно, знадобиться при подальшій навігації. Більше про це – читайте в prefetch.

preload

Задає те, що користувацький агент повинен наперед стягнути та відкласти цільовий ресурс для поточної навігації, згідно з потенційною ціллю, заданою в атрибуті as (та пріоритетом, пов'язаним з відповідною ціллю). Дивіться сторінку значення preload.

prerender

Задає те, що користувацький агент повинен наперед стягнути цільовий ресурс і обробити його в спосіб, що допоможе надати швидшу відповідь у майбутньому, наприклад, стягнувши його підресурси або виконавши якусь візуалізацію.

prev

Подібно до ключового слова next, значення prev відноситься до <form>, <link>, <a> та <area> і вказує на те, що поточний документ є частиною серії, і що посилання вказує на попередній документ серії.

Примітка: Синонім previous є неправильним і не повинен використовуватися.

privacy-policy

Значення privacy-policy, дійсне для елементів <a>, <area>, <form>, <link>, позначає те, що гіперпосилання веде до документа, який описує практики збору та використання даних, що застосовуються до поточного документа.

search

Ключове слово search відноситься до <form>, <link>, <a> та <area> і позначає те, що гіперпосилання вказує на документ, чий інтерфейс розроблений саме для пошуку в поточному документі, на сайті, в пов'язаних ресурсах, надаючи посилання на ресурс, що може бути використаний для пошуку.

Якщо атрибут type має значення application/opensearchdescription+xml, то ресурс є плагіном OpenSearch, який можна легко додати до інтерфейсу Firefox.

stylesheet

Це значення, дійсне для елемента <link>, імпортує зовнішній ресурс для використання як списку стилів. Атрибут type не потрібен, адже це список стилів text/css, і це усталене значення. Якщо це не список стилів типу text/css – тоді найкраще оголосити тип.

Хоч цей атрибут означає зв'язок як список стилів, взаємодія з іншими атрибутами та іншими ключовими термінами в межах значення rel впливає на те, чи буде список стилів стягнений, і чи буде застосований.

Коли це значення застосовано вкупі з ключовим словом alternate, то зв'язок визначає альтернативний список стилів. У такому випадку слід додати непорожній атрибут title.

Зовнішній список стилів не буде застосований і навіть стягнений, якщо платформа не відповідає значенню атрибута media.

Вимагає використання протоколу CORS для стягнення зовнішніх ресурсів з іншого походження.

tag

Це значення, дійсне для елементів <a> та <area>, задає бирку (ідентифіковану заданою адресою), що застосовується до поточного документа. Значення бирки позначає те, що зв'язок вказує на документ, що описує бирку, застосовану до документа, в якому вона розташована. Такий тип зв'язку не призначений для бирок всередині хмари бирок, оскільки такі бирки застосовуються до групи сторінок, а значення tag атрибута rel – призначене для одного документа.

terms-of-service

Значення terms-of-service, дійсне для елементів <a>, <area> і <link>, позначає те, що гіперпосилання веде до документа, який є Умовами надання послуг, які описують домовленості між надавачем поточного документа та користувачами, які бажають скористатися цим документом.

Нестандартні значення

apple-touch-icon

Задає піктограму вебзастосунку на пристрої iOS.

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

{{Specifications}}

Сумісність із браузерами

{{Compat}}

Дивіться також

• HTMLLinkElement.relList
• HTMLAnchorElement.relList
• HTMLAreaElement.relList