Атрибут rel тега <area> — тип посилання ділянки карти
Атрибут rel визначає відношення між поточним документом і пов'язаного документа.
Використовується тільки за атрибутом href.
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<area rel="value">Атрибут rel може отримувати 12 значень:
-
alternate -
Надає посилання на альтернативний вигляд документа (тобто друк сторінки, переклад або дзеркала).
автор: NagarD -
author -
Надає посилання на автора документа.
автор: NagarD -
bookmark -
Постійний URL використовується для установки закладок.
автор: NagarD -
help -
Надає посилання на документ довідки.
автор: NagarD -
license -
Надає посилання на інформацію про авторські права для документа.
автор: NagarD -
next -
Надає посилання на наступний документ в серії.
автор: NagarD -
nofollow -
Вказує на те, що гіперпосилання не передає свою вагу (зміст) тій сторінці, на яку посилається. ("Nofollow" використовується Google, щоб вказати, що пошукова система Google не повинна слідувати за цим посиланням, в основному використовується для платних посилань).
автор: NagarD -
noreferrer -
Вимагає, що браузер не повинен посилати заголовок HTTP Referer, якщо користувач слідує із гіперпосилання іншої сторінки.
автор: NagarD -
noopener -
Вимагає, щоб будь-який контекст перегляду, створений після гіперпосилання не повинен мати контекст перегляду браузера.
автор: NagarD -
prev -
Попередній документ у виборі.
автор: NagarD -
search -
Посилання на інструмент пошуку для документа.
автор: NagarD -
tag -
Тег (ключове слово) для поточного документа.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 16 | 30 | 5 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 30 | 4.2 |
Приклади
+ запропонувати свій приклад у пісочниці
rel="alternate" на області карти повідомляє машинам, що ціль — альтернативна версія сторінки. Поведінку кліку атрибут не змінює.
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Crect width='300' height='120' fill='%23001b33'/%3E%3Ccircle cx='40' cy='60' r='55' fill='gold'/%3E%3C/svg%3E"
width="300" height="120" alt="Карта" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,100,120" alt="Сонце" href="#sun" rel="alternate">
</map>Угорі — справжня карта зображення: клацніть ліву або праву половину, і псевдоклас :target підсвітить відповідний абзац; rel при цьому не змінює нічого. Нижче — перелік звичайних посилань, де правило content: attr(rel) показує оголошені лексеми: на вигляд і на поведінку вони не впливають ніяк.
HTML
<p class="head">Карта зображення: обидві половини — посилання</p>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='120'%3E%3Crect%20width='160'%20height='120'%20fill='%232f6fd0'/%3E%3Crect%20x='160'%20width='160'%20height='120'%20fill='%233a9a4f'/%3E%3Ctext%20x='36'%20y='68'%20font-family='sans-serif'%20font-size='24'%20fill='%23ffffff'%3Eleft%3C/text%3E%3Ctext%20x='196'%20y='68'%20font-family='sans-serif'%20font-size='24'%20fill='%23ffffff'%3Eright%3C/text%3E%3C/svg%3E"
usemap="#karta" width="320" height="120" alt="дві половини, кожна веде на свій абзац">
<map name="karta">
<area shape="rect" coords="0,0,160,120" href="#livo" rel="nofollow" alt="ліва половина">
<area shape="rect" coords="160,0,320,120" href="#pravo" rel="noreferrer noopener" alt="права половина">
</map>
<p id="livo" class="answer">Ви клацнули ЛІВУ половину. У цієї області rel="nofollow" —
і саме тому вона поводиться точно так само, як звичайне посилання.</p>
<p id="pravo" class="answer">Ви клацнули ПРАВУ половину. Тут rel="noreferrer noopener" —
видимої різниці теж немає жодної.</p>
<p class="head">Ті самі лексеми на звичайних посиланнях</p>
<ul class="rels">
<li><a href="#livo" rel="nofollow">не передавати ваги</a></li>
<li><a href="#livo" rel="sponsored">платне розміщення</a></li>
<li><a href="#livo" rel="ugc">додав читач</a></li>
<li><a href="#livo" rel="noreferrer">без адреси, звідки прийшли</a></li>
<li><a href="#livo" rel="nofolow">одруківка — жодної скарги</a></li>
<li><a href="#livo">без rel</a></li>
</ul>CSS
.head {
margin: 22px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
img {
display: block;
outline: 2px dashed #b9c6d8;
outline-offset: 3px;
}
.answer {
max-width: 560px;
margin: 10px 0;
padding: 8px 10px;
border-left: 4px solid #dfe5ee;
color: #98a1ad;
}
.answer:target {
border-left-color: #2f6fd0;
background: #eef3fb;
color: #16324f;
font-weight: 600;
}
.rels {
max-width: 560px;
padding-left: 20px;
line-height: 2;
}
.rels a::after {
color: #1b4f9c;
font-family: ui-monospace, monospace;
font-size: .85em;
content: " [rel=" attr(rel) "]";
}
.rels a:not([rel])::after {
color: #5a6472;
content: " [атрибута немає]";
}Коментарі
Коментарів ще немає — будьте першим!