diff --git a/html/rel/index.md b/html/rel/index.md new file mode 100644 index 0000000000..487164fd77 --- /dev/null +++ b/html/rel/index.md @@ -0,0 +1,705 @@ +--- +title: "Атрибут `rel`" +description: "Какое отношение эта ссылка имеет к текущей странице?" +authors: + - mafin1799 +related: + - html/link + - html/seo-for-beginners + - html/defer-async +tags: + - doka +--- + +## Кратко + +Атрибут `rel` в HTML указывает, как связаны текущая страница и подключаемый ресурс. Например, если это ссылка, `rel` сообщает браузеру, что это за ссылка: обычная, ведущая на следующий раздел, или на файл стилей для оформления страницы. + +А вот зачем он может быть нужен: +**Определение типа ссылки:** Указывает, что представляет собой подключаемый ресурс. Например, `rel="stylesheet"` сообщает, что ресурс — это таблица стилей, которая будет применяться для оформления страницы. +**Улучшение SEO:** Для ссылок можно использовать значения `rel="nofollow"` или `rel="noopener"`, чтобы сообщить поисковым системам, как обрабатывать эти ссылки и стоит ли передавать им «вес» страницы. +**Оптимизация загрузки страниц:** Значения `rel="preload"` или `rel="prefetch"` помогают браузеру заранее загружать ресурсы, чтобы ускорить загрузку страницы. +**Определение специальных ссылок:** Например, `rel="next"` или `rel="prev"` помогают браузерам и поисковикам понять, как навигация на сайте организована по разделам. + +## Пример + +```html + +``` +## Как пишется + +Значения атрибута `rel` нечувствительны к регистру: их можно писать с большими или маленькими буквами. Например, `rel="next"` и `rel="NEXT"` работают одинаково. + +Ключевые слова (значения атрибута `rel`) не должны указываться более одного раза в одном и том же атрибуте `rel`. Это означает, что вы не можете использовать одно и то же ключевое слово несколько раз, например, `rel="next next"`. + +Если нужно указать несколько значений, просто перечислите их через пробел, например: `rel="nofollow noopener"`. + +### `rel="alternate"` + +Используется с тегами [``](/html/link/), [``](/html/a/) и [``](/html/area/). + +**С тегом `` для альтернативных стилей** + +Сочетание `rel="alternate stylesheet"` с тегом `` сообщает, что это альтернативная таблица стилей, которую пользователь может выбрать вместо основной. + +```html + + + + + + +``` + +**С `` для RSS и Atom-фидов** + +Если `alternate` используется вместе с атрибутом `type="application/rss+xml"` или `type="application/atom+xml"`, это говорит браузеру, что ссылка указывает на RSS- или Atom-канал для подписки. + +```html + +``` + +**С `` для других версий документа** + +`alternate` может указывать на альтернативные версии документа, например, переводы на другие языки или варианты для печати. Атрибуты `hreflang` и `type` могут использоваться для указания языка и формата документа. + +```html + + +``` + +**С тегом `` для альтернативных ссылок** + +Когда используется с тегом ``, `rel="alternate"` указывает на альтернативное представление текущего документа, например, в другом формате или на другом языке. + +```html +Скачать PDF +``` + +### `rel="author"` + +Атрибут `rel="author"` используется с тегами ``, `` и ``. + +**С тегом `` для информации об авторе** + +Когда используется с тегом ``, `rel="author"` указывает, что ссылка предоставляет дополнительную информацию об авторе страницы в целом. + +```html + +``` + +**С тегами `` и `` для информации об авторе статьи** + +Атрибут `rel="author"` указывает, что ссылка предоставляет дополнительную информацию об авторе ближайшего родительского элемента [`
`](/html/article/), если такой есть, или о странице в целом. + +```html + +``` + +> Ссылка на автора может часто представлять собой адрес электронной почты, начинающийся с `mailto:`. + +### `rel="bookmark"` + +Атрибут `rel="bookmark"` используется с тегами `` и ``. + +**Для создания постоянной ссылки** + +Атрибут `rel="bookmark"` указывает на постоянную ссылку (перманентный адрес) для ближайшего родительского элемента `
` или для секции, с которой наиболее тесно связан элемент, если таких родительских элементов нет. + +```html + +

Пример постоянных ссылок

+
+

Первый пример

+

+ Эта постоянная ссылка применяется только к содержимому от первого H2 до второго H2. + DIV не совсем соответствует этой секции, но приблизительно соответствует ей. +

+
+

Второй пример

+ + +``` + +### `rel="canonical"` + +Атрибут `rel="canonical"` используется с тегом ``. + +**Для указания канонического URL** + +Атрибут `rel="canonical"` указывает, что URL, указанный в атрибуте `href`, является предпочтительным URL для текущего документа. Это помогает поисковым системам уменьшить количество дублирующегося контента, как описано в стандарте RFC 6596. + +**Основные моменты работы с каноническим URL** +- **Предпочтительный ресурс**: Каноническая ссылка обозначает предпочтительную версию ресурса среди дублирующегося контента. +- **Индексация**: Поисковые системы могут индексировать только канонический URL, игнорируя дубликаты. +- **Поддержка различных форматов**: Каноническая ссылка может быть указана как относительная или абсолютная, а также в HTTP-заголовке. + +```html + +``` + +**Рекомендации из стандарта, по работе с каноническим URL** + +1. Убедитесь, что контент целевого (канонического) URL дублирует контент контекстного (ссылающегося) URL. +1. Не указывайте несколько канонических ссылок для одного ресурса. +1. Не назначайте канонические ссылки на URL, возвращающие ошибки, такие как 4xx. + +### `rel="dns-prefetch"` + +Атрибут `rel="dns-prefetch"` используется с элементами `` и говорит браузеру заранее разрешить DNS для указанного ресурса. + +Что делает dns-prefetch? Он сигнализирует браузеру, что ресурсы на указанном домене, скорее всего, понадобятся, и заранее разрешает их адреса, тем самым уменьшая задержки при загрузке. Путем предварительного разрешения DNS, браузер сокращает время ожидания для последующих запросов на загрузку ресурсов, что улучшает производительность. + +**Когда браузер обрабатывает dns-prefetch** + +1. Когда элемент `` уже подключен к контексту просмотра. +1. Когда атрибут `href` изменяется у элемента ``. + +**Алгоритм обработки браузером** + +1. Извлечение URL: Браузер получает URL, закодировав и разобрав значение атрибута `href` элемента `` относительно документа узла. +1. Проверка на ошибки: Если URL недействителен, процесс прекращается. +1. Ключ разделения сети: Определить ключ разделения сети на основе объектов настроек документа узла. +1. Разрешение происхождения: Браузер определяет origin сайта, используя уникальный ключ для сети и адрес (URL) ресурса. + +```html + +``` + +Этот элемент говорит браузеру заранее разрешить DNS для _example.com_, что может ускорить загрузку любых ресурсов, которые могут быть запрошены с этого домена. + +### `rel="expect"` + +Атрибут `rel="expect"` используется с элементами `` и создает внутреннюю ссылку на ресурс. Эта ссылка может блокировать рендеринг страницы до тех пор, пока указанный элемент не будет подключен к документу и полностью разобран. + +С его помощью браузер получает возможность контролировать процесс рендеринга, ожидая, пока связанный ресурс не будет полностью загружен и готов к использованию. Это позволяет избежать проблем с неправильным отображением страницы. + +**Когда браузер обрабатывает `expect`** + +1. Когда элемент `` уже подключен к контексту просмотра. +1. Когда атрибут `href` изменяется у элемента ``. +1. Когда атрибут `media` изменяется у элемента ``. + +**Алгоритм обработки браузером** + +1. **Извлечение URL**: Получить URL, закодировав и разобрав значение атрибута `href` элемента `` относительно документа. +1. **Проверка на ошибки**: Если извлечение URL завершилось неудачей или URL не соответствует URL документа, разблокировать рендеринг и завершить обработку. +1. Выбор связанного элемента: Определить элемент, на который указывает данный `` в текущем документе. +1. Блокировка рендеринга: + - Если текущая готовность документа — "loading". + - Если `el` создает внутреннюю ссылку на ресурс. + - Если `el` подключен к контексту просмотра. + - Если атрибут `rel` элемента содержит `expect`. + - Если элемент является потенциально блокирующим рендеринг. + - Если атрибут `media` элемента соответствует текущей среде. + - Если связанный элемент не является элементом или находится в стеке открытых элементов парсера HTML, связанного с текущим документом. +1. Разблокировка рендеринга: Если вышеуказанные условия не выполнены, разблокировать рендеринг на `el`. + +**Обработка изменений атрибутов браузером** + +Чтобы элементы с атрибутом `expect` корректно реагировали на изменения атрибутов `id` и `name`, браузер выполняет следующие шаги: + +1. Проверка пространства имен: Браузер сначала проверяет, есть ли специальное пространство имен для элемента. Если да, то ничего не происходит — это нужно для поддержки различных правил или форматов разметки. +1. Затем браузер проверяет, открыт ли данный элемент в текущем контексте. Если элемент уже находится в стеке открытых элементов, то снова ничего не происходит — это предотвращает потенциальные конфликты в обработке. +1. Если атрибуты `id` или `name` изменяются, и элемент — это ссылка (``), браузер обновляет внутренние ресурсы, связанные с документом, чтобы учитывать эти изменения. + +### `rel="external"` + +Атрибут `rel="external"` может использоваться с элементами ``, `` и [`
`](/html/form/). Этот атрибут не создает гиперссылку, но добавляет аннотацию к другим гиперссылкам, созданным данным элементом (имплицитная гиперссылка, если другие ключевые слова не создают её). + +Этот атрибут указывает на то, что ссылка ведёт к документу, который не является частью сайта, к которому относится текущий документ. Это полезно для обозначения внешних ресурсов и может помочь пользователям понимать, что они покинут текущий сайт при переходе по этой ссылке. + +**Когда браузер обрабатывает `external`** + +Когда элемент с атрибутом `rel="external"` используется, это указывает на то, что любые гиперссылки, созданные этим элементом, ведут к внешним документам. + +```html +Посетить Wikipedia +``` + +В этом примере ссылка ведет на Wikipedia и помечается как внешняя. Также используется атрибут `target="_blank"`, чтобы открыть ссылку в новой вкладке. + +```html +
+ + Willian Justen de Vasconcellos +
Изображение с Unsplash
+ +
+``` + +Здесь изображение ведет на внешний ресурс (Unsplash), и это указано с помощью `rel="external"`. + + +```html + + + + +
+``` + +В этом случае форма отправляет данные на внешний сайт (_example.com_). Хотя `rel="external"` обычно не применяется к `
`, это показывает, как можно обозначить, что форма ведет к внешнему ресурсу. + +```html + +``` + +В этом списке ссылки на социальные сети помечены как внешние, что даёт пользователям понять, что они будут перенаправлены на другие сайты. + +**Алгоритм обработки браузером** + +1. **Обработка элемента**: Браузер определяет, что атрибут `rel` элемента содержит `external`. +1. **Аннотирование ссылки**: Если элемент создает гиперссылку, браузер помечает её как ведущую к внешнему документу. +1. **Предоставление информации**: В зависимости от реализации, браузер может предоставлять визуальные подсказки пользователю о том, что ссылка ведёт на внешний ресурс (например, иконка или изменение цвета). + +### `rel="help"` + +Атрибут `rel="help"` может использоваться с элементами ``, ``, `` и ``. Этот атрибут создаёт гиперссылку на документ, который содержит дополнительную информацию помощи. + +Этот атрибут указывает, что связанный документ предоставляет дополнительную информацию по помощи для родительского элемента, определяющего гиперссылку, и его дочерних элементов. В случае с элементами `` он указывает на то, что документ помогает пользователям с пониманием страницы в целом. + +```html +

+ (Помощь) + +

+``` + +В этом примере ссылка на страницу помощи (_help/topic.html_) предоставляет контекстно-зависимую информацию по теме, вводимой пользователем в поле. + +```html + + + + (Помощь с формой) + +
+``` + +Здесь ссылка на страницу помощи (_help/form_help.html_) предоставляет информацию о том, как правильно заполнить форму. Пользователь может обратиться к ней, если у него возникнут вопросы. + +```html + +``` + +В этом списке ссылки на страницы помощи, которые объясняют навигацию по сайту и содержимое. + +**Алгоритм обработки браузером** + +1. **Обработка элемента**: Браузер определяет, что атрибут `rel` элемента содержит `help`. +1. **Создание гиперссылки**: Если элемент создает гиперссылку, браузер помечает её как ведущую к документу, который предоставляет помощь. +1. **Интерфейс пользователя**: Некоторые браузеры могут использовать информацию из атрибута `rel="help"` для изменения курсора или предоставления дополнительных визуальных подсказок, когда пользователь наводит указатель мыши на ссылку. + +### `rel="icon"` + +Атрибут `rel="icon"` может использоваться с элементами ``. Этот атрибут создает ссылку на внешний ресурс, который является иконкой для веб-страницы. Указывает, что ресурс, на который ссылается элемент, является иконкой для текущей страницы. Иконки могут быть визуальными, звуковыми или другими видами иконок. + +**Размеры и форматы** + +- **Размеры иконок**: Ключевые слова в атрибуте `sizes` указывают размеры иконок в _сырых_ пикселях, а не в CSS-пикселях. Например, иконка шириной 50 CSS-пикселей для экранов с плотностью 2 пикселя на CSS-пиксель будет иметь ширину 100 _сырых_ пикселей. +- **Ключевое слово `any`**: Указывает, что ресурс содержит масштабируемую иконку, например, в формате SVG. + +```html + + + + lsForums — Inbox + + + + + + + + + + + ... + + +``` + +Иконка для страницы указывается с помощью нескольких ссылок на различные форматы и размеры. Это позволяет браузеру выбрать наиболее подходящую иконку в зависимости от устройства и его характеристик. + +> Перед атрибутом `rel="icon"` может стоять ключевое слово `shortcut`. Если используется `shortcut`, то всё значение атрибута `rel` должно быть ASCII нечувствительным к регистру соответствием строке `shortcut icon`, с одним пробелом между токенами и без других символов пробела. + +### `rel="license"` + +Атрибут `rel="license"` может использоваться с элементами ``, ``, `` и `
` для создания гиперссылки на условия лицензии. Указывает, что связанный документ содержит условия авторского права, по которым предоставляется основной контент текущего документа. Это важно для того, чтобы пользователи знали, как можно использовать данный контент. + +> Спецификация не уточняет, как отличить основной контент документа от сопутствующего. Поэтому важно сделать это различие понятным для пользователей. + +```html + + + + Exampl Pictures: Kissat + + + +

Kissat

+ +
+ Kissat +
Kissat
+
+

Одна из них имеет шесть пальцев!

+

Лицензия MIT

+ + + +``` + +**Объяснение примера** + +- **Где используется лицензия?** Лицензия применяется только к фотографии (основному контенту), а не ко всему документу. +- **Что нужно учитывать?** Дизайн страницы и авторские права на него защищены отдельно и указаны в нижней части документа. Чтобы сделать это более очевидным, можно выделить ссылку на лицензию и разместить её рядом с фотографией. Например, её можно сделать заметной и выделить шрифтом, в то время как авторские права можно оставить в менее заметном формате. + +### `rel="manifest"` + +Атрибут `rel="manifest"` используется с элементом `` и создает ссылку на внешний ресурс, который является манифестом. + +**Что такое `manifest`?** + +Этот атрибут указывает на файл манифеста, который содержит метаданные, связанные с текущим документом. Манифесты часто используются для веб-приложений, чтобы указать, какие ресурсы должны быть кэшированы, а также для управления другими аспектами приложения. + +```html + + + + + + Пример манифеста + + + + +

Добро пожаловать!

+

Это пример страницы с подключенным манифестом.

+ + +``` + +- **Что происходит?** Атрибут `rel="manifest"` указывает на файл _manifest.json_, который содержит метаданные для данного HTML-документа. +- **Зачем это нужно?** Манифест может содержать информацию о ресурсах, которые должны быть кэшированы, что позволяет веб-приложению работать офлайн. Также он может включать информацию о значках, заголовках и других параметрах, необходимых для установки веб-приложения на устройство пользователя. + +### `rel="modulepreload"` + +Атрибут `rel="modulepreload"` используется с элементом `` и создаёт ссылку на внешний ресурс, который должен быть предзагружен. Этот атрибут специально предназначен для модуля JavaScript и оптимизирует процесс предзагрузки модульных скриптов. Он позволяет браузерам предзагружать модули, определенные в документе, перед их фактическим использованием. Это может ускорить загрузку приложения, поскольку модули и их зависимости будут загружены заранее, минимизируя задержку при вызове. + +```html + + + + + + Пример modulepreload + + + + + + + +

Добро пожаловать в IRCFog!

+ + + + +``` + +С помощью атрибута `rel="modulepreload"` браузер заранее загружает модули _app.mjs_, _helpers.mjs_, _irc.mjs_ и _fog-machine.mjs_. Это означает, что когда скрипт _app.mjs_ запустится, необходимые модули уже будут доступны, что ускоряет его выполнение. + +Поскольку _irc.mjs_ зависит от _helpers.mjs_, предварительная загрузка модулей также позволяет загружать зависимости. Это сокращает количество сетевых запросов, необходимых для получения всех модулей. + +Кроме того, `modulepreload` можно использовать вместе с динамическим импортом для гарантии, что модули будут загружены заранее. Например, в коде выше есть кнопка, которая вызывает `import('./awesome-viewer.mjs')`. Если _awesome-viewer.mjs_ был предварительно загружен с помощью `modulepreload`, он уже будет готов к использованию, что обеспечивает плавный пользовательский опыт. + +### `rel="nofollow"` + +Атрибут `rel="nofollow"` может использоваться с элементами ``, `` и ``. Этот атрибут не создаеё гиперссылку, а аннотирует другие гиперссылки, созданные данным элементом. Указывает, что ссылка не поддерживается автором или издателем страницы. Это может означать, что ссылка была добавлена на страницу из-за коммерческих отношений между владельцами двух страниц или для других целей, не связанных с поддержкой контента. + +```html +

Смотрите этот внешний сайт для дополнительной информации.

+``` + +В этом примере ссылка на внешний сайт _example.com_ помечена как `nofollow`, что указывает на то, что автор не поддерживает этот ресурс. + +```html + + + + +
+

Ссылка на сомнительный сайт

+``` + +В этом случае ссылка на сомнительный сайт также помечена как `nofollow`, чтобы указать, что автор не одобряет или не поддерживает этот ресурс. + +```html + +``` + +- **Управление SEO**: Использование `nofollow` может помочь в управлении ссылочным весом на сайте, особенно если есть ссылки на нежелательные или ненадежные ресурсы. +- **Избежание спама**: Сайты часто используют `nofollow` для ссылок в комментариях или на сторонние ресурсы, чтобы предотвратить распространение спама и сохранить доверие к своему контенту. +- **Контроль коммерческих отношений**: Это полезно для обозначения, что ссылки могут быть размещены из-за партнерских или рекламных отношений, а не по качеству контента. + +### `rel="noopener"` + +Атрибут `rel="noopener"` может использоваться с элементами ``, `` и `
`. Этот атрибут не создаёт гиперссылку, а аннотирует другие гиперссылки, созданные данным элементом. + +**Что делает `noopener`?** + +Атрибут `rel="noopener"` указывает, что при переходе по ссылке не будет создано вспомогательное контекстное окно браузера. Это предотвращает возможность того, что новая страница (открытая по ссылке) получит доступ к странице-отправителю через свойство `window.opener`, что повышает безопасность. + +**Стандартная ссылка без `noopener`** + +```html +Перейти на Example.com +``` + +В этом случае, если пользователь перейдёт по ссылке, новая вкладка или окно будет иметь доступ к объекту `window.opener`, который ссылается на исходную страницу. Это может представлять риск, если злоумышленник на новой странице попытается изменить содержимое исходной страницы. + +**Ссылка с `noopener`:** + +```html +Перейти на Example.com +``` + +Здесь добавление `rel="noopener"` гарантирует, что новая страница не сможет получить доступ к объекту `window.opener`, что делает использование этой ссылки более безопасным. + +**Зачем использовать `noopener`?** + +Защищает исходную страницу от потенциальных атак, при которых новая вкладка или окно могут пытаться изменить содержимое или перенаправить пользователя обратно на нежелательные страницы. + +### `rel="noreferrer"` + +Атрибут `rel="noreferrer"` может использоваться с элементами ``, `` и ``. Этот атрибут не создает гиперссылку, а аннотирует другие гиперссылки, созданные данным элементом. + +**Что делает `noreferrer`?** + +Атрибут `rel="noreferrer"` указывает, что при переходе по ссылке не будет передаваться информация о реферере (то есть, информация о предыдущем URL, с которого пришел пользователь). Это также подразумевает поведение атрибута `noopener`, что предотвращает возможность доступа новой страницы к объекту `window.opener`. + +**Ссылка без `noreferrer`** + +```html +Перейти на Example.com +``` + +В этом случае, если пользователь перейдет по ссылке, информация о реферере будет отправлена на сайт _example.com_. + +**Ссылка с `noreferrer`** + +```html +Перейти на Example.com +``` + +Здесь добавление `rel="noreferrer"` гарантирует, что информация о реферере не будет отправлена на _example.com_, а также предотвращает доступ к `window.opener`. + +**Ссылка с `noreferrer` и `noopener`** + +```html +Перейти на Example.com +``` + +Это эквивалентно предыдущему примеру, где `noreferrer` также включает поведение `noopener`, что делает ссылку более безопасной. + +> Атрибут `rel="noreferrer"` блокирует передачу информации о реферере, что затрудняет анализ источников трафика + +### `rel="opener"` + +Атрибут `rel="opener"` может использоваться с элементами ``, `` и `` для аннотирования гиперссылок, указывая, что новая создаваемая вкладка или окно будет иметь доступ к родительскому контексту навигации. Этот атрибут указывает, что при переходе по ссылке будет создана новая вкладка или окно, которое сможет взаимодействовать с исходной страницей (открывающим контекстом). + +```html +Помощь! +``` + +При использовании `rel="opener"` новая вкладка или окно может манипулировать контекстом родительской страницы, что может быть полезно для обеспечения навигации между связанными ресурсами или предоставления дополнительной информации. + +### `rel="pingback"` + +Атрибут `rel="pingback"` может использоваться с элементами ``, создавая ссылку на внешний ресурс. Этот атрибут полезен для автоматического уведомления авторов о том, что их контент был использован на других страницах. + +```html + +``` + +В этом примере атрибут указывает на URL, по которому должен отправляться ping, если контент текущего документа будет упомянут на других страницах. + +### `rel="preconnect"` + +Атрибут `rel="preconnect"` используется с элементами `` для предварительного инициирования соединения с указанным ресурсом. Это позволяет уменьшить задержки при загрузке ресурсов, особенно если браузер предсказывает, что они потребуются пользователю. + +**Как это работает:** + +Когда браузер видит элемент `` с `rel="preconnect"`, он инициирует соединение с указанным ресурсом до того, как пользователь фактически запросит его. + +Этот процесс включает в себя: + + - Разрешение DNS для указанного URL. + - Установление TCP-соединения. + - Для HTTPS ресурсов: выполнение TLS рукопожатия. + +```html + +``` + +Атрибут `preconnect` не блокирует загрузку страницы, и его использование может значительно ускорить доступ к ресурсам, которые будут необходимы в будущем. + +### `rel="prefetch"` + +Атрибут `rel="prefetch"` используется с элементами `` для предварительной загрузки и кэширования ресурсов, которые, скорее всего, понадобятся пользователю в будущем. + +**Как это работает** + +Когда браузер встречает элемент `` с `rel="prefetch"`, он начинает загрузку указанного ресурса заранее, основываясь на предсказании, что пользователь может его потребовать в следующем переходе. Процесс загрузки осуществляется в фоновом режиме, что не влияет на производительность текущей страницы. + +```html + +``` + +### `rel="preload"` + +Атрибут `rel="preload"` используется с элементами `` для предварительной загрузки и кэширования ресурсов, которые с большой вероятностью понадобятся пользователю во время текущей навигации. + +**Как это работает** + +Браузер начинает загружать ресурс в фоновом режиме сразу после нахождения элемента `` с `rel="preload"`. Дополнительно браузеры могут выполнять операции, такие как предварительное декодирование изображений или создание стилей, чтобы ускорить использование ресурса. + +```html + +``` + +> Ресурсы, загружаемые с `preload`, помещаются в кэш для быстрого доступа. + +### `rel="search"` + +Атрибут `rel="search"` используется с элементами ``, ``, `` и `` для указания на документ, который предоставляет интерфейс для поиска текущего документа и его связанных ресурсов. + +```html + +``` + +В этом примере ссылка на документ OpenSearch (_search.xml_) позволяет браузерам находить и использовать интерфейс поиска для данного сайта. + +**Как это работает** + +При наличии элемента с `rel="search"` пользовательские агенты могут автоматически обнаруживать и интегрировать функции поиска, облегчая пользователям поиск информации на сайте или в связанных ресурсах. + +### `rel="stylesheet"` + +Атрибут `rel="stylesheet"` используется с элементами `` для указания на внешний ресурс, который представляет собой таблицу стилей CSS. Этот атрибут важен для обработки стилей, влияя на то, как документ будет представлен. + +**Основные моменты** + +- **Назначение**: Указывает, что указанный ресурс является CSS-стилем, определяющим, как отображать документ. +- **Тип по умолчанию**: Для ресурсов с атрибутом `stylesheet` тип по умолчанию — `text/css`. +- **Альтернативные стили**: Если также указан атрибут `alternate`, ссылка рассматривается как альтернативная таблица стилей. В этом случае необходимо указать атрибут `title` с непустым значением. +- **Рендеринг**: Элементы `` с `rel="stylesheet"` могут блокировать рендеринг, поскольку браузеры обычно ждут загрузки и обработки стилей перед тем, как отобразить содержимое страницы. + +```html + +``` + +### `rel="tag"` + +Атрибут `rel="tag"` используется с элементами `` и `` для создания гиперссылки, указывающей, что документ, на который ссылается ссылка, соответствует определенному тегу, относящемуся к текущему документу. + +**Основные моменты** + +- **Назначение**: Указывает, что связанный документ соответствует тегу, который применяется к текущему документу, что помогает в его категоризации и организации контента. +- **Исключения**: Этот атрибут не следует использовать в разметке облака тегов, которое представляет собой список популярных тегов для множества страниц, так как `rel="tag"` подразумевает связь только с текущим документом. + +```html + +``` + +В этом примере документ о драгоценных камнях помечен как относящийся к тегу «Gemstone», что позволяет четко определить его категорию. + +```html +

+``` + +В этом случае тег «Gem 4/4» применяется к двум статьям о поездах, что демонстрирует его связь с указанным тегом. + +**Как это работает** + +Ссылки с `rel="tag"` помогают структурировать контент, улучшая навигацию и способствуя лучшему пониманию тематики документа как для пользователей, так и для поисковых систем. + +Важно отметить, что ссылка должна явно указывать на то, что документ, на который она ссылается, применим к текущему контенту. + +### `rel="terms-of-service"` + +Атрибут `rel="terms-of-service"` используется с элементами ``, `` и `` для создания гиперссылки, указывающей, что документ, на который ссылается ссылка, содержит информацию об условиях использования и соглашениях между поставщиком текущего документа и пользователями. + +**Основные моменты** + +- **Назначение**: Указывает, что связанный документ предоставляет условия и правила, регулирующие использование текущего документа, что важно для юридической защиты как поставщика контента, так и пользователей. +- **Применение**: Обычно используется в нижних колонтитулах или разделах «Условия использования» на веб-сайтах и приложениях. + +```html + +``` + +В этом примере ссылка ведет на документ, который описывает условия использования сайта. + +### Последовательные типы ссылок + +Некоторые документы образуют последовательность документов. Последовательность документов определяется как такая, где каждый документ может иметь предыдущего и следующего «соседа». Документ без предыдущего соседа отмечает начало своей последовательности, тогда как документ без следующего соседа указывает на конец своей последовательности. Важно отметить, что документ может принадлежать нескольким последовательностям. + +1. **Тип ссылки: `next`** + - Назначение: Ключевое слово `next` указывает на то, что текущий документ является частью последовательности, и ссылка ведет к следующему документу в этой последовательности. + - Использование: Это можно применять к элементам ``, ``, `` и ``. + +```html + + +``` + +2. **Тип ссылки:** `prev` + - **Назначение**: Ключевое слово `prev` указывает на то, что текущий документ является частью последовательности, и ссылка ведёт к предыдущему документу в этой последовательности. + - **Использование**: Аналогично `next`, может использоваться с элементами ``, ``, `` и ``. + +```html + + +``` + +Здесь элементы `` и `` предоставляют возможность навигации обратно к предыдущему документу в последовательности. + +**SEO и доступность**: Поисковые системы и вспомогательные технологии могут лучше понимать взаимосвязи между документами, улучшая их обнаруживаемость и доступность.