Rel атрибут: различия между версиями
Zaraz7 (обсуждение | вклад) Новая страница: «Атрибут <code>rel</code> (от англ. «relationship» – отношение) в тегах <code><a></code>, <code><link></code>, <code><form></code> и <code><area></code> определяет отношения между текущим документом (например, HTML страницей) и документом, на который ведёт ссылка, заданная атрибутом <code>href</code>. == Практиче...» |
Zaraz7 (обсуждение | вклад) м Добавление пункта ссылки |
||
| (не показаны 4 промежуточные версии этого же участника) | |||
| Строка 1: | Строка 1: | ||
Атрибут <code>rel</code> (от англ. «relationship» – отношение) в тегах <code><a></code>, <code><link></code>, <code><form></code> и <code><area></code> определяет отношения между текущим документом (например, HTML страницей) и документом, на который ведёт ссылка, заданная атрибутом <code>href</code>. | Атрибут <code>rel</code> (от англ. «relationship» – отношение) в тегах <code><a></code>, <code><link></code>, <code><form></code> и <code><area></code> определяет отношения между текущим документом (например, HTML страницей) и документом, на который ведёт ссылка, заданная атрибутом <code>href</code>. | ||
Задача данной статьи не столько указать все способы применения атрибута, а сколько познакомить с его полезными для индивебмастера возможностями. С более подробным список возможностей можно ознакомиться в [https://doka.guide/html/rel/ другой статье]. | |||
== Практическое использование == | == Практическое использование == | ||
| Строка 23: | Строка 25: | ||
<a rel="me" href="https://mastodon.ml/@foobar">Mastodon</a> | <a rel="me" href="https://mastodon.ml/@foobar">Mastodon</a> | ||
После этого ссылка в профиле будет выделена галочкой и зелёным цветом. | После этого ссылка в профиле будет выделена галочкой и зелёным цветом. | ||
=== Глобальные "хештеги" для сайтов === | |||
Это более эксперементальный способ использовать rel. | |||
Сервис Octothorpes<ref>[https://octothorp.es/ Основной сервер Octothorpes]</ref> предоставляет хэштеги и обратные ссылки, которые можно использовать на обычных веб-сайтах, соединяя страницы в открытом Интернете, независимо от того, где они размещены. Пример добавления хештегов участника конкурса Weird Web October<ref>[https://weirdweboctober.website/ Официальный сайт конкурса Weird Web October]</ref> на тему Nature (Природа) необходимо добавить следующие теги на страницу с публикацией: | |||
<link rel="preload" as="fetch" | |||
href="https://octothorp.es/?uri=https://сайт_участника"> | |||
<link rel="octo:octothorpes" href="weirdweboctober"> | |||
<link rel="octo:octothorpes" href="Nature"> | |||
Список зарегистрированных тегов можно посмотреть на сайте Octothorpes | |||
= Ссылки = | |||
Текущая версия от 10:52, 5 мая 2026
Атрибут rel (от англ. «relationship» – отношение) в тегах <a>, <link>, <form> и <area> определяет отношения между текущим документом (например, HTML страницей) и документом, на который ведёт ссылка, заданная атрибутом href.
Задача данной статьи не столько указать все способы применения атрибута, а сколько познакомить с его полезными для индивебмастера возможностями. С более подробным список возможностей можно ознакомиться в другой статье.
Практическое использование
Если вы верстали сайт, возможно вам уже сталкивались с этим атрибутом.
Самый популярный способ применения - подключение таблицы стилей (CSS) в <head> документа:
<link rel="stylesheet" href="/main.css">
Также применяется для подключения иконки сайта:
<link rel="icon" href="img/ico/ava16.png" type="image/x-icon"> <link rel="icon" href="img/ico/ava32.png" type="image/png" sizes="32x32">
Обеспечение безопасности
Когда вы открываете ссылку с target="_blank", браузер создаёт новую вкладку или окно.
Существуют функции JavaScript, которые позволяют новой вкладке получить контроль над ссылающимся окном. Если вы ссылаетесь на внешний вредоносный веб-сайт, он может использовать свойство JavaScript window.opener, чтобы изменить исходную страницу (ваш веб-сайт в предыдущем окне) для кражи информации или распространения вредоносного кода.[1]
В таком случае атака производится на посетителя сайта.
Чтобы запретить JavaScript на чужой странице получать доступ с вашей, добавьте атрибут rel="noopener" к ссылке на подозрительный сайт.
Подтверждение авторства
В некоторый социальных сетях есть возможность подтверждать связанный со страницей сайт. Для этого страница социальной сети и внешнего сайта должны ссылаться друг на друга. Пример, подтверждения сайта в Mastodon для пользователя foobar:
- В дополнительных полях профиля вводится ссылка на персональный сайт (
http://foobar.w10.site/ru/index.html). - На странице
foobar.w10.site/ru/index.htmlпрописывается ссылка на профиль социальной сети с атрибутомrel="me":
<a rel="me" href="https://mastodon.ml/@foobar">Mastodon</a>
После этого ссылка в профиле будет выделена галочкой и зелёным цветом.
Глобальные "хештеги" для сайтов
Это более эксперементальный способ использовать rel.
Сервис Octothorpes[2] предоставляет хэштеги и обратные ссылки, которые можно использовать на обычных веб-сайтах, соединяя страницы в открытом Интернете, независимо от того, где они размещены. Пример добавления хештегов участника конкурса Weird Web October[3] на тему Nature (Природа) необходимо добавить следующие теги на страницу с публикацией:
<link rel="preload" as="fetch" href="https://octothorp.es/?uri=https://сайт_участника"> <link rel="octo:octothorpes" href="weirdweboctober"> <link rel="octo:octothorpes" href="Nature">
Список зарегистрированных тегов можно посмотреть на сайте Octothorpes