Атрибут HTML – rel

Атрибут 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> це позначає автора всього документа.

    [!NOTE] Через історичні причини застаріле значення атрибута 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> і позначає, що пов'язаний документ не є частиною поточного сайту. Це значення можна використовувати з селекторами атрибутів для стилізації зовнішніх посилань таким чином, щоб користувачу було зрозуміло, що він залишає поточний сайт.

• expect

  • : Дозволяє сторінці бути візуалізаційно заблокованою, поки не розібрано ключові частини документа, щоб візуалізація була послідовною. Зверніть увагу на те, що візуалізаційне блокування трапляється лише тоді, коли на нього також вказує атрибут blocking="render".

  • [!NOTE] Більше інформації про його застосування дивіться в Стабілізації стану сторінки для формування послідовності міждокументних переходів.

• 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 для вибору найбільш підхожої піктограми. Якщо декілька піктограм однаково підходять, то використовується остання з них. Якщо найбільш підхожа піктограма пізніше виявиться непідхожою, наприклад, через те, що вона використовує непідтримуваний формат, то браузер переходить до наступної найбільш підхожої, і т.д.

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

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

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

• license

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

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

    [!NOTE] Синонім 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.

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

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

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

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