Як відкрити посилання в новій вкладці: target="_blank", noopener і UX

Щоб попросити браузер відкрити посилання в новому контексті перегляду, в HTML використовують target="_blank". На практиці браузер найчастіше створює нову вкладку, хоча налаштування користувача можуть змінити цю поведінку.

Технічно додати атрибут просто. Значно важливіше вирішити, коли нова вкладка справді допомагає читачеві, що відбувається з window.opener і чому не варто змушувати всі внутрішні посилання відкриватися окремо.

Мінімальний приклад target="_blank"

Звичайне посилання без target відкривається в поточному контексті:

Наочний приклад. Наступне посилання справді відкривається в новій вкладці завдяки target="_blank". Для перевірки його можна натиснути прямо в статті.

У реальному інтерфейсі важливо застосовувати нову вкладку лише там, де це виправдано. Код такого посилання й пояснення до rel="noopener" наведено нижче.

<a href="https://example.com">Перейти на сайт</a>

Щоб відкрити ресурс у новому контексті перегляду, додайте target="_blank":

<a href="https://example.com" target="_blank">
  Відкрити сайт
</a>

Назва «в новому вікні» історична й не завжди точна: сучасні браузери зазвичай використовують вкладку, але остаточне рішення залишається за браузером і користувачем.

Чи потрібен rel="noopener"

Сучасна поведінка посилань із target="_blank" в актуальних браузерах передбачає захист, аналогічний rel="noopener": відкрита сторінка не отримує звичайного доступу до window.opener. Водночас явний запис rel="noopener" залишається зрозумілим і може бути корисним як декларація наміру або для сумісності зі старішим середовищем.

<a href="https://example.com"
   target="_blank"
   rel="noopener">
  Зовнішній ресурс
</a>

noopener не означає noreferrer. Останній додатково впливає на передавання referrer-інформації, тому додавати його автоматично до всіх зовнішніх посилань без причини не потрібно.

Коли відкриття в новій вкладці виправдане

Нова вкладка корисна, коли читачеві важливо зберегти поточну сторінку й паралельно відкрити окремий ресурс: наприклад, документацію, зовнішній сервіс або файл для порівняння. Але це не універсальне правило для всіх зовнішніх посилань.

Під час вибору поведінки варто врахувати кілька сценаріїв:

• користувач заповнює форму й перехід може призвести до втрати введених даних;
• відкривається зовнішній довідковий ресурс, до якого читач повернеться пізніше;
• посилання веде до окремого інструмента або панелі;
• користувачеві важливо порівнювати поточну сторінку з іншою;
• контент відкривається під час виконання покрокової інструкції.

Навіть у цих випадках нова вкладка має бути усвідомленим рішенням. Користувач сам може відкрити посилання в новій вкладці через контекстне меню, середню кнопку миші або клавішу-модифікатор.

Коли target="_blank" краще не використовувати

Для звичайної внутрішньої навігації сайтом примусове відкриття кожної сторінки окремо частіше заважає: швидко накопичується десяток вкладок, а кнопка «Назад» перестає відповідати очікуванням користувача.

Особливо невдало відкривати в новому контексті пункти меню, хлібні крихти, пагінацію та послідовні внутрішні статті. Якщо немає конкретної причини зберігати вихідну сторінку, стандартна поведінка посилання зазвичай зручніша.

Як попередити користувача про нову вкладку.

Якщо неочікуване відкриття може збити з пантелику, поведінку варто позначити текстом або доступним підписом. Особливо це корисно в інтерфейсах, де частина посилань відкривається звичайним способом, а частина — окремо.

<a href="https://example.com"
   target="_blank"
   rel="noopener">
  Документація (відкриється в новій вкладці)
</a>

Іконка сама по собі може бути недостатньо зрозумілою. Якщо використовується візуальний значок, його зміст має бути доступним і користувачам допоміжних технологій.

Інші значення target.

Окрім _blank, існують інші стандартні значення. У звичайній статті найчастіше потрібен лише _self за замовчуванням, але корисно знати загальну картину:

• _self — поточний контекст, поведінка за замовчуванням;
• _blank — новий контекст перегляду;
• _parent — батьківський контекст;
• _top — верхній контекст вікна.

_parent і _top мають сенс передусім у вкладених контекстах на кшталт iframe. Використовувати їх у звичайних посиланнях статті без потреби не варто.

Як зробити це в Joomla.

У редакторі Joomla або JCE атрибут target зазвичай задається через параметри посилання. Якщо редактор дозволяє вибрати «Open in new window/tab», він додає відповідну розмітку автоматично.

Після збереження матеріалу можна відкрити вихідний HTML і перевірити результат. Важливо, щоб редактор не створював нестандартний JavaScript-обробник там, де достатньо звичайного target="_blank".

Типові помилки

Сама конструкція коротка, але навколо неї накопичилося багато застарілих порад. Найчастіше варто виправити такі ситуації:

• усі зовнішні та внутрішні посилання відкриваються в новій вкладці без розбору;
• використовується JavaScript window.open() там, де достатньо HTML;
• користувача не попереджено про неочікуваний новий контекст;
• noreferrer додається автоматично без розуміння наслідків;
• старі шаблони покладаються на небезпечну взаємодію через window.opener.

Для нового коду звичайне посилання має залишатися максимально простим, а додаткові атрибути додаються лише за зрозумілої потреби.

Підсумок

target="_blank" просить браузер відкрити посилання в новому контексті, найчастіше у вкладці. Сучасні браузери застосовують захисну поведінку, аналогічну noopener, однак рішення про відкриття нової вкладки потрібно приймати передусім із погляду UX, а не за принципом «усі зовнішні посилання окремо».

Оформлення різних станів посилань розібрано в статті «Як змінити колір посилання в CSS».