Открыть ссылку в новом окне HTML: атрибут target=_blank

Быстрый ответ

Для того чтобы браузер открывал ссылки в новой вкладке, используйте атрибут target="_blank" в тегах <a>:

<a href="https://example.com" target="_blank">Пример</a>

Атрибут target позволяет посетителям вашего веб-сайта оставаться на нем, переходя по ссылкам на другие ресурсы. Для повышения уровня безопасности и защиты конфиденциальности, рекомендуется добавить rel="noopener noreferrer":

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Безопасный пример</a>

Вышеупомянутые атрибуты улучшают безопасность пользователя и обеспечивают защиту конфиденциальности данных.

Последствия и компромиссы

В данном разделе мы рассмотрим ключевые аспекты, которые стоит учесть при применении стратегии target="_blank".

Вопросы безопасности

Использование атрибута target="_blank" без дополнительных настроек может представлять опасность для безопасности. Страница, открывшаяся по ссылке, может получить доступ к вашему окну, нарушив тем самым политику безопасности. Атрибут rel="noopener" позволяет решить эту проблему.

<a href="https://example.com" target="_blank" rel="noopener">example.com</a> <!-- Теперь мы находимся в безопасности, подобно хорошо защищенному Форт-Ноксу -->

Подробнее об этом расскажет наш спикер на видео

Защита конфиденциальности пользователей

С помощью атрибута rel="noreferrer" вы сможете защитить конфиденциальность источника. Если его использовать, новая страница не сможет определить, откуда пришел пользователь. Защищайте конфиденциальность вашего сайта – никто из нас не любит назойливых и любопытных соседей.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">example.com</a> /* Теперь мы становимся настоящими мастерами в игре "прятки"! */

Уважайте предпочтения пользователей

Есть пользователи, которые настраивают свои браузеры таким образом, чтобы они игнорировали ваши настройки относительно открытия ссылок. Обратите внимание, что браузеры без поддержки вкладок будут открывать ссылки в новых окнах. Уважайте предпочтения своих клиентов!

Другие варианты использования атрибута target

Рассмотрите иные варианты использования атрибута target:

• target="_self": действие по умолчанию, открывает ссылку в текущем окне (iframe).
• target="_parent": открывает ссылку в родительском окне (родительском фрейме).
• target="_top": удаляет все фреймы и открывает ссылку в полном окне.

Не используйте target="_tab"; это значение не является стандартным и может вызвать проблемы.

Визуализация

Ваш веб-сайт содержит множество ссылок. Ваш взгляд мог бы упасть на одну из них, не так ли?

Если вы нажмете на ссылку без атрибута target, то "пейзаж" изменится, но "корабль", то есть ваш браузер, останется прежним.

Однако использование `target="_blank"` можно сравнить с вызовом своего личного самолета для нового путешествия, тогда как ваш "корабль" спокойно ожидает вас в порту.

В HTML это выглядит так:

<a href="https://example.com" target="_blank">Вызвать мой самолет!</a>

```

Таким образом, итог выглядит так:

Без использования атрибута target: Мы все еще находимся на борту нашего корабля. При открытии новой вкладки: Частный самолет уже готов к взлету, и на вашем старом корабле вы уже не находитесь.

Проводим детальный анализ ссылок

Контроль со стороны пользователя: средний клик и Ctrl-клик

Пользователи имеют возможность открывать ссылки в новых вкладках при помощи средней кнопки мыши или комбинации клавиш Ctrl+клик. Это предоставляет им дополнительный контроль, однако не заменяет target="_blank".

Взаимодействие с окнами: именованные фреймы

Любители работы с фреймами могут использовать target="framename", чтобы открывать ссылку в конкретном фрейме.

Обеспечивайте доступность контента

Убедитесь, что ваши ссылки понятны для скринридеров, следуя рекомендациям проекта A11Y Project. Все пользователи интернета должны иметь равные возможности!

Полезные материалы

1. HTML a target Attribute — Здесь вы сможете узнать больше о том, как контролировать открытие ссылок с помощью атрибута target.
2. The Anchor element – HTML: HyperText Markup Language | MDN — Полномасштабная статья, посвященная элементу <a>, на портале MDN Web Docs.
3. HTML Standard — Официальное описание модели работы гиперссылок в формате HTML.
4. rel=noopener | Can I use... Support tables for HTML5, CSS3, etc — Здесь вы сможете узнать о поддержке атрибута rel="noopener" различными браузерами.
5. Links to cross-origin destinations are unsafe | Lighthouse | Chrome for Developers — Узнайте о мерах предосторожности, которые помогают защитить ваш сайт от угона вкладок.