Содержание

Атрибут target | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 2.1+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. В XHTML применение этого атрибута запрещено.

Синтаксис

<a target="имя окна">...</a>

Обязательный атрибут

Нет.

Значения

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

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Значение по умолчанию

_self

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут target</title>
 </head>
 <body>
  <p><a href="new. html" target="_blank">Открыть в новом окне</a></p>
 </body>
</html>

Атрибут target | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется атрибут target, в качестве его значения используется имя окна или фрейма.

Если target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис

<form target="имя окна">...</form>

Значения

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

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Обязательный атрибут

Нет.

Значение по умолчанию

_self

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут target</title>
 </head>
 <body>
 <form action="handler.php" target="_blank">
   ... 
 </form>
 </body>
</html>

Target = «_blank» и другие значения атрибута target

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

По умолчанию ссылки открываются в том же окне, в котором они были нажаты. Но иногда нужно, чтобы они открывались в новом окне. Это можно сделать, используя атрибут HTML target blank.

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

Значение _self открывает ссылку в том же окне, в котором она была нажата. Это состояние по умолчанию для всех ссылок, так что это значение используется очень редко.

Единственная ситуация, в которой это может произойти, если в HTML использован тег <base>, который устанавливает определенный способ открытия для всех ссылок. Например, если между тегами <head> добавлен следующий код <base href=»http://www.ltconsulting.co.uk» target=»_blank»/>, нужно использовать target=»_self», чтобы ссылка открывалась в том же окне.

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

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

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

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

Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target. Например, <a href=»http://ltconsulting.co.uk» target=»frame1″> открывается во фрейме с именем frame1, то есть <frame src=»https://www.internet-technologies.ru/wp-content/uploads/sidebar» name=»frame1″>. iframe также поддерживают это значение атрибута. Но вряд ли вы когда-нибудь столкнетесь с такими вариантами использования. Когда framename выбирается пользователем, это имя может начинаться только с буквы, а не с цифры или другого символа.

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

<a href="http://ltconsulting.co.uk" target="blank">ltconsulting.co.uk</a>

Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank:

Код второй ссылки:

<a href="http://ltconsulting.co.uk/contact-us/" target="blank">ltconsulting.co.uk/contact-us</a>

Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой (собственной вкладке).

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

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

Данная публикация является переводом статьи «TARGET=“_BLANK” AND THE TARGET VALUES OF THE» , подготовленная редакцией проекта.

Атрибут target в HTML.

Для HTML элементов:

a
area
base
form

возможно добавление дополнительного (необязательного) атрибута target.

С его помощью можно определить место, в котором будет происходит загрузка содержимого, на которое ведут эти элементы.

Для примера, давайте рассмотрим принцип работы этого атрибута на элементе для создания ссылок <a>.

Общий синтаксис атрибута target будет следующий:

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

Теперь расшифруем, что значит каждое из этих значений:

_blank

Загружает содержимое в новом окне браузера.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

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

<a href="http://yandex.ru" target="_blank">Ссылка на поисковую систему Яндекс.</a>

//jsfiddle.net/dimachen/S69RN/

Попробуйте перейти по этой ссылке.

_self

Загружает содержимое в текущем окне браузера.

В следующем примере переход по ссылке загружает содержимое в том же окне браузера:

<a href="http://yandex.ru">Ссылка на поисковую систему Яндекс.</a>

//jsfiddle.net/dimachen/6PS7j/

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

_parent

Загружает страницу в родительский фрейм. Если на вашей веб-странице не используются фреймы, то значение будет работать точно также, как если бы вы указали значение _self

_top

Загружает содержимое в полном окне браузера. Если на веб-странице нет фреймов, то это значение работает аналогично _self.

framename

Загружает содержимое в конкретном фрейме, имя которого указано.

Значение по умолчанию для атрибута target:

_self

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Добавить цель=»_blank» в CSS — CodeRoad



У меня есть внешние ссылки в верхнем меню моего сайта. Я хочу открыть эти ссылки в новой вкладке. Я мог бы достичь этого, используя «target=_blank» в HTML. Есть ли подобное свойство CSS или что-то еще?

html css hyperlink
Поделиться Источник Ali     24 июня 2013 в 17:32

6 ответов

  • webdriver цель=»_blank»

    Страница имеет изображение с гиперссылкой, и эта гиперссылка имеет target=_blank, и каждый раз, когда я нажимаю это изображение, загружается новое firefox, и эта гиперссылка перенаправляется на этот новый веб -сайт firefox, и я теряю весь контроль над этой веб-страницей. Можно ли удалить или…

  • Есть ли альтернатива «target=_blank» в css?

    Есть ли альтернатива target=_blank в CSS? я хочу target=_blank , используя CSS.. если это возможно, пожалуйста, помогите мне….


87

Как уже упоминалось в c69, нет никакого способа сделать это с чистым CSS.

но вместо этого вы можете использовать HTML:

использовать 

<head>
    <base target="_blank">
</head>

в вашем теге HTML <head> для создания всех ссылок на страницы, которые не включают атрибут target , которые будут открыты в новом пустом окне по умолчанию. в противном случае вы можете установить целевой атрибут для каждой ссылки следующим образом: 

    <a href="/yourlink.html" target="_blank">test-link</a>

и это будет отменено 

<head>
    <base target="_blank">
</head>

тег, если он был определен ранее.

Поделиться Mojtaba Rezaeian     11 января 2014 в 18:16


34

К сожалению, нет. В 2013 году нет никакого способа сделать это с чистым CSS.

Обновление : спасибо showdev за ссылку на устаревшую спецификацию гиперссылок CSS3 , и да, ни один браузер ее не реализовал. Так что ответ остается в силе.

Поделиться c69     24 июня 2013 в 17:35


10

Есть несколько способов CSS может ‘target’ навигации. Это позволит стилизовать внутренние и внешние ссылки с помощью атрибутивного стиля, который может помочь посетителям понять, что будут делать ваши ссылки. 

a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }

Вы также можете настроить таргетинг на традиционный встроенный HTML ‘target=_blank’. 

a[target=_blank] { font-weight: bold; }

Также :целевой селектор для стилизации навигационного блока и целевых элементов . 

nav { display: none; }
nav:target { display: block; }

CSS :поддерживается селектор целевых псевдоклассов — caniuse , w3schools , MDN . 

a[href="http"] { target: new; target-name: new; target-new: tab; }

CSS/CSS3 ‘target-new’ property etc, не поддерживается никакими основными браузерами, август 2017 года, хотя он является частью спецификации W3 с февраля 2004 года .

Конструкция W3Schools ‘modal’ , использует псевдокласс ‘:target’, который может содержать навигацию WP. Вы также можете добавить HTML rel=»noreferrer и noopener рядом с target=»_blank», чтобы улучшить производительность ‘new tab’. CSS пока не будет открывать ссылки во вкладках, но эта страница объясняет, как это сделать с jQuery (совместимость может зависеть от WP кодеров ). MDN имеет хороший обзор использования псевдокласса :target в селекторах

Поделиться mark stewart     23 апреля 2017 в 02:38

  • Как добавить target=»_blank» на существующий <a href=»»> </a> ?

    У меня есть переменная, которая содержит следующий текст в PhP: $description = Flash <a href=\http://www.aaa.com/\>this coupon</a> <br > <a href=http://www.ggg.com/>Visit here</a> for details <br >; Как мне добавить цель=_blank чего не хватает в переменной…

  • Проверьте, является ли цель NSURLRequest «_blank»?

    Я слушаю url нагрузку от моего UIWebView. Есть ли способ проверить, имеет ли запрос цель _blank?: — (BOOL) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { if ([request targetIs:@_blank]) { // do something. } }


4

Еще один способ использования target="_blank" -это: 

onclick="this.target='_blank'"

Пример: 

<a href="http://www.url.com">Your Text<a>

Поделиться Edison Q     22 мая 2014 в 05:50


1

Ожидая принятия таргетинга CSS3 основными браузерами, можно было бы запустить следующую команду sed после создания (X)HTML: 

sed -i 's|href="http|target="_blank" href="http|g' index.html

Он добавит target="_blank" ко всем внешним гиперссылкам. Возможны и вариации.

EDIT

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

Поделиться Serge Stroobandt     11 июня 2014 в 11:17


1

Это на самом деле javascript, но связано/релевантно, потому что . querySelectorAll нацелен на синтаксис CSS: 

var i_will_target_self = document.querySelectorAll("ul.menu li a#example")

в этом примере используется css для таргетинга ссылок в меню с идентификатором = «example»

это создает переменную, которая представляет собой набор элементов, которые мы хотим изменить, но мы все еще должны фактически изменить их, установив новую цель («_blank»): 

for (var i = 0; i < 5; i++) {
i_will_target_self[i].target = "_blank";
}

Этот код предполагает, что существует 5 или менее элементов. Это можно легко изменить, изменив фразу «i < 5.»

подробнее читайте здесь: http://xahlee.info/js/js_get_elements.html

Поделиться John Vandivier     21 августа 2014 в 16:43

Похожие вопросы:


regex для a href добавить цель=»_blank»

Я искал напрасно, и мне нужно получить какой-то связанный текст и добавить к нему target=_blank. Я не могу использовать js, так как это для информационного бюллетеня. Связанный текст может быть…


Целиться=_blank или не целиться=_blank, вот в чем вопрос!

Должны ли ссылки на внешние сайты устанавливать target=_blank? E.g. Я нахожусь на www.acme.net и имею ссылку на www.otherplace.net, если эта ссылка будет: <a href=’http: цель//…


CSS: простой способ применить _blank к нескольким ссылкам?

каждый день я добавляю около 50 ссылок + на страницу интрасети, есть ли простой способ добавить атрибут _blank-используя CSS вместо того, чтобы применять его к EVERY.SINGLE ссылке, которую я…


webdriver цель=»_blank»

Страница имеет изображение с гиперссылкой, и эта гиперссылка имеет target=_blank, и каждый раз, когда я нажимаю это изображение, загружается новое firefox, и эта гиперссылка перенаправляется на этот…


Есть ли альтернатива «target=_blank» в css?

Есть ли альтернатива target=_blank в CSS? я хочу target=_blank , используя CSS. <>]+)>/is’, ‘\\1…


TYPO3 каждая внутренняя ссылка (навигация тоже) имеет цель=_blank

после обновления с v7.6 до v8.7 и выполнения мастера обновления каждая ссылка в контенте и навигации имеет target=_blank. Кто-нибудь может мне помочь? С уважением


Добавить цель=”_blank”

Я пытаюсь добавить target _blank с сохранением заголовка ссылки? <a href=https://www.w3schools.com/html/ title=Go to W3Schools HTML section>Visit our HTML Tutorial</a>

Откуда у target=”_blank” нижнее подчеркивание | by Liudmila Mzhachikh

Задавались когда-нибудь вопросом, почему все атрибуты как атрибуты, а у атрибута ссылки target значение с нижним подчеркиванием? 🤔

<a href="#" target="_blank">Я откроюсь в новом окне<a/>

Согласно спеке, у атрибута target есть 5 возможных значений (да, не только _blank):

🔗_blank — загружает страницу в новое окно браузера

🔗_self — загружает страницу в текущее окно

🔗_parent — загружает страницу во фрейм-родитель

🔗_top — отменяет все фреймы и загружает страницу в полном окне браузера

🔗{framename} — открывает документ во фрейме по имени {framename}

Наверняка, вы никогда и не использовали ничего, кроме _blank, и это не удивительно.

Зачем же тогда все остальные?

Этот вопрос уходит корнями в историю. В незапамятные времена, когда ajax-а не было и в помине, страницы часто делили на множество окошек с помощью тега <frameset>. Например, одно окошко служило навигацией, а другое — контентом. Получалось некое подобие обновления без перезагрузки страницы.

Сайт, разделенный на фреймы

И нужно было как-то указывать браузеру, в каком фрейме показывать ответ. За это и отвечал атрибут target.

А что происходит, когда мы пишем blank без нижнего подчеркивания? Почему ссылка все равно открывается в новом окне?

А происходит вот что. Браузер видит blank и думает, что это имя фрейма. Он пытается открыть документ во фрейме с name=blank, и, не находя такого, открывает его в новом окне и дает ему такое имя.

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

Можно ли писать blank без нижнего подчеркивания? В целом, да, но это не по стандарту (соотвественно, поведение будет как для фрейма).

Будут ли обновлять стандарт, раз frameset-ы давно канули в лету?

Скорее всего нет, т.к. до сих пор существуют сайты с фреймами. Обновление стандарта без обратной совместимости поломает эти сайты.

Ссылки:

Атрибут target тега | HTML справочник

HTML тег <form>

Значение и применение

Атрибут target (HTML тега <form>) указывает место отображения ответа, полученного после отправки формы (вкладка, текущее окно, или фрейм).

Поддержка браузерами

Синтаксис:

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

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

ЗначениеОписание
_blankОтвет будет отображен в новом окне или вкладке
_selfОтвет отображается в том же окне. Это значение по умолчанию.
_parentОтображает ответ во фрейм родителе, если фреймов нет, то это значение работает как _self.
_topЗагружает ответ в полном исходном окне, и отменяет все остальные фреймы. Если нет родителей, то ведет себя точно так же, как _self.
framenameОтвет отображается в окне <iframe> с указаным именем.

Отличия HTML 4.01 от HTML 4.01

В HTML 4.01 атрибут считался устаревшим и не рекомендован к использованию, в HTML 5 он полностью поддерживается.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута target HTML тега <form></title>
	</head>
	<body>
		<form name = "subscribeForm" action = "script.php" target = "_blank"> <!-- определяем имя для нашей формы, адрес, куда отправляется форма и место, где будет отображен ответ. -->	
			Имя: <input type = "text" name = "userName"> <!-- определяем элемент управления для ввода текстовой информации -->
			E-mail: <input type = "email" name = "email"> <!-- определяем элемент управления для ввода адреса электронной почты -->
			<input type = "submit" value = "Подписаться"> <!-- определяем кнопку отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), атрибутом name определили имя для нашей формы, атрибутом action указали адрес, куда отправляется форма и атрибутом target со значением _blank указали, что ответ будет отображен в новой вкладке.

Результат нашего примера:

Пример использования атрибута target HTML тега <form>.HTML тег <form>

Целевой атрибут HTML

Определение и использование

Для элементов и , Атрибут target указывает, где открыть связанный документ.

Для элементов , Атрибут target определяет цель по умолчанию для всех гиперссылок и форм на странице.

Для элементов

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

Относится к

Атрибут цели может использоваться в следующих элементах:

Примеры

A Пример

Целевой атрибут указывает, где открыть связанный документ:

Посетите W3Schools

Попробуй сам »

Пример площади

Карта изображения с интерактивными областями и целевым атрибутом:


usemap = «# planetmap»>

<карта name = "planetmap">
Меркурий
Venus

Попробуй сам »

Базовый пример

Укажите цель по умолчанию для всех гиперссылок и форм на странице:



Попробуй сам »

Пример формы

Показать полученный ответ в новом окне или вкладке:


Имя:

Фамилия:


Попробуй сам »

Поддержка браузера

Атрибут цели имеет следующую поддержку браузером для каждого элемента:

Элемент
а Есть Есть Есть Есть Есть
площадь Есть Есть Есть Есть Есть
основание Есть Есть Есть Есть Есть
форма Есть Есть Есть Есть Есть

Когда использовать target = «_ blank» | CSS-уловки

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

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

Плохая причина: потому что тебе это нравится.

Нравится вам это или нет, target = "_ blank" — это изменение поведения по умолчанию.Ссылки, открывающиеся на одной странице, являются поведением по умолчанию (как если бы на ссылке было target = "_ self" ).

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

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

Также стоит отметить, что пользователи могут принудительно открывать ссылку в новом окне / вкладке, щелкнув ссылку [Meta Key]. Это означает, что для ссылок им доступны оба поведения. Это также означает, что если вам, , нравится открывать новые вкладки, то вы, , можете, и вам не нужно передавать это поведение кому-либо еще.

При использовании target = "_ blank" доступно только такое поведение.

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

Брендинг брендинг брендинг! Глазные яблоки младенца. Метрики. ПОМОЛВКА.

Другие сайты должны иметь ссылки в обычном стиле, но наш сайт особенный. Наш сайт важнее и никогда не должен отставать.

Плохая причина: «Внутренние» ссылки и «Внешние» ссылки отличаются.

У нас будут «внутренние» ссылки (ссылки, которые указывают на наш собственный сайт) будут работать нормально, но «внешние» ссылки (ссылки, указывающие на другие сайты) открываются в новом окне / вкладке.

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

Я слышал от многих людей, что это «конвенция». Как в так и должно быть . Это не.

Плохая причина: ссылка на PDF-файл

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

Плохая причина: мой клиент этого хочет

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

Я мог бы подойти к нему так:

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

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

Плохая причина: это страница с бесконечной прокруткой.

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

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

Например: музыка, видео, подкаст…

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

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

Хотя, когда я это говорю, я проверяю YouTube, и они вас не пугают 2 при смене видео.

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

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

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

Я думаю о CodePen, где пользователи часто пишут код. Мы делаем несколько вещей, чтобы помочь:

  • Ссылки, ведущие на другие страницы, которые явно являются ссылками в стиле «узнать больше» (например, [?]), Которые вы видите только при взаимодействии с редактором, открываются в новой вкладке.
  • Обычные ссылки (например, ссылки в нижнем колонтитуле) работают нормально, но мы определяем, есть ли у вас несохраненные изменения в редакторе, и предлагаем вам сохранить их перед выходом.
  • Если вы перейдете на другой сайт (или у вас произойдет сбой в работе браузера), мы сохраним состояние редакторов в localStorage, чтобы вы не потеряли работу.

Касса — еще один случай. Конечно, вы не хотите терять клиентов во время оформления заказа. Ссылка на что-то вроде «информации о доставке» должна быть открываемой, чтобы они не теряли свое место при оформлении заказа.

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

Хорошая причина: какой-то технологически непонятный момент

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

Хорошо.

Техника

В случае необходимости…

Заставляет пользователя подтвердить, что он хочет покинуть страницу: 

  window.onbeforeunload = function () {
  return "Под этим сообщением будут две кнопки, спрашивающие, хочет ли пользователь остаться на этой странице или уйти. ";
}

Правильный HTML

Если вы собираетесь это сделать, вам понадобится не только атрибут target для функциональности, но и атрибут rel для безопасности.

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

Подробнее о проблеме безопасности.

Драма

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

1

s также может иметь target = "_ blank" .Я думаю, что это более необычный вариант использования, но тот же самый тип мышления, что и в этой статье.

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

Категории содержимого — руководства разработчика

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

Есть три типа категорий контента:

  • Основные категории контента, которые описывают общие правила, общие для многих элементов.
  • Категории контента, связанные с формами, которые описывают общие правила для элементов, связанных с формой.
  • Конкретные категории контента, которые описывают редкие категории, общие только для нескольких элементов, иногда только в определенном контексте.

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

Содержимое метаданных

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

К этой категории относятся элементы . Это устаревший API, работа которого больше не гарантируется. <команда> , <ссылка> , ,