Когда мы создаем ссылки на веб-страницах, иногда требуется, чтобы страница открывалась в новой вкладке браузера. Для этого мы можем использовать атрибуты target и rel в HTML.
Атрибут target указывает, где должна открыться ссылка. Значение _blank говорит браузеру открыть ссылку в новой вкладке. Если вы хотите, чтобы ссылка открывалась в текущей вкладке, вы можете использовать значение _self.
Атрибут rel указывает на отношение между текущей страницей и целевой страницей. Значение noopener гарантирует, что целевая страница не будет иметь доступ к исходной странице, что защищает от некоторых видов атак. Значение noreferrer предотвращает передачу referrer header, который может содержать информацию о предыдущей странице, что тоже повышает безопасность.
Вот пример тега a с атрибутами target и rel:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Ссылка</a>
Теперь, когда пользователь нажмет на эту ссылку, страница https://example.com откроется в новой вкладке с защитой от возможных угроз.
Что такое атрибуты target и rel?
Атрибут target определяет, как будет открыт документ, на который ссылается эта ссылка. Значение атрибута может быть одним из следующих:
- _blank - открывает ссылку в новой вкладке или окне браузера;
- _self - открывает ссылку в текущей вкладке или окне браузера (по умолчанию);
- _parent - открывает ссылку в родительской рамке (если использованы фреймы);
- _top - открывает ссылку в верхней вкладке или окне браузера, игнорируя фреймы (если использованы фреймы).
Атрибут rel определяет отношение между текущим документом и документом, на который ссылается эта ссылка. Значение атрибута может быть одним из следующих:
- noopener - указывает, что новое окно или вкладка не должна иметь доступ к глобальному объекту window документа, откуда была открыта ссылка;
- noreferrer - указывает, что браузер не должен отправлять заголовки Referer при переходе по ссылке;
- nofollow - указывает поисковым системам не учитывать эту ссылку при ранжировании страницы;
- external - указывает, что ссылка ведет на внешний ресурс;
- nofollow external - комбинация значений nofollow и external;
- noopener external - комбинация значений noopener и external;
- noreferrer external - комбинация значений noreferrer и external.
Атрибуты target и rel часто используются вместе, чтобы создать ссылку, которая будет открываться в новой вкладке браузера, а также иметь дополнительные отношения с другими документами. Например, <a href="https://www.example.com" target="_blank" rel="external noreferrer">Это внешняя ссылка</a> создаст ссылку, которая откроется в новой вкладке, не будет иметь доступ к глобальному объекту window и не будет отправлять заголовки Referer при переходе по ссылке.
Зачем устанавливать атрибуты target и rel?
Установка атрибута target в значении "_blank" указывает браузеру открывать связанную страницу в новой вкладке или окне, что удобно для сохранения посетителей на нашем сайте. Благодаря этому атрибуту, наши пользователи не будут перенаправлены с нашего сайта, у них продолжится доступ к нашему содержимому.
Атрибут rel, при использовании со значением "noopener", является обязательным в случае, когда target имеет значение "_blank". Он предотвращает утечку информации, так как предотвращает доступ к объекту window.opener новой вкладки. Это защита от потенциальных атак или изменений нашей страницы открытой в новой вкладке.
Таким образом, использование атрибутов target и rel позволяет нам контролировать открытие ссылок, сохранять посетителей, обеспечивать безопасность и предотвращать утечку информации.
Как установить атрибут target?
Для указания, что ссылка должна быть открыта в новой вкладке, нужно использовать атрибут target. Этот атрибут указывает, где должна открываться ссылка после щелчка на нее.
Чтобы установить атрибут target, нужно добавить его к тегу . Например:
В приведенном примере первая ссылка будет открыта в новой вкладке, так как у нее указан атрибут target="_blank". Вторая ссылка будет открыта в той же вкладке (по умолчанию), так как у нее нет атрибута target.
Кроме значения "_blank" и "_self", атрибут target может принимать и другие значения:
- _parent: ссылка будет открыта в родительском фрейме или окне
- _top: ссылка будет открыта в верхнем окне (в этом случае все фреймы будут заменены)
- имя окна или фрейма: ссылка будет открыта в указанном окне или фрейме
Используя атрибут target, вы можете контролировать, как будет открыта ссылка и в каком окне или фрейме она будет отображена.
Как установить атрибут rel?
Атрибут rel используется для указания отношения между текущим документом и документом, на который ссылается элемент. Он определяет, как пользовательский агент должен интерпретировать ссылку.
Атрибут rel может принимать различные значения, которые описывают отношение ссылки с текущим документом. Некоторые общие значения атрибута rel:
- alternate - указывает, что ссылка ведет к альтернативной версии текущего документа;
- author - указывает, что ссылка ведет к документу, содержащему информацию об авторе или авторах текущего документа;
- help - указывает, что ссылка ведет к документу, содержащему справочную информацию о текущем документе;
- nofollow - указывает, что ссылка не должна быть проиндексирована поисковыми системами;
- noopener - указывает, что ссылка ведет к другому домену и должна открыться в новом окне/вкладке без доступа к глобальным объектам родительской страницы;
- noreferrer - указывает, что ссылка ведет к другому домену и информация о реферере не должна передаваться при открытии ссылки;
- prev - указывает, что ссылка ведет к предыдущей странице в линейной последовательности документов;
- next - указывает, что ссылка ведет к следующей странице в линейной последовательности документов.
Примеры использования атрибута rel:
<a href="https://example.com" rel="nofollow">Ссылка с атрибутом nofollow</a><a href="https://example.com" rel="noopener noreferrer">Ссылка с атрибутами noopener и noreferrer</a>
Как видно из примеров, атрибут rel можно использовать вместе с другими атрибутами, такими как target (для указания, где открывать ссылку) и href (для указания адреса ссылки).
Какие значения может принимать атрибут target?
Атрибут target в HTML используется для задания цели открытия ссылки. Следующие значения могут быть использованы в атрибуте target:
- _blank: Ссылка будет открыта в новой вкладке или окне браузера.
- _self: Ссылка будет открыта в текущей вкладке или окне браузера (по умолчанию).
- _parent: Ссылка будет открыта во второй верхней вкладке или окне браузера, если таковая существует.
- _top: Ссылка будет открыта в верхней вкладке или окне браузера.
- имя_окна: Ссылка будет открыта в окне или фрейме с указанным именем.
При использовании атрибута target вместе с атрибутом rel, можно дополнительно задать отношение между текущей страницей и открытой страницей в новой вкладке. Например, атрибут rel="noopener noreferrer" может использоваться для предотвращения потенциальных уязвимостей безопасности при открытии внешних ссылок.
Какие значения может принимать атрибут rel?
Атрибут rel используется для указания отношения между текущим документом и документом, на который ведет ссылка. Значение этого атрибута представляет собой список ключевых слов, разделенных пробелом.
Вот некоторые наиболее распространенные значения атрибута rel:
- alternate: указывает альтернативный вариант текущего документа;
- author: указывает ссылку на автора текущего документа;
- canonical: указывает канонический URL для текущего документа;
- external: указывает, что ссылка ведет на внешний ресурс;
- next: указывает ссылку на следующую страницу в наборе результатов;
- nofollow: указывает, что поисковые системы должны игнорировать ссылку;
- noopener: указывает, что новая страница не должна иметь доступ к странице, которая открыла ее;
- prev: указывает ссылку на предыдущую страницу в наборе результатов;
- stylesheet: указывает, что ссылка является таблицей стилей;
- tag: указывает пространство имен тега.
Значение атрибута rel может содержать и другие значения в зависимости от требований конкретной задачи или применяемой технологии.
Примеры использования атрибутов target и rel
Атрибуты target и rel предоставляют возможность управлять открытием ссылок в новой вкладке.
Атрибут target определяет, где будет открываться ссылка. Значение _blank указывает на открытие ссылки в новой вкладке браузера. Например:
Атрибут rel предоставляет информацию о типе отношения между страницами. Значение noopener устанавливает доверие к открытой странице и предотвращает возможность атаки через открывающую страницу. Например:
Комбинированное использование атрибутов target и rel обеспечивает безопасное открытие ссылок в новой вкладке.