Атрибут target в HTML - использование и подводные камни

08 декабря 2025

Автор

Олег Марков

Введение

Атрибут target в HTML управляет тем, где именно в браузере откроется результат действия: новая страница по ссылке, отправка формы, загрузка документа во фрейм. С его помощью можно открыть ресурс в новой вкладке, в том же окне, в родительском фрейме или в специально названной области.

Смотрите, здесь важно не только знать доступные значения target, но и понимать, как они влияют на опыт пользователя и безопасность. Атрибут кажется простым, но вокруг него есть много нюансов: от поведения target="_blank" до взаимодействия с <iframe>, формами и политиками безопасности браузера.

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

Где используется атрибут target

Элементы, поддерживающие target

Давайте начнем с того, в каких HTML-элементах вы вообще можете использовать target:

<a> — ссылки (наиболее частый случай)
<form> — отправка форм
<base> — базовое значение target по умолчанию для всех ссылок и форм на странице
<area> — области на изображениях-картах
<link> — в основном для спецкейсов и старых техник, в современной верстке почти не используется с target
<button> с formtarget — не сам target, но родственный атрибут, меняющий target конкретной кнопки формы

Чаще всего вы будете иметь дело с <a> и <form>, поэтому именно на них мы сосредоточимся, а про остальные поговорим отдельными блоками.

Значения атрибута target

Специальные (зарезервированные) значения

Есть набор стандартных значений, которые браузер понимает "из коробки":

_self — открыть в том же окне/вкладке (значение по умолчанию)
_blank — открыть в новой вкладке или окне (зависит от настроек браузера)
_parent — открыть в родительском фрейме (если страница во фрейме)
_top — открыть во всей области окна, выйдя из всех фреймов

Посмотрите на простой пример с ссылками:

<!-- Открытие в той же вкладке (по умолчанию) -->
<a href="page.html" target="_self">
  Перейти на страницу в этой же вкладке
</a>

<!-- Открытие в новой вкладке -->
<a href="https://example.com" target="_blank">
  Открыть сайт в новой вкладке
</a>

<!-- Открытие в родительском фрейме -->
<a href="child.html" target="_parent">
  Загрузить страницу в родительский фрейм
</a>

<!-- Отключение всех фреймов и загрузка в окно целиком -->
<a href="main.html" target="_top">
  Открыть страницу во всем окне
</a>

Комментарии к этим значениям:

_self — то же, что отсутствие target вообще. Если вы не пишете target, поведение будет таким же.
_blank — наиболее часто используемое “особое” значение, но с ним связаны и самые популярные ошибки.
_parent и _top сейчас встречаются реже, потому что фреймы (<frame>) ушли из HTML, а <iframe> используется выборочно. Но если вы работаете с встраиваемыми виджетами, панелями админок и т.п., их поведение стоит понимать.

Именованные цели (кастомные значения)

Помимо зарезервированных значений вы можете указать собственное имя цели. Тогда браузер будет использовать вкладку или фрейм с этим именем, если он есть, или создаст новую "область":

<!-- Ссылка, открывающаяся в окне/вкладке с именем "promo" -->
<a href="promo.html" target="promo_window">
  Открыть промо-страницу
</a>

<!-- Ссылка, открывающаяся в фрейме с именем "content" -->
<iframe name="content_frame" src="home.html"></iframe>

<a href="details.html" target="content_frame">
  Загрузить детали во фрейм
</a>

Здесь важно:

Имя цели — это произвольная строка без пробелов (часто используют нижнее подчеркивание или дефисы).
Если элементу (например <iframe>) задан атрибут name="content_frame", то target со значением content_frame будет загружать страницы именно в этот фрейм.
Если соответствующего фрейма нет, браузер может открыть новую вкладку с таким "именем". Следующая ссылка с тем же target будет "переиспользовать" уже открытую вкладку.

Атрибут target в ссылках `<a>`

Базовый синтаксис

Давайте разберем классический случай: гиперссылки.

<!-- Стандартная ссылка без target -->
<a href="/about.html">
  О компании
</a>

<!-- Ссылка с открытием в новой вкладке -->
<a href="https://developer.mozilla.org" target="_blank">
  Документация MDN
</a>

Комментарии:

Атрибут href указывает, куда ведет ссылка.
Атрибут target указывает, где открыть результат перехода.

Если target не задан, поведение по умолчанию — _self, то есть переход в той же вкладке.

Сценарии использования разных значений

Посмотрите на несколько типичных сценариев.

Открытие внешних ссылок в новой вкладке

Часто внешние ресурсы (другие сайты) открывают в новой вкладке, чтобы пользователь не покидал ваш сайт. Это делается так:

<!-- Внешняя ссылка в новой вкладке -->
<a href="https://example.com" target="_blank">
  Перейти на Example
</a>

Но к этому варианту мы вернемся в блоке про UX и безопасность — там есть важные нюансы.

Открытие документа во фрейме

Если вы используете <iframe> для вывода содержимого внутри страницы, вы можете управлять этим через target:

<!-- Область, куда будут загружаться страницы -->
<iframe name="content" src="welcome.html"></iframe>

<!-- Ссылки, управляющие содержимым фрейма -->
<a href="page1.html" target="content">
  Открыть страницу 1 в фрейме
</a>

<a href="page2.html" target="content">
  Открыть страницу 2 в фрейме
</a>

Комментарии к примеру:

Атрибут name у <iframe> определяет "имя цели".
Атрибут target у <a> говорит, в какой фрейм загружать содержимое.
В результате при клике содержимое окна целиком не меняется, обновляется только содержимое фрейма.

Управление родительскими окнами

Если страница загружена в <iframe>, можно принудительно открыть ссылку в "родителе":

<!-- Эта ссылка находится внутри iframe -->
<a href="https://example.com" target="_parent">
  Открыть Example в родительском окне
</a>

Или полностью выйти из цепочки фреймов:

<!-- Открыть ссылку во всем окне браузера, игнорируя фреймы -->
<a href="/dashboard" target="_top">
  Перейти в рабочую область
</a>

Это полезно, например, когда интерфейс встраивают через iframe, но некоторые переходы должны выводить пользователя "наружу".

Атрибут target в формах `<form>`

Как работает target у форм

У форм target задает, куда будет загружен результат отправки (ответ сервера):

<form action="/submit" method="post" target="_self">
  <!-- Поля формы -->
  <input type="text" name="name" />
  <button type="submit">Отправить</button>
</form>

Здесь:

action — URL, куда отправляются данные.
method — HTTP-метод (GET/POST и др.).
target — где отобразить ответ сервера.

Распространенные варианты

Отправка формы в новой вкладке

Иногда нужно, чтобы после отправки форма оставалась на месте, а результат открывался отдельно. Например, генерация PDF или отчета:

<form action="/generate-report" method="post" target="_blank">
  <!-- Параметры отчета -->
  <input type="date" name="from" />
  <input type="date" name="to" />
  <button type="submit">Сформировать отчет</button>
</form>

Комментарии:

Пользователь не теряет текущую форму.
Ответ (например PDF-файл) открывается в новой вкладке.

Отправка формы во фрейм

Часто используется в случаях, когда нельзя (или неудобно) обновлять всю страницу целиком:

<!-- Фрейм для отображения результата -->
<iframe name="upload_result"></iframe>

<!-- Форма загрузки файла -->
<form action="/upload" method="post" enctype="multipart/form-data" target="upload_result">
  <!-- Поле выбора файла -->
  <input type="file" name="file" />
  <button type="submit">Загрузить</button>
</form>

Смотрите, что происходит:

Пользователь выбирает файл и отправляет форму.
Страница с формой не перезагружается.
Ответ сервера (например текст “Файл успешно загружен”) рендерится прямо внутри iframe.

Такой подход использовали чаще до широкого распространения JavaScript и AJAX, но иногда он по-прежнему полезен, например в сильно ограниченных окружениях.

Перекрытие target через formtarget у кнопок

Иногда нужно, чтобы одна и та же форма могла отправляться в разные места — в той же вкладке или в новой. Для этого есть атрибут formtarget у <button> или <input type="submit">.

<form action="/search" method="get" target="_self">
  <input type="text" name="q" />

  <!-- Отправка в той же вкладке -->
  <button type="submit">
    Искать здесь
  </button>

  <!-- Отправка в новой вкладке -->
  <button type="submit" formtarget="_blank">
    Искать в новой вкладке
  </button>
</form>

Комментарии:

Атрибут target="_self" у формы задает поведение по умолчанию.
Атрибут formtarget="_blank" у второй кнопки изменяет его только для этой кнопки.
Это удобно, когда вы хотите дать пользователю выбор, не дублируя форму.

Атрибут target у `<base>`

Что делает `<base>` с target

Элемент <base> может задавать значение target "по умолчанию" сразу для всех ссылок и форм на странице, если у них не задан свой target.

<head>
  <!-- Все ссылки без собственного target будут открываться в новой вкладке -->
  <base target="_blank" />
</head>
<body>
  <a href="page1.html">Страница 1</a>
  <a href="page2.html" target="_self">Страница 2</a>
</body>

Как видите:

Первая ссылка (page1.html) откроется в новой вкладке, потому что ее target наследуется от <base>.
Вторая ссылка (page2.html) откроется в той же вкладке, потому что у нее явно указан _self.

Особенности:

<base> должен быть внутри <head> и рекомендуется размещать его до других ссылок и стилей.
На странице может быть только один элемент <base>.
Его target действует на:
- <a>
- <form>
- <area>
- и другие элементы, поддерживающие target, если у них нет собственного значения.

Используйте <base target> очень аккуратно: он может сильно изменить поведение целой страницы, и это иногда затрудняет отладку.

Атрибут target и `<iframe>`

Связка name + target

Как вы уже видели, <iframe> часто используется вместе с target. Ключевые моменты:

<iframe> может иметь атрибут name, который определяет "имя цели".
Ссылки и формы могут указать target с этим именем, чтобы загружать содержимое именно в этот iframe.

<!-- Панель навигации -->
<nav>
  <a href="section1.html" target="content_frame">
    Раздел 1
  </a>
  <a href="section2.html" target="content_frame">
    Раздел 2
  </a>
</nav>

<!-- Область контента -->
<iframe name="content_frame" src="section1.html"></iframe>

Когда вы кликаете по ссылкам:

Браузер ищет фрейм с name="content_frame".
Если находит — загружает страницу внутрь фрейма.
Вкладка браузера при этом не меняет URL, меняется только содержимое iframe.

Отличие name и id

Иногда возникает путаница между id и name у <iframe>:

<iframe id="content" name="content"></iframe>

id — это идентификатор в DOM; нужен для CSS и JavaScript (например document.getElementById).
name — это логическое "имя цели" для target.

Если у iframe есть только id, но нет name, то target, ссылающийся на это значение, не будет работать:

<!-- Не сработает как target, если у iframe нет name="content" -->
<a href="page.html" target="content">
  Открыть в фрейме
</a>

Поэтому, если вы хотите использовать iframe как цель для target, обязательно указывайте name.

UX и практические рекомендации по использованию target

Когда использовать `_blank`, а когда лучше не нужно

Использование target="_blank" стало чем-то вроде "дефолта" для внешних ссылок, но давайте посмотрим на это чуть подробнее.

Когда _blank действительно уместен:

Вспомогательные документы: соглашения, регламенты, PDF.
Сторонние ресурсы, при переходе к которым пользователю удобно сохранить вашу страницу открытой (например документация, внешние калькуляторы).
Панели администрирования, где текущая страница содержит важный контекст, который пользователь скорее всего захочет сохранить.

Когда лучше обойтись без _blank:

Внутренняя навигация по вашему сайту (если нет особых причин).
Обычные переходы в контенте, где логично, что пользователь "уходит" дальше, не оставаясь на текущей странице.
Ситуации, когда пользователь сам может решить — открыть в новой вкладке (через Ctrl+клик, среднюю кнопку мыши, контекстное меню).

Главная идея: не забирать у пользователя контроль без необходимости. Если _blank помогает, используйте, но не превращайте его в автоматическую привычку.

Визуальная индикация ссылок, открывающихся в новой вкладке

Хорошая практика — показывать пользователю, что ссылка откроется в новой вкладке. Например, с помощью иконки:

<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  Внешний ресурс
  <!-- Иконка условная, стилизуется через CSS -->
  <span class="icon-external"></span>
</a>

Комментарии:

Так пользователь заранее понимает, что произойдет.
Это особенно важно для доступности и предсказуемости интерфейса.

Безопасность и атрибут target

Проблема с `target="_blank"` без rel

Когда вы используете target="_blank", новая вкладка по умолчанию получает доступ к объекту window.opener. Это значит, что сайт, открытый в новой вкладке, может с помощью JavaScript:

Изменить страницу, из которой был открыван.
Перенаправить пользователя на другой URL.
Попробовать реализацию фишинга (подменить страницу подлинного сайта).

Смотрите, пример небезопасной ссылки:

<!-- Так делать не рекомендуется -->
<a href="https://example.com" target="_blank">
  Открыть Example
</a>

Если на внешнем сайте есть злонамеренный код, он может выполнить что-то вроде:

// Опасный код на внешнем сайте
if (window.opener) {
  // Перенаправление исходной вкладки
  window.opener.location = 'https://phishing-site.com';
}

Решение — rel="noopener" и rel="noreferrer"

Чтобы устранить риск, нужно добавить атрибут rel:

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

Или использовать сразу два значения:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Безопасное открытие в новой вкладке без передачи referrer
</a>

Что делают эти значения:

noopener — отключает window.opener в новой вкладке, лишая ее возможности управлять исходной страницей.
noreferrer — кроме этого, не передает HTTP-заголовок Referer (реферер) на внешний сайт. Это иногда необходимо по требованиям конфиденциальности.

Если вы открываете внешние страницы в новой вкладке, то сочетание:

target="_blank" rel="noopener noreferrer"

стоит воспринимать как безопасный стандарт.

Взаимодействие с JavaScript

Как прочитать или изменить target через JS

Иногда нужно программно управлять значением target, например, в зависимости от настроек пользователя.

<a id="docs-link" href="/docs">
  Открыть документацию
</a>

<script>
// Здесь мы получаем ссылку по id
const link = document.getElementById('docs-link');

// Устанавливаем атрибут target через JS
link.setAttribute('target', '_blank');

// Добавляем дополнительный атрибут rel для безопасности
link.setAttribute('rel', 'noopener noreferrer');
</script>

Комментарии:

setAttribute позволяет динамически изменить поведение ссылки.
Вы можете, например, хранить настройку "открывать в новой вкладке" в локальном хранилище и применять ее при загрузке страницы.

Программное открытие окна вместо target

Часто вместо target используют window.open:

<script>
// Обработчик события клика
document.getElementById('docs-link').addEventListener('click', function (event) {
  // Здесь мы отменяем стандартное поведение ссылки
  event.preventDefault();

  // Открываем окно/вкладку вручную
  window.open(this.href, '_blank', 'noopener');
});
</script>

Однако у такого подхода есть нюансы:

Браузеры могут блокировать такие открытия как всплывающие окна (popups), если они не инициированы непосредственно действием пользователя.
Встроенный атрибут target обычно надежнее и предсказуемее с точки зрения блокировщиков всплывающих окон.

Доступность (a11y) и атрибут target

Почему target важен для доступности

Для пользователей с ассистивными технологиями (скринридеры и др.) внезапное открытие новой вкладки может быть менее очевидным, чем для тех, кто видит интерфейс.

Рекомендации:

Явно указывать в тексте, что ссылка откроется в новой вкладке, если это важно для контекста.
Не злоупотреблять открытием новых вкладок, чтобы не усложнять навигацию.

Пример с подсказкой в тексте:

<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  Инструкция по настройке (откроется в новой вкладке)
</a>

Также многие UI-фреймворки добавляют скрытые подсказки для скринридеров через aria-label или sr-only-классы. Такой подход облегчает понимание происходящего.

Антипаттерны и типичные ошибки

Везде ставить target="_blank" без разбора

Это одна из самых распространенных привычек: на все ссылки ставить _blank. Что в итоге:

Вкладки с вашим сайтом накапливаются.
Пользователь теряет контроль над навигацией.
Падает предсказуемость интерфейса.

Лучше каждый раз задавать себе вопрос: действительно ли нужно сохранять текущую страницу открытой?

Не добавлять rel к `_blank` для внешних ссылок

Мы уже разбирали это в блоке про безопасность, но повторим кратко:

<!-- Небезопасно -->
<a href="https://external.com" target="_blank">Сайт</a>

<!-- Предпочтительный вариант -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  Сайт
</a>

Добавление rel в данном случае — стандарт, а не "дополнительная опция".

Путаница между id и name у iframes

Тоже важный момент:

<!-- Только id - для CSS и JS -->
<iframe id="content"></iframe>

<!-- Только name - будет работать как цель для target -->
<iframe name="content"></iframe>

<!-- Использование обоих - удобно и безопасно для восприятия -->
<iframe id="content" name="content"></iframe>

Если вы хотите, чтобы ссылки с target="content" работали, у iframe обязательно должен быть name="content".

Заключение

Атрибут target в HTML управляет тем, где браузер отображает результат действия: в текущей вкладке, новой, во фрейме или родительском окне. Основные зарезервированные значения (_self, _blank, _parent, _top) покрывают почти все стандартные сценарии, а именованные цели позволяют связывать ссылки и формы с конкретными фреймами.

Используя target, вы влияете и на поведение интерфейса, и на безопасность, и на удобство для пользователя. Открытие в новой вкладке через _blank полезно, но требует аккуратности и добавления атрибутов rel="noopener noreferrer" для внешних ресурсов. Внутри сложных интерфейсов target помогает управлять <iframe>, не перезагружая всю страницу.

Если держать в голове простой набор правил — осознанно использовать _blank, не забывать про безопасность и корректно задавать name у фреймов, — атрибут target станет понятным и предсказуемым инструментом, а не источником неожиданных эффектов.

Частозадаваемые технические вопросы по теме

1. Как сделать так, чтобы часть ссылок по умолчанию открывалась в новой вкладке, а часть — в текущей, без дублирования атрибута target?

Можно использовать <base target="_blank"> и переопределять только нужные ссылки:

<head>
  <base target="_blank" />
</head>
<body>
  <!-- Откроется в новой вкладке по умолчанию -->
  <a href="external.html">Внешняя</a>

  <!-- Откроется в текущей вкладке, потому что target переопределен -->
  <a href="/internal" target="_self">Внутренняя</a>
</body>

Следите, чтобы такое поведение было ожидаемым для интерфейса.

2. Можно ли динамически убирать target у всех ссылок в зависимости от настроек пользователя?

Да, вы можете пройтись по ссылкам через JavaScript и изменить атрибут:

// Здесь мы получаем все ссылки на странице
document.querySelectorAll('a[target="_blank"]').forEach(link => {
  // Удаляем атрибут target
  link.removeAttribute('target');
  // При необходимости удаляем rel
  link.removeAttribute('rel');
});

Так вы можете, например, реализовать настройку "не открывать ссылки в новой вкладке".

3. Как сделать, чтобы форма по умолчанию отправлялась в текущей вкладке, но при зажатой клавише (например Ctrl) — в новой?

Один из вариантов — менять target в момент отправки:

const form = document.querySelector('form');

form.addEventListener('submit', event => {
  // Здесь проверяем, зажат ли Ctrl во время отправки
  if (event.ctrlKey) {
    form.setAttribute('target', '_blank');
  } else {
    form.setAttribute('target', '_self');
  }
});

Так вы даете пользователю "горячую" опцию не меняя разметку.

4. Почему target="_blank" иногда не открывает вкладку, а браузер показывает блокировку всплывающего окна?

Такое может произойти, если открытие происходит не напрямую по действию пользователя, а, например, из асинхронного коллбэка JavaScript. Убедитесь, что:

Ссылка или кнопка инициируют переход непосредственно.
Вы не вызываете window.open позже, чем выполняется обработчик клика.

Использование target="_blank" в HTML обычно менее подвержено блокировке, чем программный window.open вне контекста пользовательского события.

5. Как протестировать, какой именно target используется у ссылки после применения JS и `<base>`?

Можно запросить актуальное значение через DOM:

// Здесь выбираем нужную ссылку
const link = document.querySelector('a.some-class');

// Получаем реальное значение атрибута target
console.log(link.getAttribute('target'));

Если элемент не имеет собственного target, то getAttribute вернет null, даже если действует <base target>. Учитывайте это и при необходимости дополнительно проверяйте наличие <base> в документе.

Атрибут rel в HTML - полное практическое руководство