Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.
Синтаксис
<link rel="<тип>">
Значения
alternate
Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
author
Указывает ссылку на автора текущего документа или статьи.
help
Указывает ссылку на контекстно-зависимую справку.
icon
Адрес картинки, которая символизирует текущий документ или сайт.
license
Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
next
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
prev
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
search
Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
stylesheet
Определяет, что подключаемый файл хранит таблицу стилей (CSS).
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Элементы HTML
Атрибуты
Значения
Типы элементов
Аудио и видео
Документ
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Формы
Фреймы
что он собой представляет и для чего нужен. Детальный обзор с примерами
Атрибут «rel=» активно используется разработчиками сайтов для взаимодействия с поисковыми системами. Он включает в себя несколько значений, например nofollow или canonical. Каждый из них предназначен для решения определенных задач.
В сегодняшней статье я подробно разберу атрибут «rel=» и покажу на примерах, в каких случаях его лучше всего использовать.
Атрибут «rel=»: определение и предназначение
Rel (от англ. «relationship» – отношение) – это атрибут HTML, описывающий ссылку. Он обозначает, что это за ссылка и на какой адрес она ведет. Работает это следующим образом: когда ссылка направляет пользователя на адрес, атрибут рассказывает поисковым системам, почему ссылка ведет на этот адрес. Например, ссылаться можно на файл стилей, который взаимодействует со страницей.
Еще ссылка может вести на PDF или иноязычную версию документа. Ссылка, как взаимосвязь между текущим и иным документом, часто используется в электронных книгах для переадресации на следующую или предыдущую страницу.
Современные браузеры чаще всего не обращают внимание на атрибут rel, но вот поисковые системы, напротив, уделяют этому пристальное внимание. Кроме того, социальные сети будут лучше взаимодействовать с веб-ресурсом, если его ссылки будут определены.
Атрибут rel может использовать вместе с тегом <a>:
<a rel="..." href="...">...</a>
Также допустимо его появление и в теге <link>:
<link rel="..." href="...">
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
Значения атрибута «rel=»
Если мы говорим об атрибуте rel, то чаще всего под ним подразумевается использование значения «nofollow», но есть и другие не менее важные значения.
rel=nofollow
Используется, когда нужно, чтобы страница, на которую ссылается пользователь, не увеличила свой ссылочный вес благодаря этой ссылке. Другими словами, по этой ссылке не передается индекс цитирования, используемый Яндексом, и PageRank, используемый Google.
<a rel="nofollow" href="index.html">Эту страницу не нужно посещать</a>
Использование такого значения оправдано на сайтах с формами для комментариев: пользователи могут оставлять ссылки на некачественные ресурсы, а из-за этого сайт рискует потерять доверие поисковых систем.
rel=alternate
Используется для указания того, что ссылка ведет на альтернативное изображение страницы:
<a rel="alternate" type="application/pdf" href="page.pdf">Страница в формате PDF</a>
Также есть еще одна вариация:
...rel="alternate" hreflang="en"...
Она помогает поисковой системе понять геопринадлежность страницы, чтобы предоставить пользователю нужную языковую версию в результатах поиска. С ее помощью мы показываем поисковым роботам, что на сайте один и тот же контент доступен на разных языках. Благодаря этому поисковики могут автоматически показывать корректную языковую версию на основе географических и языковых данных.
Обозначает, что эта ссылка является якорем и ведет на какую-то часть в этом же документе. Также она говорит поисковым системам, что эта ссылка постоянная.
<a rel="bookmark" href="about.html">Постоянная ссылка на страницу</a>
rel=help
Такое значение используется для обозначения справочников. Браузер сопоставляет эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.
Например, в форме на сайте это прописывается через тег <a>:
Ссылки с такими значениями пригодятся в тех случаях, когда нужно сослаться на внешние ресурсы, которые пользователь откроет с большой вероятностью. Браузер кэширует эту ссылку заранее, поэтому она открывается быстрее:
<a rel="prefetch" href="license.html">Здесь что-то интересное</a>
rel=tag
Определяет категорию сайта или ключевой запрос:
<a rel="tag" href="search. html">Эта ссылка относится к странице с каталогом</a>
rel=search
Этот тип сообщает, что ссылка ведет на интерфейс поиска:
<a rel="search" href="search.html">Поиск по сайту</a>
rel=icon
Необходим для того, чтобы связать содержимое сайта с иконкой:
Означает, что ссылка ведет на другой сайт, будет индексироваться и передавать вес. В WordPress этот атрибут часто используется в комментариях. Может функционировать совместно с nofollow, чтобы ссылка не передавала вес:
<a rel="external nofollow" href="page.html">Открыть в новой вкладке</a>
rel=first, up, prev, next, last
Такие значения необходимо прописывать для тех ссылок, которые используются для навигации по странице. Они ведут в начало, конец, на предыдущую или последующую страницу:
Атрибут rel позволяет улучшить связь между страницами и сделать их более привлекательными для поисковых роботов. В результате это может заметно сказаться на посещаемости ресурса. Не бойтесь использовать данный атрибут – он может существенно улучшить показатели вашего сайта.
HTML link rel Attribute
❮ HTML тег
Пример
Импорт внешней таблицы стилей:
Попробуйте сами »
ниже.
Определение и использование
Обязательный атрибут rel указывает связь между текущим документом и связанным документом/ресурсом.
Поддержка браузера
Атрибут
отн.
Да
Да
Да
Да
Да
Синтаксис
Значения атрибутов
Значение
Описание
альтернативный
Предоставляет ссылку на альтернативную версию документа (т. е. печатную страницу, переведенную или зеркальную). Пример:
автор
Предоставляет ссылку на автора документа
предварительная выборка DNS
Указывает, что браузер должен упреждающе выполнять разрешение DNS для источника целевого ресурса
помощь
Предоставляет ссылку на справочный документ. Пример:
значок
Импортирует значок для представления документа. Пример:
лицензия
Предоставляет ссылку на информацию об авторских правах для документа
следующий
Предоставляет ссылку на следующий документ в серии
пингбэк
Предоставляет адрес сервера pingback, который обрабатывает pingbacks для текущего документа
предварительное соединение
Указывает, что браузер должен заблаговременно подключаться к источнику целевого ресурса.
предварительная выборка
Указывает, что браузер должен упреждающе извлекать и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации
предварительная нагрузка
Указывает, что агент браузера должен упреждающе извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с пунктом назначения, заданным атрибутом «как» (и приоритетом, связанным с этим пунктом назначения).
пререндеринг
Указывает, что браузер должен предварительно отображать (загружать) указанный
веб-страница в фоновом режиме. Итак, если пользователь переходит на эту страницу, это ускоряет
увеличить загрузку страницы (поскольку страница уже загружена). Внимание!
Это тратит впустую пропускную способность пользователя! Используйте предварительную визуализацию только в том случае, если вы абсолютно уверены
что веб-страница требуется в какой-то момент пути пользователя
предыдущий
Указывает, что документ является частью серии и что предыдущий документ в серии является ссылочным документом
поиск
Предоставляет ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах.
таблица стилей
Импорт таблицы стилей
Другие примеры
Пример
Вот как добавить значок на веб-сайт:
Моя страница
Названиеназвание> ico»>
Это заголовок
Это абзац.
❮ Тег HTML
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебник по Python Учебник по W3.CSS Учебник по Bootstrap Учебник по PHP Учебник по Java Учебник по C++ Учебник по jQuery
8 Top Examples
Примеры HTML Примеры CSS Примеры JavaScript Примеры инструкций Примеры SQL Примеры Python Примеры W3. CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery
FORUM 90 |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены. W3Schools работает на основе W3.CSS.
Атрибут HTML: rel — HTML: язык гипертекстовой разметки
Атрибут rel определяет отношение между связанным ресурсом и текущим документом. Действителен для , ,
и , поддерживаемые значения зависят от элемента, для которого найден атрибут.
Тип отношений задается значением атрибута rel , который, если он присутствует, должен иметь значение, представляющее собой неупорядоченный набор уникальных ключевых слов, разделенных пробелами. В отличие от имени класса класса , которое не выражает семантику, атрибут rel должен выражать токены, семантически допустимые как для машин, так и для людей. Текущие реестры для возможных значений атрибута rel — это реестр отношений ссылок IANA, HTML Living Standard и свободно редактируемая страница с существующими значениями в вики-микроформатах, предложенная Living Standard. Если rel Атрибут, отсутствующий в одном из трех вышеперечисленных источников, используется некоторыми средствами проверки HTML (например, службой проверки разметки W3C) и выдает предупреждение.
В следующей таблице перечислены некоторые из наиболее важных существующих ключевых слов. Каждое ключевое слово в значении, разделенном пробелом, должно быть уникальным в пределах этого значения.
отн. значение
Описание
<ссылка>
<а> и <область>
<форма>
альтернативный
Альтернативные представления текущего документа.
Ссылка
Ссылка
Не разрешено
автор
Автор текущего документа или статьи.
Ссылка
Ссылка
Не разрешено
закладка
Постоянная ссылка на ближайший раздел-предок.
Не разрешено
Ссылка
Не разрешено
канонический
Предпочтительный URL для текущего документа.
Ссылка
Не разрешено
Не разрешено
предварительная выборка DNS
Сообщает браузеру упреждающее выполнение DNS-разрешения для источника целевого ресурса.
Внешний ресурс
Не разрешено
Не разрешено
внешний
Документ, на который делается ссылка, не является частью того же сайта, что и текущий документ.
Не разрешено
Аннотация
Аннотация
помощь
Ссылка на контекстную справку.
Ссылка
Ссылка
Ссылка
значок
Значок, представляющий текущий документ.
Внешний ресурс
Не разрешено
Не разрешено
лицензия
Указывает, что основное содержание текущего документа защищено лицензией на авторское право. описано в упомянутом документе.
Ссылка
Ссылка
Ссылка
манифест
Манифест веб-приложения.
Ссылка
Не разрешено
Не разрешено
я
Указывает, что текущий документ представляет лицо, которому принадлежит связанное содержимое.
Ссылка
Ссылка
Не разрешено
модуль предварительной загрузки
Указывает браузеру заблаговременно загрузить скрипт и сохранить его в карте модуля документа для последующей оценки. При желании можно также получить зависимости модуля.
Внешний ресурс
Не разрешено
Не разрешено
следующий
Указывает, что текущий документ является частью серии и что следующий документ в серии является ссылочным документом.
Ссылка
Ссылка
Ссылка
nofollow
Указывает, что первоначальный автор или издатель текущего документа не поддерживает указанный документ.
Не разрешено
Аннотация
Аннотация
открывалка
Создает контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра, если гиперссылка изначально создает любой из них (т. е. имеет соответствующий целевое значение атрибута ).
Не разрешено
Аннотация
Аннотация
нереферер
Нет Заголовок Referer будет включен. Кроме того, имеет тот же эффект, что и noopener .
Не разрешено
Аннотация
Аннотация
открывалка
Создает вспомогательный контекст просмотра, если в противном случае гиперссылка создала бы контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра (т. е. имеет » _blank » как значение атрибута target ).
Не разрешено
Аннотация
Аннотация
пингбэк
Указывает адрес сервера проверки связи, который обрабатывает обратную связь для текущего документа.
Внешний ресурс
Не разрешено
Не разрешено
предварительное соединение
Указывает, что пользовательский агент должен заблаговременно подключаться к источнику целевого ресурса.
Внешний ресурс
Не разрешено
Не разрешено
предварительная выборка
Указывает, что пользовательский агент должен упреждающе извлекать и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации.
Внешний ресурс
Не разрешено
Не разрешено
предварительная нагрузка
Указывает, что пользовательский агент должен упреждающе извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с потенциальным пунктом назначения, заданным параметром 9. 0018 как атрибут (и приоритет, связанный с соответствующим пунктом назначения).
Внешний ресурс
Не разрешено
Не разрешено
пререндеринг
Указывает, что пользовательский агент должен упреждающе извлекать целевой ресурс и обрабатывать его таким образом, чтобы в будущем он мог обеспечить более быстрый ответ.
Внешний ресурс
Не разрешено
Не разрешено
предыд.
Указывает, что текущий документ является частью серии и что предыдущий документ в серии является ссылочным документом.
Ссылка
Ссылка
Ссылка
поиск
Дает ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах.
Ссылка
Ссылка
Ссылка
таблица стилей
Импортирует таблицу стилей.
Внешний ресурс
Не разрешено
Не разрешено
бирка
Дает тег (идентифицируемый по заданному адресу), который применяется к текущему документу.
Не разрешено
Ссылка
Не разрешено
Атрибут rel относится к элементам , ,
и , но некоторые значения относятся только к подмножеству этих элементов. Как и все значения атрибутов ключевых слов HTML, эти значения нечувствительны к регистру.
Атрибут rel не имеет значения по умолчанию. Если атрибут опущен или если ни одно из значений в атрибуте не поддерживается, то документ не имеет особой связи с целевым ресурсом, кроме гиперссылки между ними. В этом случае на <ссылка> и <форма> , если атрибут rel отсутствует, не имеет ключевых слов или если нет одного или нескольких ключевых слов, разделенных пробелом выше, то элемент не создает никаких ссылок. и <область> по-прежнему будут создавать ссылки, но без определенного отношения.
альтернативный
Указывает альтернативное представление текущего документа. Действительно для <ссылка> , и <область> , значение зависит от значений других атрибутов.
автор
Указывает, что ссылочный документ предоставляет дополнительную информацию об авторе текущего документа или статьи. Актуально для элементов , и
.
С и <область> указывает связанный документ (или mailto: ) предоставляет информацию об авторе ближайшего
предка, если он есть, иначе всего документа.
С он представляет автора всего документа.
Примечание: По историческим причинам устаревшее значение атрибута rev="made" обрабатывается как rel="author" .
закладка
Актуально как Значение атрибута rel для элементов и
. Дает постоянную ссылку для ближайшего предка элемента
, если он есть. Если нет предка элемента
, дает постоянную ссылку для раздела, с которым наиболее тесно связан связывающий элемент.
канонический
Действителен для <ссылка> , он определяет предпочтительный URL-адрес для текущего документа, что помогает поисковым системам уменьшить дублирование контента.
предварительная выборка DNS
Относится к элементу как в , так и в , он указывает браузеру упреждающе выполнять разрешение DNS для источника целевого ресурса. Полезно для ресурсов, которые, вероятно, потребуются пользователю, это помогает уменьшить задержку и тем самым повысить производительность, когда пользователь обращается к ресурсам, поскольку браузер упреждающе выполняет разрешение DNS для источника указанного ресурса. См. описание dns-prefetch в подсказках ресурсов.
внешний
Относится к
помощь
Относится к <форма> , <ссылка> , и <область> , ключевое слово help указывает, что ссылка на содержимое предоставляет контекстно-зависимую справку, предоставляя информацию для родителя элемента, определяющего гиперссылку, и его дети. При использовании внутри справка предназначена для всего документа. При включении с и <область> и поддержке курсор по умолчанию будет help вместо указатель .
значок
Действителен с <ссылка> , связанный ресурс представляет собой значок, ресурс для представления страницы в пользовательском интерфейсе для текущего документа.
Наиболее распространенное использование значения значка — это фавикон:
.
<ссылка rel="icon" href="favicon.ico" />
Если их несколько s браузер использует атрибуты media , type и размеры для выбора наиболее подходящего значка. Если несколько значков одинаково подходят, используется последний из них. Если впоследствии наиболее подходящий значок оказывается неподходящим, например, из-за того, что он использует неподдерживаемый формат, браузер переходит к следующему наиболее подходящему и так далее.
Примечание: До Firefox 83 атрибут crossorigin не поддерживался для rel="icon" есть также открытая проблема для Chrome.
Примечание. iOS от Apple не использует этот тип ссылки, а также атрибут размеров , как это делают другие мобильные браузеры, для выбора значка веб-страницы для веб-клипа или начального заполнителя.
Вместо этого он использует нестандартные apple-touch-icon и apple-touch-startup-image соответственно.
Примечание: Тип ссылки ярлык часто встречается до значок , но этот тип ссылки не соответствует требованиям, игнорируется, и веб-авторы не должны больше его использовать .
лицензия
Действителен для элементов ,
, , , значение license указывает, что гиперссылка ведет к документу, описывающему лицензионную информацию; что основное содержание текущего документа защищено лицензией на авторское право, описанной в документе, на который делается ссылка. Если не внутри , стандарт не различает гиперссылку, относящуюся к определенной части документа или к документу в целом. Об этом могут свидетельствовать только данные на странице.
<ссылка rel="license" href="#license" />
Примечание: Хотя синоним авторское право распознается, он неверен, и его следует избегать.
манифест
Экспериментальный
Манифест веб-приложения. Требуется использование протокола CORS для выборки из разных источников.
модуль предварительной загрузки
Полезно для повышения производительности и имеет отношение к в любом месте документа, установка rel="modulepreload" указывает браузеру упреждающе загружать скрипт (и зависимости) и сохранять его в карте модуля документа для дальнейшего использования. оценка. Ссылки modulepreload могут гарантировать, что сетевая выборка будет выполнена с готовым (но не оцененным) модулем в карте модуля до того, как он обязательно понадобится. См. также предварительная загрузка модуля .
следующий
Относится к
nofollow
Относится к
ноупер
Относится к
нореферер
Относится к
открывалка
Создает вспомогательный контекст просмотра, если в противном случае гиперссылка создала бы контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра (т. е. имеет » _blank » как значение атрибута target ). Фактически противоположно noopener.
пингбэк
Указывает адрес сервера проверки связи, который обрабатывает запросы проверки связи для текущего документа. См. спецификацию Pingback.
предварительное соединение
Предоставляет подсказку браузеру, предлагая ему заранее установить соединение со связанным веб-сайтом, не раскрывая никакой личной информации и не загружая какой-либо контент, чтобы при переходе по ссылке связанный контент можно было получить быстрее.
предварительная выборка
Указывает, что пользовательский агент должен упреждающе извлекать и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации. Часто задаваемые вопросы о предварительной выборке ссылок содержат подробные сведения о том, какие ссылки могут быть предварительно загружены, а также об альтернативных методах.
предварительная нагрузка
Указывает, что пользовательский агент должен упреждающе извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с потенциальным пунктом назначения, заданным параметром 9.0018 как атрибут (и приоритет, связанный с соответствующим пунктом назначения). См. страницу для значения предварительной загрузки .
предварительная визуализация
Экспериментальный
Указывает, что пользовательский агент должен упреждающе получить целевой ресурс и обработать его таким образом, чтобы помочь обеспечить более быстрый ответ в будущем, например, путем получения его подресурсов или выполнения некоторого рендеринга.
предыд.
Подобно ключевому слову next , относящемуся к
поиск
Относится к элементам
таблица стилей
Действительно для элемента , он импортирует внешний ресурс для использования в качестве таблицы стилей. Атрибут type не нужен, так как это таблица стилей text/css , так как это значение по умолчанию. Если это не таблица стилей типа text/css лучше объявить тип.
Хотя этот атрибут определяет ссылку как таблицу стилей, взаимодействие с другими атрибутами и другими ключевыми терминами в значении rel влияет на загрузку и/или использование таблицы стилей.
При использовании с альтернативным ключевым словом оно определяет альтернативную таблицу стилей. В этом случае включите непустой заголовок .
Внешняя таблица стилей не будет использоваться или даже загружаться, если носитель не соответствует значению носитель атрибут.
Требуется использование протокола CORS для выборки из разных источников.
бирка
Действителен для элементов и
, он дает тег (идентифицируемый данным адресом), который применяется к текущему документу. Значение тега означает, что ссылка относится к документу, описывающему тег, применяемый к документу, в котором он расположен. Этот тип ссылки не предназначен для тегов в облаке тегов, поскольку эти теги применяются к группе страниц, тогда как тег Значение атрибута rel относится к одному документу.
Нестандартные значения
apple-touch-icon
Указывает значок для веб-приложения на устройстве iOS.