From 904529d2766b3ad5ecac611b4ffc95a725eddd3e Mon Sep 17 00:00:00 2001 From: mafin Date: Sat, 19 Oct 2024 09:47:26 +0300 Subject: [PATCH 1/8] added info for rel=alternative --- html/rel/index.md | 83 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 html/rel/index.md diff --git a/html/rel/index.md b/html/rel/index.md new file mode 100644 index 0000000000..3bd524e752 --- /dev/null +++ b/html/rel/index.md @@ -0,0 +1,83 @@ +--- +title: "Атрибут rel: Ваш Проводник в Мир Связей" +description: "" +authors: + - mafin1799 +related: + - "" +tags: + - article +--- + + + +## Кратко +Атрибут ```rel``` в HTML указывает, как связаны текущая страница и добавленный ресурс. Например, если это ссылка, ```rel``` сообщает браузеру, что это за ссылка: обычная, ведущая на следующий раздел, или на файл стилей для оформления страницы. +## Пример +```html + +``` +## Зачем нужен атрибут rel? +1. **Определение типа ссылки:** Указывает, что представляет собой подключаемый ресурс. Например, ```rel="stylesheet"``` сообщает, что ресурс — это таблица стилей, которая будет применяться для оформления страницы. +2. **Улучшение SEO:** Для ссылок можно использовать значения ```rel="nofollow"``` или ```rel="noopener"```, чтобы сообщить поисковым системам, как обрабатывать эти ссылки и стоит ли передавать им "вес" страницы. +3. **Оптимизация загрузки страниц:** Значения ```rel="preload"``` или ```rel="prefetch"``` помогают браузеру заранее загружать ресурсы, чтобы ускорить загрузку страницы. +4. **Определение специальных ссылок:** Например, ```rel="next"``` или ```rel="prev"``` помогают браузерам и поисковикам понять, как навигация на сайте организована по разделам. + +## Как пишется + +Значения атрибута rel нечувствительны к регистру: их можно писать с большими или маленькими буквами. Например, rel="next" и rel="NEXT" работают одинаково. + +Ключевые слова (значения атрибута ```rel```) не должны указываться более одного раза в одном и том же атрибуте ```rel```. Это означает, что вы не можете использовать одно и то же ключевое слово несколько раз, например, ```rel="next next"```. + +Если нужно указать несколько значений, просто перечислите их через пробел, например: rel="nofollow noopener". + +### ```rel="alternate"``` + +Используется с тегами `````` `````` и ``````. + +#### С тегом `````` для альтернативных стилей + +Сочетание ```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 +``` \ No newline at end of file From 3484cb7ebbb2ff2402b506618688754ef8bcd2cf Mon Sep 17 00:00:00 2001 From: mafin Date: Sat, 19 Oct 2024 10:55:39 +0300 Subject: [PATCH 2/8] add some blocks --- html/rel/index.md | 125 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 124 insertions(+), 1 deletion(-) diff --git a/html/rel/index.md b/html/rel/index.md index 3bd524e752..98743ad046 100644 --- a/html/rel/index.md +++ b/html/rel/index.md @@ -80,4 +80,127 @@ tags: ```html Скачать PDF -``` \ No newline at end of file +``` + +### ```rel="author"``` +Атрибут ```rel="author"``` используется с тегами ``````, `````` и ``````. + +#### С тегом `````` для информации об авторе + +Когда используется с тегом ``````, ```rel="author"``` указывает, что ссылка предоставляет дополнительную информацию об авторе страницы в целом. + +```html + +``` + +#### С тегами `````` и `````` для информации об авторе статьи + +Атрибут ```rel="author"``` указывает, что ссылка предоставляет дополнительную информацию об авторе ближайшего родительского элемента ```
```, если такой есть, или о странице в целом. + +```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, игнорируя дубликаты. +- **Поддержка различных форматов**: Каноническая ссылка может быть указана как относительная или абсолютная, а также в HTTP-заголовке. +```html + +``` + +#### Рекомендации из стандарта +1. Убедитесь, что контент целевого (канонического) URL дублирует контент контекстного (ссылающегося) URL. +2. Не указывайте несколько канонических ссылок для одного ресурса. +3. Не назначайте канонические ссылки на URL, возвращающие ошибки, такие как 4xx. + +### ```rel="dns-prefetch"``` +Атрибут ```rel="dns-prefetch"``` используется с элементами `````` и говорит браузеру заранее разрешить DNS для указанного ресурса. + +- **Что делает dns-prefetch**: Он сигнализирует браузеру, что ресурсы на указанном домене, скорее всего, понадобятся, и заранее разрешает их адреса, тем самым уменьшая задержки при загрузке. +- **Улучшение производительности**: Путем предварительного разрешения DNS, браузер сокращает время ожидания для последующих запросов на загрузку ресурсов. + +#### Когда браузер обрабатывает dns-prefetch +1. Когда элемент `````` уже подключен к контексту просмотра. +2. Когда атрибут ```href``` изменяется у элемента ``````. + +#### Алгоритм обработки браузером +1. Извлечение URL: Браузер получает URL, закодировав и разобрав значение атрибута ```href``` элемента `````` относительно документа узла. +2. Проверка на ошибки: Если URL недействителен, процесс прекращается. +3. Ключ разделения сети: Определить ключ разделения сети на основе объектов настроек документа узла. +4. Разрешение происхождения: Браузер определяет origin сайта, используя уникальный ключ для сети и адрес (URL) ресурса +```html + +``` +Этот элемент говорит браузеру заранее разрешить DNS для example.com, что может ускорить загрузку любых ресурсов, которые могут быть запрошены с этого домена. + +### ```rel="expect"``` +Атрибут ```rel="expect"``` используется с элементами `````` и создает внутреннюю ссылку на ресурс. Эта ссылка может блокировать рендеринг страницы до тех пор, пока указанный элемент не будет подключен к документу и полностью разобран. + +- **Что делает expect**: С помощью ```expect``` браузер получает возможность контролировать процесс рендеринга, ожидая, пока связанный ресурс не будет полностью загружен и готов к использованию. Это позволяет избежать проблем с неправильным отображением страницы. + +#### Когда браузер обрабатывает expect +1. Когда элемент `````` уже подключен к контексту просмотра. +2. Когда атрибут ```href``` изменяется у элемента ``````. +3. Когда атрибут ```media``` изменяется у элемента ``````. + +#### Алгоритм обработки браузером +1. **Извлечение URL**: Получить URL, закодировав и разобрав значение атрибута ```href``` элемента `````` относительно документа. +2. **Проверка на ошибки**: Если извлечение URL завершилось неудачей или URL не соответствует URL документа, разблокировать рендеринг и завершить обработку. +3. Выбор связанного элемента: Определить элемент, на который указывает данный `````` в текущем документе. +4. Блокировка рендеринга: + - Если текущая готовность документа — "loading". + - Если ```el``` создает внутреннюю ссылку на ресурс. + - Если ```el``` подключен к контексту просмотра. + - Если атрибут ```rel``` элемента содержит ```expect```. + - Если элемент является потенциально блокирующим рендеринг. + - Если атрибут ```media``` элемента соответствует текущей среде. + - Если связанный элемент не является элементом или находится в стеке открытых элементов парсера HTML, связанного с текущим документом. +5. Разблокировка рендеринга: Если вышеуказанные условия не выполнены, разблокировать рендеринг на ```el```. + +#### Обработка изменений атрибутов браузером +Чтобы элементы с атрибутом ```expect``` корректно реагировали на изменения атрибутов ```id``` и ```name```, браузер выполняет следующие шаги: +1. Проверка пространства имен: Браузер сначала проверяет, есть ли специальное пространство имен для элемента. Если да, то ничего не происходит — это нужно для поддержки различных правил или форматов разметки. +2. Затем браузер проверяет, открыт ли данный элемент в текущем контексте. Если элемент уже находится в стеке открытых элементов, то снова ничего не происходит — это предотвращает потенциальные конфликты в обработке. +3. Если атрибуты ```id``` или ```name``` изменяются, и элемент — это ссылка (``````), браузер обновляет внутренние ресурсы, связанные с документом, чтобы учитывать эти изменения. + From 7d3bda9b8314a97317dbbc8667174eb5c344abd4 Mon Sep 17 00:00:00 2001 From: mafin Date: Sat, 19 Oct 2024 12:30:31 +0300 Subject: [PATCH 3/8] add all rel types from whatwg --- html/rel/index.md | 441 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 441 insertions(+) diff --git a/html/rel/index.md b/html/rel/index.md index 98743ad046..5f1d4e86d7 100644 --- a/html/rel/index.md +++ b/html/rel/index.md @@ -204,3 +204,444 @@ tags: 2. Затем браузер проверяет, открыт ли данный элемент в текущем контексте. Если элемент уже находится в стеке открытых элементов, то снова ничего не происходит — это предотвращает потенциальные конфликты в обработке. 3. Если атрибуты ```id``` или ```name``` изменяются, и элемент — это ссылка (``````), браузер обновляет внутренние ресурсы, связанные с документом, чтобы учитывать эти изменения. +### ```rel="external"``` +Атрибут ```rel="external" ```может использоваться с элементами ``````, `````` и ```
```. Этот атрибут не создает гиперссылку, но добавляет аннотацию к другим гиперссылкам, созданным данным элементом (имплицитная гиперссылка, если другие ключевые слова не создают ее). + +- **Что делает ```external```**: Этот атрибут указывает на то, что ссылка ведет к документу, который не является частью сайта, к которому относится текущий документ. Это полезно для обозначения внешних ресурсов и может помочь пользователям понимать, что они покинут текущий сайт при переходе по этой ссылке. + +#### Когда браузер обрабатывает ```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```. +2. **Аннотирование ссылки**: Если элемент создает гиперссылку, браузер помечает ее как ведущую к внешнему документу. +3. **Предоставление информации**: В зависимости от реализации, браузер может предоставлять визуальные подсказки пользователю о том, что ссылка ведет на внешний ресурс (например, иконка или изменение цвета). + +### ```rel="help"``` +Атрибут rel="help" может использоваться с элементами ``````, ``````, `````` и ``````. Этот атрибут создает гиперссылку на документ, который содержит дополнительную информацию помощи. + +- **Что делает help**: Этот атрибут указывает, что связанный документ предоставляет дополнительную информацию по помощи для родительского элемента, определяющего гиперссылку, и его дочерних элементов. В случае с элементами `````` он указывает на то, что документ помогает пользователям с пониманием страницы в целом. + +```html +

+ (Помощь) + +

+``` +В этом примере ссылка на страницу помощи (help/topic.html) предоставляет контекстно-зависимую информацию по теме, вводимой пользователем в поле. + +```html + + + + (Помощь с формой) + +
+``` +Здесь ссылка на страницу помощи (help/form_help.html) предоставляет информацию о том, как правильно заполнить форму. Пользователь может обратиться к ней, если у него возникнут вопросы. + +```html + +``` +В этом списке ссылки на страницы помощи, которые объясняют навигацию по сайту и содержимое. + +#### Алгоритм обработки браузером +1. **Обработка элемента**: Браузер определяет, что атрибут rel элемента содержит help. +2. **Создание гиперссылки**: Если элемент создает гиперссылку, браузер помечает её как ведущую к документу, который предоставляет помощь. +3. **Интерфейс пользователя**: Некоторые браузеры могут использовать информацию из атрибута ```rel="help```" для изменения курсора или предоставления дополнительных визуальных подсказок, когда пользователь наводит указатель мыши на ссылку. + +### ```rel="icon"``` +Атрибут ```rel="icon"``` может использоваться с элементами ``````. Этот атрибут создает ссылку на внешний ресурс, который является иконкой для веб-страницы. + +**Что делает 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"``` может использоваться с элементами ``````, ``````, `````` и ```
``` для создания гиперссылки на условия лицензии. + +**Что такое ```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 и оптимизирует процесс предзагрузки модульных скриптов. + +**Что делает modulepreload?** +Атрибут ```rel="modulepreload"``` позволяет браузерам предзагружать модули, определенные в документе, перед их фактическим использованием. Это может ускорить загрузку приложения, поскольку модули и их зависимости будут загружены заранее, минимизируя задержку при вызове. + +```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"``` может использоваться с элементами ``````, `````` и ``````. Этот атрибут не создает гиперссылку, а аннотирует другие гиперссылки, созданные данным элементом. + +#### Что делает ```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" может использоваться с элементами ``````, `````` и `````` для аннотирования гиперссылок, указывая, что новая создаваемая вкладка или окно будет иметь доступ к родительскому контексту навигации. + +**Что делает ```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 и доступность**: Поисковые системы и вспомогательные технологии могут лучше понимать взаимосвязи между документами, улучшая их обнаруживаемость и доступность. \ No newline at end of file From 016157d85918a1df1f9b81ee8ec891d403f57ab5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A7=D1=83=D0=B9=D0=BA=D0=BE=20=D0=9D=D0=B8=D0=BA=D0=B8?= =?UTF-8?q?=D1=82=D0=B0?= Date: Thu, 24 Oct 2024 12:18:51 +0300 Subject: [PATCH 4/8] Update index.md --- html/rel/index.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/html/rel/index.md b/html/rel/index.md index 5f1d4e86d7..221146563f 100644 --- a/html/rel/index.md +++ b/html/rel/index.md @@ -1,12 +1,14 @@ --- -title: "Атрибут rel: Ваш Проводник в Мир Связей" -description: "" +title: "Атрибут rel" +description: "Атрибут rel в HTML используется для указания отношений между ссылкой и текущей страницей. В статье описаны его значения, применение в SEO, безопасность и примеры использования." authors: - mafin1799 related: - - "" + - "https://doka.guide/html/link/" + - "https://doka.guide/html/seo-for-beginners/" + - "https://doka.guide/html/defer-async/" tags: - - article + - doka --- @@ -408,7 +407,6 @@ tags:

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

-
+

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

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

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

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

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

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

``` -В этом случае тег "Gem 4/4" применяется к двум статьям о поездах, что демонстрирует его связь с указанным тегом. -#### Как это работает: -Ссылки с ```rel="tag"``` помогают структурировать контент, улучшая навигацию и способствуя лучшему пониманию тематики документа как для пользователей, так и для поисковых систем. +В этом случае тег «Gem 4/4» применяется к двум статьям о поездах, что демонстрирует его связь с указанным тегом. + +#### Как это работает + +Ссылки с `rel="tag"` помогают структурировать контент, улучшая навигацию и способствуя лучшему пониманию тематики документа как для пользователей, так и для поисковых систем. Важно отметить, что ссылка должна явно указывать на то, что документ, на который она ссылается, применим к текущему контенту. -### ```rel="terms-of-service"``` -Атрибут ```rel="terms-of-service"``` используется с элементами ``````, `````` и `````` для создания гиперссылки, указывающей, что документ, на который ссылается ссылка, содержит информацию об условиях использования и соглашениях между поставщиком текущего документа и пользователями. +### `rel="terms-of-service"` -### Основные моменты: -- **Назначение**: Указывает, что связанный документ предоставляет условия и правила, регулирующие использование текущего документа, что важно для юридической защиты как поставщика контента, так и пользователей. +Атрибут `rel="terms-of-service"` используется с элементами ``, `` и `` для создания гиперссылки, указывающей, что документ, на который ссылается ссылка, содержит информацию об условиях использования и соглашениях между поставщиком текущего документа и пользователями. + +### Основные моменты -- **Применение**: Обычно используется в нижних колонтитулах или разделах "Условия использования" на веб-сайтах и приложениях. +- **Назначение**: Указывает, что связанный документ предоставляет условия и правила, регулирующие использование текущего документа, что важно для юридической защиты как поставщика контента, так и пользователей. +- **Применение**: Обычно используется в нижних колонтитулах или разделах «Условия использования» на веб-сайтах и приложениях. ```html ``` + В этом примере ссылка ведет на документ, который описывает условия использования сайта. ### Последовательные типы ссылок -Некоторые документы образуют последовательность документов. Последовательность документов определяется как такая, где каждый документ может иметь предыдущего и следующего "соседа". Документ без предыдущего соседа отмечает начало своей последовательности, тогда как документ без следующего соседа указывает на конец своей последовательности. Важно отметить, что документ может принадлежать нескольким последовательностям. -1. **Тип ссылки: ```next```** - - Назначение: Ключевое слово next указывает на то, что текущий документ является частью последовательности, и ссылка ведет к следующему документу в этой последовательности. - - Использование: Это можно применять к элементам ``````, ``````, `````` и ``````. + +Некоторые документы образуют последовательность документов. Последовательность документов определяется как такая, где каждый документ может иметь предыдущего и следующего «соседа». Документ без предыдущего соседа отмечает начало своей последовательности, тогда как документ без следующего соседа указывает на конец своей последовательности. Важно отметить, что документ может принадлежать нескольким последовательностям. + +1. **Тип ссылки: `next`** + - Назначение: Ключевое слово `next` указывает на то, что текущий документ является частью последовательности, и ссылка ведет к следующему документу в этой последовательности. + - Использование: Это можно применять к элементам ``, ``, `` и ``. + ```html ``` + 2. **Тип ссылки:** `prev` -- **Назначение**: Ключевое слово prev указывает на то, что текущий документ является частью последовательности, и ссылка ведет к предыдущему документу в этой последовательности. -- **Использование**: Аналогично next, может использоваться с элементами ``, ``, `` и ``. + - **Назначение**: Ключевое слово `prev` указывает на то, что текущий документ является частью последовательности, и ссылка ведёт к предыдущему документу в этой последовательности. + - **Использование**: Аналогично `next`, может использоваться с элементами ``, ``, `` и ``. ```html ``` + Здесь элементы `` и `` предоставляют возможность навигации обратно к предыдущему документу в последовательности. **SEO и доступность**: Поисковые системы и вспомогательные технологии могут лучше понимать взаимосвязи между документами, улучшая их обнаруживаемость и доступность. From 4332ba96a99a9844e3d0a0544cd679583564a57b Mon Sep 17 00:00:00 2001 From: Alena Batitskaia Date: Thu, 31 Oct 2024 11:18:16 +0000 Subject: [PATCH 8/8] =?UTF-8?q?=D0=A3=D0=B1=D0=B8=D1=80=D0=B0=D0=B5=D1=82?= =?UTF-8?q?=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D0=B1=D0=B5=D0=BB=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html/rel/index.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/html/rel/index.md b/html/rel/index.md index e4b88c23e8..21f7e7e24b 100644 --- a/html/rel/index.md +++ b/html/rel/index.md @@ -200,13 +200,13 @@ tags: 1. **Проверка на ошибки**: Если извлечение URL завершилось неудачей или URL не соответствует URL документа, разблокировать рендеринг и завершить обработку. 1. Выбор связанного элемента: Определить элемент, на который указывает данный `` в текущем документе. 1. Блокировка рендеринга: - - Если текущая готовность документа — "loading". - - Если `el` создает внутреннюю ссылку на ресурс. - - Если `el` подключен к контексту просмотра. - - Если атрибут `rel` элемента содержит `expect`. - - Если элемент является потенциально блокирующим рендеринг. - - Если атрибут `media` элемента соответствует текущей среде. - - Если связанный элемент не является элементом или находится в стеке открытых элементов парсера HTML, связанного с текущим документом. + - Если текущая готовность документа — "loading". + - Если `el` создает внутреннюю ссылку на ресурс. + - Если `el` подключен к контексту просмотра. + - Если атрибут `rel` элемента содержит `expect`. + - Если элемент является потенциально блокирующим рендеринг. + - Если атрибут `media` элемента соответствует текущей среде. + - Если связанный элемент не является элементом или находится в стеке открытых элементов парсера HTML, связанного с текущим документом. 1. Разблокировка рендеринга: Если вышеуказанные условия не выполнены, разблокировать рендеринг на `el`. #### Обработка изменений атрибутов браузером @@ -686,8 +686,8 @@ tags: Некоторые документы образуют последовательность документов. Последовательность документов определяется как такая, где каждый документ может иметь предыдущего и следующего «соседа». Документ без предыдущего соседа отмечает начало своей последовательности, тогда как документ без следующего соседа указывает на конец своей последовательности. Важно отметить, что документ может принадлежать нескольким последовательностям. 1. **Тип ссылки: `next`** - - Назначение: Ключевое слово `next` указывает на то, что текущий документ является частью последовательности, и ссылка ведет к следующему документу в этой последовательности. - - Использование: Это можно применять к элементам ``, ``, `` и ``. + - Назначение: Ключевое слово `next` указывает на то, что текущий документ является частью последовательности, и ссылка ведет к следующему документу в этой последовательности. + - Использование: Это можно применять к элементам ``, ``, `` и ``. ```html @@ -695,8 +695,8 @@ tags: ``` 2. **Тип ссылки:** `prev` - - **Назначение**: Ключевое слово `prev` указывает на то, что текущий документ является частью последовательности, и ссылка ведёт к предыдущему документу в этой последовательности. - - **Использование**: Аналогично `next`, может использоваться с элементами ``, ``, `` и ``. + - **Назначение**: Ключевое слово `prev` указывает на то, что текущий документ является частью последовательности, и ссылка ведёт к предыдущему документу в этой последовательности. + - **Использование**: Аналогично `next`, может использоваться с элементами ``, ``, `` и ``. ```html