Атрибут target
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . Этот атрибут может принимать следующие значения:
_blank — загружает страницу в новое окно браузера;
_self — загружает страницу в текущее окно;
_parent — загружает страницу во фрейм-родитель;
_top — отменяет все фреймы и загружает страницу в полном окне браузера.
В примере 1 показано создание ссылки на сайт, который открывается в новом окне.
Пример 1. Открытие документа в новом окне
Новое окно Ссылка открывает новое окно на сайт htmlbook.ru
Для создания валидного кода атрибут target может использоваться только при переходном , как показано во всех примерах этой статьи.
Если на сайте используются фреймы, то в качестве значения target можно использовать имя фрейма (пример 2).
Пример 2. Открытие документа во фрейме
Открытие файла во фрейме Сайт htmlbook.ru
Ссылка в примере 2 ведет на сайт htmlbook.ru, открывающийся во фрейме с именем newframe .
Когда у target указано неизвестное значение, например, имя фрейма набрано с ошибкой, то это приводит к тому, что ссылка открывается в новом окне.
Если на веб-странице необходимо сделать, чтобы все ссылки открывались в новом окне, нет необходимости добавлять во все теги target=»_blank» . Код можно сократить, если вначале страницы добавить строку , как показано в примере 3.
Пример 3. Использование тега
Открытие файла во фрейме Ссылка откроется в новом окне
Ссылка откроется в текущем окне
Сделать так, чтобы ссылка открывалась в текущем окне, в таком случае можно, если добавить к тегу атрибут target=»_self» , как показано в данном примере.
Атрибут target
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . В XHTML применение этого атрибута запрещено.
Синтаксис
Обязательный атрибут
Значения
В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
_blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .
Значение по умолчанию
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .
HTML5 IE Cr Op Sa Fx
Тег А, атрибут target Открыть в новом окне
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибут target
По умолчанию, при переходе по ссылке документ открывается в текущей вкладке браузера. Это поведение можно изменить с помощью атрибута target элемента . В качестве значения используется имя фрейма, заданное атрибутом name элемента , или зарезервированное ключевое слово. При указании имени фрейма ссылка будет открываться во фрейме.
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыта новая вкладка браузера. В качестве зарезервированных имен используются следующие.
_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчанию
Пример
Браузеры
| 3 | 12 | 1 | 1 | 1 | 1 |
| 4.4 | 4 | 14 | 3.2 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Target=»_blank» — очевидная польза и неочевидный вред
Казалось бы, раз все знают, какой смысл писать об этом? Но на практике мы столкнулись с тем, что многие оптимизаторы:
- Не уделяют внимание данному атрибуту. Об этом говорит наша статистика по проектам, в которых не указан target=»_blank» для внешних ссылок.
- Не знают об одной важной особенности данного атрибута.
О том, что нужно знать про target=»_blank», мы расскажем в этой статье.
Польза target=»_blank»
Сохраняем пользователей
По умолчанию все ссылки сайта открываются в текущей вкладке браузера. Это касается и ссылок на другие сайты. Здесь появляется риск потери пользователей, которые навсегда уходят с вашего на внешний сайт. Например, уходят с карточки товара на сайт производителя и там «залипают».
Как это происходит?
Многие пользователи до сих пор не знают, что средней кнопкой мыши можно открывать ссылки в новых вкладках. Некоторые забывают об этом. Большинство просто нажимают по ссылке и переходят на внешний сайт, забывая, откуда они пришли.
Здесь как раз на помощь приходит атрибут target. Он позволяет принудительно открывать ссылки в новых вкладках браузера. Посмотрите, как это работает (нажимать левой кнопкой мыши):
- Ссылка без target=»_blank» (не забудьте вернуться)
- Ссылка с target=»_blank»
Поэтому рекомендуем использовать данный атрибут для всех внешних ссылок на сайте:
Удерживаем внимание
Также бывает полезно открывать некоторые внутренние ссылки в новой вкладке. Например, на карточке товара ссылку на информацию о доставке лучше открыть на новой странице, чтобы пользователь не потерял страницу с карточкой товара и продолжил заказ.
Вопрос-ответ по target=»_blank»
Чем отличается target=»blank» и target=»_blank»?
target=»_blank» — открывает все ссылки в разных вкладках, target=»blank» — все в одной новой вкладке.
Если у ссылок указан атрибут target=»_blank» (с подчёркиванием), то все они будут открываться в разных вкладках. Если на странице несколько ссылок с атрибутом target=»blank» (без подчёркивания), то все они будут открываться в одной отдельной вкладке. Первый вариант в большинстве случаев удобнее для пользователей, второй — применяется на ваше усмотрение.
Есть ли альтернативы?
Валидно ли использовать?
Атрибут target был исключён из XHTML. С тех пор атрибут считается невалидным. Но в HTML 5, атрибут был снова реабилитирован , поэтому его использование не противоречит современным стандартам.
Не страдает ли юзабилити?
Скорее нет, чем да.
По этому вопросу до сих пор ведутся жаркие споры. Против обычно выступают опытные пользователи, которые хотят на 100% контролировать поведение открываемых ссылок. Но они — в меньшинстве. Большинство вебмастеров склоняются к открытию внешних ссылок в новых вкладках из соображений удержания аудитории сайта и для удобства пользователей.
Как найти все внешние ссылки без target=»_blank» на сайте?
Для этой цели мы сделали в Сайтрепорте новый отчёт Внешние без target=»_blank» . Отчёт доступен как в интерфейсе, так и в виде CSV выгрузки.
Стоит отметить, что ссылки на поддомены Сайтрепорт считает внешними. Здесь вам стоит решить самим, ставить для них target=»_blank» или нет.
Помимо этого, вы сможете найти все внешние ссылки, циклические, ссылки-картинки и множество других срезов в отчётах Сайтрепорта.
Проверить сайт на ошибки
Target=»_blank» + rel=»noopener» = Безопасность
В использовании target=»_blank» есть одна особенность. Страницы, открытые через ссылки с этим атрибутом, выполняются в одном процессе браузера вместе с родительской страницей. Это плохо по двум причинам:
- Внешняя страница влияет на производительность родительской. То есть, если открытая внешняя страница потребляет много ресурсов, то подвиснет и ваша исходная страница.
- Внешняя страница получает частичный контроль над родительской страницей. Это может угрожать безопасности пользователей.
Подробнее с данной проблемой можно ознакомиться по ссылкам:
- https://habr.com/post/282880/
- https://quasi-art.ru/library/it/use-rel-noopener
- https://mathiasbynens.github.io/rel-noopener/
Чтобы избежать таких нежелательных последствий для всех внешних ссылок с атрибутом target=»_blank», необходимо использовать атрибут rel=»noopener». Данный атрибут разрывает связь родительской и дочерней страницы, и они начинают выполняться в разных процессах браузера.
Как найти все внешние ссылки с атрибутом target=»_blank», но без rel=»noopener» на сайте?
Об этом мы уже позаботились и сделали в Сайтрепорте отчёт Внешние ссылки с target=»_blank» без rel=»noopener» . Отчёт доступен как в интерфейсе, так и в виде CSV выгрузки.
Также в отчёте по ссылкам вы можете просмотреть содержимое атрибутов rel и target всех ссылок сайта — как внутренних, так и внешних.
Как исправить найденные ошибки?
Для популярных CMS есть плагины, позволяющие управлять поведением ссылок на сторонние сайты. Например, для WordPress это WP External Links . Если ваша CMS не имеет такой встроенной функции или плагина, то можно написать собственный скрипт или расставить атрибуты вручную, если на сайте немного страниц.
Для поиска, описанных в статье, и многих других ошибок, рекомендуем воспользоваться сервисом Сайтрепорт.
Проверить сайт на ошибки
Об Авторе
Сервис диагностики внутренней и внешней оптимизации сайта. Успешно работает с 2010 года.
3 комментария
Константин 27.12.2018 Ответить
Спасибо за интересный материал. Но вы забываете про самое главное — ориентир на пользователя. Вы игнорируете предпочтения пользователя. Открывая ссылки в новой вкладке, вы чуть ли не насильно говорите ему, «останься на нашем сайте, вдруг ещё пригодится, а эту ссылку открой в новой вкладке/окне». Если мне нужно запомнить ваш сайт/страницу, то я добавлю его в избранное и зайду в другое время (когда освободиться время, когда будет потребность, когда просто захочется для интереса зайти на данный сайт). Если я не нашёл ничего интересного для себя, то и нет повода оставаться на данном сайте. Функциональность «Добавить в избранное» сейчас работает во всех браузерах и заставить пользователя сейчас не потерять сайт скорее нужна только для новичка. А опытный пользователь скорее будет раздражён, если сайт без нужды откроет сайт в новой вкладке.
Команда Сайтрепорт Автор 27.12.2018 Ответить
Константин, верно пишете. Здесь не всё однозначно. В конечном счёте решение принимает владелец сайта, ориентируясь на предпочтения аудитории и бизнес-задачи. Будем признательны, если кто-то из наших пользователей поделится информацией как повлияло внедрение target=»_blank» для внешних ссылок на глубину просмотра, время на сайте, заказы и т. п.
Константин 29.03.2023 Ответить
Я даже не буду думать о каком-то насилии со стороны сайта, потому что все ссылки сам открываю в новом окне, предусмотрено это сайтом или нет, потому что мне так удобно и я не сужу по себе об этом удобстве. А открываю в новом, чтобы не потерять где я остановился на родительской странице с кучей товаров. Например на озоне перешел в категорию отмотал на нужный товар вниз, нажал на товар, мне открылся товар в том же окне, я его просмотрел, нажал назад и вернулся уже не на тот товар, на котором остановился — список сбился. Куда теперь мотать? Где искать вверх, вниз? Товары похожи, названия тоже примерно одинаковые. Для справедливости у ВБ четко отрабатывает и там открывается все в том же окне. У Яндекс Маркета все открывается в новом окне. Да даже возьмем поисковики. У Гугла в том же, у Яндекса в новом окне открывается. И о каком удобстве вы тут спорите? Только о своем. Что вам удобно за то и топите. Раньше все топили за Target_blanc потому, что не было распространено ходить по сети на телефонах (технически не позволяли еще, только появлялись на ИОСЕ и андроиде). На мониторах удобнее работать с вкладками и проблем не было и споров. Сейчас все приложения маркетплейсов в телефонах (несмотря на описанные выше способы открытия страниц на десктопе) открывают страницы в том же окне, потому что на экране телефона не удобно работать с вкладками (они запрятаны в выдвигающемся меню где-то и т.д. в зависимости от браузера на телефоне и проще нажать на кнопку назад, которая на виду). Естественно телефоны стали менять привычки людей и это начало переносится и на десктопы и армия «однооконщиков» выросла.