Когда использовать target=_blank

На многих сайтах применяется практика открывать внешние ссылки в новом окне. Часто таким образом открываются, например, ссылки на сайт разработчиков или результаты выдачи поисковой системы. Как правило, для этого используется атрибут тега < >:

Вообще говоря, указывать пользователю, как ему открыть ссылку некрасиво. Гуру юзабилити сайтов в один голос утверждают, что пользователь сам в состоянии решить, как ему открыть ссылку. Он разберется в своих окнах без наших с вами пожеланий по этому поводу. Более того, мы нарушим и работу стандартной кнопки браузера «Назад». Такое грубое вмешательство в привычки, скорее всего вызовет неприязнь!

Кроме того создается плохое впечатление: «Пользователь уходит с сайта! Он может сюда никогда не вернуться! А-а-а! Что делать? Давайте откроем новую ссылку в другом окне! Может быть, когда он посмотрит все, что ему нужно, то закрыв это окно, он опять попадет к нам и уж тогда-то точно станет постоянным посетителем!»

Смысл, надеюсь, ясен — наполняй сайт качественным полезным и интересным контентом и тогда посетители вернуться осознанно и самостоятельно.

Однако кроме моральной есть еще и техническая сторона вопроса — атрибут target отсутствует в спецификации XHTML 1.0 Strict и, соответственно, не пройдет валидацию!

Валидное решение: JavaScript

Если, несмотря на предыдущие абзацы, вы все-таки решили (или вас заставили) открывать страницу в новом окне, давайте хотя бы сделаем это валидно.

Тут на помощь придет JavaScript. Попробуем перехватить событие onclick ссылки и принудительно открыть новое окно с помощью функции window.open(). После чего запретим переход по ссылке в родном окне, указав return false:

Ссылка откроется в новом окне

Проверяем полученное решение: .

Все замечательно. Браузеры уверенно открывают ссылку в новом окне. Валидатор радует нас зеленым сообщением об успехе. Казалось бы можно успокоиться, но не тут-то было! Давайте попробуем поставить в браузере функцию жесткой блокировки всплывающих окон и снова перейти по ссылке!

Более удачное решение

Блокировка всплывающих окон предназначена главным образом для борьбы с надоедливой рекламой. Такая функция есть во всех современных браузерах. Некоторые браузеры даже предлагают разные уровни блокировки. Например в Opera 9+ можно блокировать либо только «нежелательные» окна либо все подряд.

Уж не знаю какой процент пользователей так радикально борется с всплывающими окнами, а только при таких настройках вместо открытия окошка просто появиться маленькая подсказочка «всплывающее окно блокировано». Более того, даже это проявление реакции браузера на щелчок в настройках можно отключить. В этом случае ссылка просто потеряет функциональность: «Я кликаю, а ничего не происходит!»

Если прочитав это, кто-то сказал: «Всем не угодишь! Ну кто же им доктор, что у них все отключено!», то нам с такими не по пути. Для остальных продолжим.

Ссылка откроется в новом окне

Тут мы воспользовались тем, что функция window.open() возвращает значение true, если окно открыто успешно и false, в противном случае. То есть, в случае, когда ссылка благополучно открылась в новом окне, мы блокируем открытие ссылки в своем родном окне, т.к. return будет!true=false. И наоборот, если окно открыть не удалось, return true позволит ссылке отработать в штатном режиме.

Доброго времени суток, уважаемые читатели. Давно не выходил выпуск Ответов на вопросы, думаю, многие уже заждались ответов на свои вопросы. Кто-то из вас уже нашел ответ на свой вопрос без моей помощи, прошу прощения, что не я дала вам ответ. Буду исправляться. К сожалению, сегодня я также не отвечу на все вопросы, а только на один.

Мне показался этот вопрос достаточно интересным и полезным, поэтому я решила уделить ему особое внимание. Итак, вопрос.

Можно ли пользоваться тегом target="_blank" для того, чтобы ссылка открывалась в новом окне браузера? Не вредно ли это? Влияет ли это на что-нибудь?

Очень интересный вопрос, дело в том, что атрибут тега , открывающий ссылку в новом окне или в новой вкладке браузера, target="_blank", один из самых неоднозначных в HTML. Хоть я сама пользуюсь только им и не раз использовать своим читателям, стоит все таки разобраться в этом вопросе и постараться придти к какому-то мнению.

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

Атрибут target="_blank" является невалидным атрибутом и его использование допускается только в переходных Transitional документах:

Для сравнения, в Blogger является таким:

содержит информацию о типе документа, является обязательным элементом веб-страницы, который сообщает браузеру, как интерпретировать данную страницу. Я не буду вдаваться в историю создания HTML, XML, XHTML – все это материал не для одной статьи. Но суть я постараюсь передать.

Если речь идет о Blogger, то наш шаблон является смесью двух языков – HTML и XML, именно в таких случаях необходимо указывать - XHTML 1.0 Strict. Документы данного типа обязаны иметь четкий синтаксис, а в спецификации для документов данного типа отсутствует атрибут target="_blank". Именно поэтому для нас данный атрибут является невалидным и по сути его запрещено использовать.

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

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

Что делать в такой ситуации?
Я знаю только два разрешения данной ситуации. И оба варианта далеки от идеала.

Первый вариант – для того, чтобы документ был валидным, можно использовать специальные JavaScript или JQuery скрипты, которые будут выполнять открытие страниц в новой складке браузера.

Минус данного способа: если в настройках браузера отключен JavaScript, то страница соответственно не откроется в новом окне.

Второй вариант – использовать target="_blank" и больше не мучиться данным вопросом. Не смотря на то, что данный атрибут является невалидным, он все равно поддерживается всеми браузерами. И его использование никак не влияет на индексацию сайта поисковыми системами.

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

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

Если вы ещё не знаете, как это сделать, я вам расскажу. У каждой мышки обязательно есть колёсико, так вот если вы, наведя курсор мыши на ссылку, нажмете на колесико, то ссылка откроется в новом окне. Либо, есть мышки с тремя кнопками, и данную функцию выполняет средняя клавиша. Но как я сказала, далеко не все пользователи интернета знают о такой приятной мелочи.

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

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

Какое мое мнение на этот счет? Я сама была новичком, я знаю много людей, которые все, что знают об интернете – это Яндекс и Одноклассники, а уж о том, что такое монитор, зачем столько кнопок на клавиатуре, а зачем вообще нужно колесико мышке, просто понятия не имеют (конечно, такие пробелы быстро восполняются). Я сама считаю, что открывать новый сайт в той же вкладке, где я сейчас нахожусь – это крайне неудобно. Даже если я действительно собираюсь уйти с сайта, я не сильно напрягусь, если закрою предыдущую вкладку. Я хочу, чтобы ссылка внутри сайта открывалась в той же вкладке, а внешняя в новой. Это мое личное мнение и на истину я не претендую.

Если вы серьезно задумались над этим вопросом, и приняли решение использовать специальный скрипт, я постаралась найти для вас решение. Данный скрипт подойдет для любого сайта, CMS и для платформы Blogger, на примере Blogger и покажу.

Заходим в Дизайн – Изменить HTML, находим код и перед ним вставляем код:


Если вы хотите предупредить своих пользователей о том, что ссылка будет открыта в новой вкладке, можно к ссылке применить стиль, как это сделано у меня. Для этого в шаблон перед строкой ]]> добавляем такой стиль:

External {
padding: 0 10px 2px 0;
background: url(http://lh6.googleusercontent.com/_G92voTj-yF0/TcFG68RdfLI/AAAAAAAABfA/QJM25G6lInk/externallink.gif) no-repeat right center;
}

Я выложила свои значения поля padding. В зависимости от используемого вами шрифта и настроек отображения текста, вам нужно будет подогнать эти цифры под себя. Также вы можете загрузить картинку в свой альбом или вообще использовать другую.

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

http://sites.google.com/site/seobiblioteka/extlinks.js
http://sites.google.com/site/seobiblioteka/external.js

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

На этом про использование target="_blank" и открытие ссылки в новой вкладке все. Надеюсь, я ответила на вопрос читателя и всем остальным эта информация также пригодится.

Уважаемые блоггеры, если ваш вопрос связан с Blogger, настоятельно рекомендую задавать его на форуме . В блоге ответы публикуются не так часто, и не совсем регулярно, и ответ на достаточно элементарный вопрос приходится ждать несколько недель. Задав же вопрос на форуме, вы в течении пары часов уже получите ответ от меня или от других пользователей.
Желаю хороших выходных.

От автора: У ссылки может быть атрибут target, контролирующий то, что происходит при клике по ней. Одним из возможных значений этого атрибута является _blank, который говорит браузеру при клике по этой ссылке открыть новое окно (или вкладку, если пользователь предпочтет ее).

Это считалось «неправильным» в HTML (может, только в XHTML?), но все равно применялось, потому что работало. В HTML5 все стало абсолютно законным. Но имеются ли значимые причины поступать подобным образом?

Плохой повод: потому что вам так нравится

Нравится вам это или нет, target=»_blank» изменяет поведение по умолчанию. Ссылки, открывающиеся в той же странице – вот поведение по умолчанию (как будто в ссылке имеется target=»_self»). Возможно, вы вошли во вкус и открываете все ссылки в новых окнах/вкладках. Отлично, но лучше предположите, что большей части пользователей более удобно поведение по умолчанию. И, таким образом, они чувствуют себя менее уютно, когда вы навязываете им другое.

Если это внутренний инструмент исключительно для вас, то делайте что пожелаете. Если сайтом пользуются другие люди, оставьте все как есть. Также стоит отметить, что пользователи могут открыть ссылку в новом окне/вкладке, щелкнув по ссылке правой кнопкой мыши (и выбрав нужный пункт). Это значит, что для ссылок доступны оба типа поведения. Это также значит, что если вам нравится открывать новые вкладки, то вы как хотите, но не следует навязывать кому-либо такое поведение. А при использовании target=»_blank» возможно только оно.

Плохой повод: вам хочется, чтобы пользователи вообще не покидали вашу страницу Плохой повод: «внутренние» и «внешние» ссылки различаются.

Наши «внутренние» ссылки (указывающие на наш собственный сайт) ведут себя обычным образом, но «внешние» (указывающие на другие сайты) открываются в новом окне/вкладке. Это связано с двумя вышеприведенными причинами, только это еще хуже. Вы прекрасно понимаете, что идеальны обычные ссылки, но если они означают, что пользователю придется покинуть ваш сайт, вам хочется разрушить этот идеал. Я слышал от множества людей, что это «традиция». Типа подразумевается, что это нужно делать именно так. Но это неверно.

Плохой повод: ссылка на PDF

Или любой другой вид несетевого ресурса. Почему требуется сделать ее по-другому? Можно же вернуться назад с помощью кнопки возврата. Если хотите помочь пользователям скачать файл, не открывая его, то это достойная задача для удобства пользования, но добиться ее можно разными путями. Начинающие могут применить атрибут download.

Плохой повод: так хочет мой клиент

Я понимаю довод: «Не хочу за это сражаться», так как у вас не так много энергии. Но странно, что это вообще оказывается битвой. Если клиент не доверяет вам в этом деле, то в чем же он вам вообще доверяет? Можно зайти с такой стороны:

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

И надеемся, что ваш спокойный и обоснованный подход поможет вашему клиенту хорошо думать о вас.

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

Бесконечная прокрутка – коварная штука. С одной стороны, она может оказать хорошее пользовательское впечатление, потому что способна беспрерывно доставлять содержимое. И может оказать плохое впечатление, будучи неправильно выполненной. Возврат «назад» на странице с бесконечной прокруткой в большинстве случаев должен отправлять туда, где вы остановились. Решение этой сложной проблемы – ваша работа. Просто заставить ссылки открываться в новых вкладках для того, чтобы эта проблема никогда не возникала – означает избегать своей работы.

Хорошая причина: пользователем инициируется проигрывание медиаконтента

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

Мы уже раскрывали эту идею. Если проигрывается медиасреда, обрабатывайте ссылки особым образом. Если не проигрывается, ссылки должны быть в обычном состоянии. Несмотря на то, что я говорю, посмотрите на YouTube’е – при смене видеороликов вас не достают этим вопросом.

Хорошая причина: пользователь работает на этой странице с чем-то, что может потеряться при ее смене

Возможно, пользователь что-то пишет. Или приводит в порядок. Делает что угодно. Щелчок по ссылке и смена страниц может оказаться волнительным, ужасным моментом. Я что, потерял все, что делал? Даже если вами предусмотрена гарантия того, что он не потеряет свою работу, следует избегать введения пользователя в подобное паническое состояние. Я подумал о CodePen, где пользователи часто пишут код. Чтобы помочь им, мы делаем следующее:

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

Если вы все же уходите на другой сайт (или ваш браузер падает), мы сохраняем состояние редакторов в localStorage и вы не теряете свою работу.

Окончание работы – совсем другое дело. Конечно, вам не хочется терять клиентов при выходе из сайта. Ссылки на что-то вроде «Информации о доставке» должны открываться без необходимости покидать сайт. «Прочтение статьи», по моему мнению, не даст вам никакого опыта. Так как (обычно) вернуться обратно очень легко (большинство браузеров даже делают прокрутку до того места, где вы перед этим находились), то на самом деле риск потерять что-то отсутствует.

Хорошая причина: некая техническая точка зрения

Я создаю электронную почту, которую нужно открывать в Outlook Kangaroo 2009 Enterprise Edition, и ссылки должны иметь target=»blank», иначе они станут открываться в окне просмотра боковой колонки и … Отлично.

Технический аспект

Вдруг вам придется…

Как заставить пользователя подтвердить свое желание покинуть страницу.

target=»_blank используется, чтобы тег открыл ссылку в новом окне. Но что такое target HTML ? Почему он должен быть blank ? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.

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

Четыре наиболее распространенных значения атрибута target :

_self

Единственная ситуация, в которой это может произойти, если в HTML использован тег , который устанавливает определенный способ открытия для всех ссылок. Например, если между тегами добавлен следующий код , нужно использовать target=»_self» , чтобы ссылка открывалась в том же окне.

_blank

Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .

Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.

_parent

Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов и не поддерживаются в HTML5 . Тем не менее, это значение по-прежнему можно использовать внутри тегов .

_top

Как и _parent , значение _top относится к фреймам. С помощью можно создать фреймы внутри фреймов с многоуровневой иерархией. _top отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.

framename

Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target . Например, открывается во фрейме с именем frame1 , то есть . iframe также поддерживают это значение атрибута. Но вряд ли вы когда-нибудь столкнетесь с такими вариантами использования. Когда framename выбирается пользователем, это имя может начинаться только с буквы, а не с цифры или другого символа.

Символ подчёркивания

Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank» , то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ и разместите на нем код следующей ссылки:

ltconsulting.co.uk

ltconsulting.co.uk/contact-us

Это связано со значением framename , которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “blank ” интерпретируется как значение типа framename . В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “blank ”.

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

Перевод статьи «TARGET=“_BLANK” AND THE TARGET VALUES OF THE TAG » был подготовлен дружной командой проекта .