Атрибут target тега <a> — відкрити в новій вкладці

Атрибут target вказує, де відкрити документ при переході за посиланням. За замовчуванням, при переході за посиланням документ відкривається в поточній вкладці браузера. Це поведінку можна змінити за допомогою атрибута target елементу <a> .

Як значення використовується ім'я фрейма, задане атрибутом name елемента <iframe> , або зарезервоване ключове слово. У назві фрейму посилання буде відкриватися у фреймі.

правити

Загальний опис

правити

Нотатка

Використання цього атрибута засуджується специфікацією HTML, валідний код виходить тільки при використанні перехідного <! DOCTYPE> .

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<a target="_blank|_self|_parent|_top|framename">

Атрибут target може отримувати 5 значень:

_blank

Відкриває пов'язаний документ в новому вікні або вкладці.

автор: с3с

правити

_self

Відкриває пов'язаний документ в той же фрейм, в якому він був викликаний (це без задання).

автор: с3с

правити

_parent

Відкриває пов'язаний документ в батьківському фреймі.

автор: с3с

правити

_top

Відкриває пов'язаний документ в повному тілі вікна

автор: с3с

правити

framename

Відкриває пов'язаний документ в зазначеному фреймі.

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<a href="#" target="_blank">Посилання з використанням <code>target="_blank"</code></a>
<br>
<a href="#" target="_self">Посилання з використанням <code>target="_self"</code></a>
<br>
<a href="#" target="_parent">Посилання з використанням <code>target="_parent"</code></a>
<br>
<a href="#" target="_top">Посилання з використанням <code>target="_top"</code></a>

<p><a href="https://css.in.ua/html/tags">Звичайне посилання — відкриється в цій самій вкладці</a></p>

<p><a href="https://css.in.ua/html/tags" target="_blank" rel="noopener">Те саме, але з <code>target="_blank"</code></a></p>

<p class="hint">Стрілку домалював CSS за селектором <code>a[target="_blank"]::after</code> —
вручну її не ставили. Так позначка не залежить від уважності автора тексту.</p>

a {
  color: #0172ad;
}
a[target="_blank"]::after {
  content: " ↗";
  font-size: .85em;
  vertical-align: super;
}
.hint {
  color: #555;
  font-size: .9em;
  border-left: 3px solid #0172ad;
  padding-left: 10px;
}