Target blank css: When to use target=»_blank» | CSS-Tricks

Содержание

Добавить цель="_blank" в CSS - CodeRoad



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

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

6 ответов




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, так как это для информационного бюллетеня. Связанный текст может быть...


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

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


webdriver цель="_blank"

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


jQuery добавить цель="_blank" для исходящей ссылки

Мне нужна помощь, чтобы создать сценарий jquery 🙂 У меня есть такая ссылка на моем HTML. <a href=http://google.com>Google</a> <a href=/>Home</a> <a...


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

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


Как добавить 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...


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

Я слушаю url нагрузку от моего UIWebView. Есть ли способ проверить, имеет ли запрос цель _blank?: - (BOOL) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request. ..


Добавить цель="_blank" с помощью jQuery

Я обновляю некоторый код jQuery, и мне нужно добавить target=_blank к ссылкам в приведенном ниже коде. К сожалению, я не настолько увлекаюсь jQuery и сам не написал оригинальный код. Заранее спасибо...


PHP добавить цель= " _blank

Я надеюсь, что все делают отлично, мне нужна помощь, как я могу добавить целевой пробел к определенному коду это код: if( !empty($social_fb) ){ $result .= '<a...


Добавить цель=”_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 - CSS | MDN

Псевдокласс  CSS  :target представляет уникальный элемент (целевой элемент) с подходящим id  URL-фрагментом.


:target {
  border: 2px solid black;
}

Для примера, следующий URL имеет фрагмент (обозначается знаком #), который указывает на элемент с именем section2:

http://www.example.com/index.html#section2

Следующий элемент будет выбран селектором :target, если текущий URL равен вышеуказанному:

<section>Example</section>

Таблица контента

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

HTML
<h4>Table of Contents</h4>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h4>My Fun Article</h4>
<p>You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p>This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>
CSS
p:target {
  background-color: gold;
}


p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}


p:target i {
  color: red;
}
Результат

Pure-CSS lightbox

Вы можете использовать псевдокласс :target для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их  display на видимый.

Примечание: Более полный pure-CSS lightbox , основанный на псевдоклассе:target -  available on GitHub (demo).
HTML
<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

<div>
  <figure>
    <a href="#"></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
  </figure>
</div>

<div>
  <figure>
    <a href="#"></a>
    <figcaption>Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna. </figcaption>
  </figure>
</div>
CSS

.lightbox {
  display: none;
}


.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}


.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}


.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}
Результат

BCD tables only load in the browser

Target в CSS.

Как это работает? Target = "_blank" и другие значения атрибута target Управление нецелевыми объектами
открывается во фрейме с именем frame1 , то есть

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

Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на 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 » , подготовленной дружной командой проекта

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

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

Итак, сегодня мы разберем, из каких частей состоит гиперссылка, каким образом использование атрибута target blank дает возможность открывать страницу в новом окне (вкладке), как любую картинку делать ссылкой и много других важных подробностей. Кроме всего прочего, эта информация продвинет вас в изучении языка HTML.

Что такое гиперссылка и можно ли ее называть ссылкой?

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

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

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

Например, с помощью служебных гиперссылок возможно отображение иконки . Их можно увидеть только в составе HTML-кода (для этого нажмите для любой открытой в браузере страницы):


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

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

Как сделать гиперссылку в HTML с помощью href

Итак, мы уже знаем, что для создания ссылки необходим в обязательном порядке тег a и атрибут href, параметрами которого могут быть URL различного вида. Поскольку a это , то между открывающим и закрывающим расположено содержание, которое и будет отображаться на web-странице.

Это содержимое называется анкором и может быть представлено в виде текста или изображения (о том, как сделать картинку ссылкой, поговорим подробнее ниже). Как я уже отмечал, анкор будет кликабельным. Рассмотрим пример гиперссылки с текстовым содержанием. Вот как будет выглядеть ее конструкция в HTML-коде:

немного об анкорах

Помимо HTTP может быть использован защищенный протокол HTTPS. Линк не обязательно должен вести на вебстраницу. Все зависит от значения href, в качестве которого может быть указан путь до какого нибудь файлика:

//сайт/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

скачать

На вебстранице данный линк примет такое обличье:

Браузер "понимает", что объект с расширением.zip может быть предназначен только для скачивания, что и предлагает сделать юзеру.

Кстати, путь до любого файла иногда указывается через ФТП (). Тогда в URL адресе, который применяется в качестве параметра атрибута href, следует просто заменить протокол HTTP (HTTPS) на FTP. Ссылка на файл будет выглядеть следующим образом:

скачать с сервера

Но и это не все. Подобным образом создается ссылка на электронную почту с использованием псевдо-протокола mailto для быстрого доступа к средству написания письма:

пишите письма

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

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

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

Я привел в пример только самые распространенные протоколы, входящие в состав URL, который, в свою очередь, является параметром атрибута href при формировании гиперссылки. Кроме HTTP (HTTPS), FTP и mailto существуют и другие для решения задач более узкого профиля. Возможно, мы их рассмотрим поподробнее в других публикациях.

Виды гиперссылок

А теперь попробуем классифицировать линки по тем или иным признакам.

По области их действия:

1. Внешние — ведут на страницы, располагающиеся вне сайта, на котором они проставлены;

2. Внутренние — связывают вебстраницы, находящиеся в пределах одного веб-ресурса.

По формату:

2. Графически е — в этом случае анкором гиперссылки является изображение (в том числе миниатюра), баннер, кнопка и т.п.

По типу URL, выступающего в качестве значения атрибута href:

1. Абсолютные , которые содержат явное указание протокола передачи данных (например, HTTP) и доменное имя сайта (в все о доменах).

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

Контекст - что это такое

2. Относительные , одним из вариантов создания которых будет путь, указанный относительно корневой папки веб-сайта (отсюда и название этого вида гиперссылок). При этом из URL адреса будет изъят протокол (HTTP) и домен сайта:

Контекст - что это такое

Относительные гиперссылки на web-странице могут обеспечить переходы на внутренние странички. В таком виде они короче, что облегчает HTML-код. Конечно, все не так просто, и требует более широкого освещения, в чем вы сможете убедиться, ежели перейдете по предоставленной ссылке.

Атрибуты тега a

Теперь посмотрим, какие еще атрибуты, кроме обязательного href, существуют, и как они могут повлиять на создание гиперссылки. Наиболее полные данные в этом отношении, так сказать, "из первых рук" вы можете найти на официальном сайте Международного Консорциума W3C, на котором актуальная информация появляется быстрее всего.

Они являются полностью идентичными и инициируют открытие веб-страницы в текущей вкладке. Если же вы хотите, чтобы странички открывались в новой вкладке при переходе по ссылкам, то следует добавить при формировании линка атрибут target с параметром blank :

Контекст - что это такое

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


Причем, как видите, в этом случае у юзера преимущество в том, что есть возможность открыть вебстраницу не только в новой вкладке, но и в новом окне (такой вариант нельзя реализовать посредством HTML, только с помощью скриптов).

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

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

Кроме этого, открытие страницы в соседней вкладке очень удобно с точки зрения юзабилити (). Юзер перебирается по гиперссылке на вебстраничку, получает дополнительную информацию и, как ни в чем не бывало, продолжает изучение основного материала.

Для создания объективной картины следует добавить, что применение «target="_blank"» к любым внешним ссылкам, оказывается, таит в себе некоторую угрозу безопасности. Если кому интересно, то можете почитать , где даны рекомендации по устранению проблем при использовании target blank, а также представлены альтернативные варианты реализации задачи по открытию вебстраницы в новой вкладке.

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

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

Как создать хеш-ссылки, якоря и зачем они нужны?

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

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

Оформляются подобные линки довольно просто. Для начала нужно создать якорь (anchor) , проставив в необходимом месте страницы соответствующую метку в виде идентификатора ID, являющегося одним из глобальных атрибутов, применяемых к любому HTML-тегу.

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

Атрибут target blank: что это и для чего используется

В этой статье разберем вопрос: что это такое target blank? Таргет бланк — это специальный атрибут HTML-тега <a>, который открывает ссылку, обозначенную этим тегом в новом окне. 

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

  • Список. Например, это может быть список книг и сразу ссылки на их скачивание;

  • Меню. Для меню есть собственный тег в HTML, но раньше часто использовался именно тег <а>, да и до сих пор «старые» верстальщики верстают меню при помощи этого тега;

  • Кнопки. У кнопок тоже есть собственный тег в HTML, однако в ряде случаев используется именно тег <а>.

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

«Таргет бланк» и другие значения атрибута target

Если не указывать атрибут «target» в теге <а>, тогда ссылка, указанная тегом, будет открываться на той же странице. Чтобы это сделать как-то по-другому, ввели данный атрибут.

Атрибут «таргет» может принимать следующие значения:

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

  2. _blank. Как мы уже говорили, данное значение атрибута target в html открывает ссылки в новом окне или новую вкладку в браузере. Оно не предназначено для всплывающих блоков, когда при нажатии на ссылку всплывает рекламный блок на весь/половину/часть экрана. Этим занимаются скрипты JavaScript или свойства CSS. Часто атрибут target _blank используют, когда нужно оставлять ссылки на другие сайты или страницы скачивания файлов. В таком исполнении у пользователя всегда остается открытым ваш сайт в отдельной вкладке, несмотря на то, что он с вашего сайта перешел на другой ресурс по ссылке. И пользователю не придется искать ваш сайт в «истории» переходов.

  3. _parent. Это уже устаревшее значение, которое использовалось при открытии ссылок в теге фреймов <frame> или <frameset>, но данные теги не поддерживаются в современной версии HTML. Однако встретить это значение по-прежнему можно — оно открывает ссылку фрейма в родительском фрейме.

  4. _top. Данное значение тоже в основном используется во фреймах. Оно загружает фрейм в новой вкладке браузера.

Польза или вред таргет бланк в HTML

Основная польза использования target blank в HTML — это то, что нам только таким образом удастся сохранить своего пользователя. Так как если его не установить, то ссылка, указанная на вашем сайте, откроется в той же вкладке. А представим, что она ведет на интернет-магазин, где пользователь «залипнет» на товарах и просмотрит их несколько десятков. Как вы думаете, найдет ли он потом ваш сайт? Очень низкая вероятность.

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

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

  1. Открытая новая вкладка/страница влияет на работоспособность страницы-родителя. Из этого получается, что если открытая страница будет «подвисать», то «подвиснет» и ваш ресурс.

  2. Открытая страница приобретает небольшой контроль над страницей родителя. А это угрожает защищенности ваших пользователей.

Чтобы разорвать связь открытой страницы и вашей страницы родителя, нужно использовать еще один атрибут: rel= «noopener», можно в дополнении со свойством «nofollow», которое не передаст «вес» вашего сайта стороннему ресурсу.

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

Когда использовать 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-элемент HTML (или элемент привязки ) с его атрибутом href создает гиперссылку на веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или что-либо еще, что URL может адрес.Содержимое внутри каждого должно указывать на назначение ссылки . Если присутствует атрибут href , нажатие клавиши ввода при фокусировке на элементе активирует его.

Атрибуты этого элемента включают глобальные атрибуты.

загрузить
Предлагает пользователю сохранить связанный URL вместо перехода к нему. Может использоваться со значением или без значения:
  • Без значения браузер предложит имя файла / расширение, созданное из различных источников:
  • Определение значения предлагает его в качестве имени файла.Символы / и \ преобразуются в символы подчеркивания ( _ ). Файловые системы могут запрещать использование других символов в именах файлов, поэтому браузеры при необходимости скорректируют предлагаемое имя.
Банкноты
  • загрузка работает только для URL-адресов с одинаковым происхождением или схем blob: и data: .
  • Если заголовок Content-Disposition содержит информацию, отличную от атрибута download , результирующее поведение может отличаться:

    • Если в заголовке указано имя файла , он имеет приоритет над именем файла, указанным в атрибуте download .

    • Если в заголовке указано расположение inline , Chrome и Firefox 82 и более поздних версий, установите приоритет атрибута и рассматривайте его как загрузку. Версии Firefox до 82 отдают приоритет заголовку и отображают содержимое в строке.

href

URL-адрес, на который указывает гиперссылка. Ссылки не ограничиваются URL-адресами на основе HTTP - они могут использовать любую схему URL-адресов, поддерживаемую браузерами:

  • Разделы страницы с URL-адресами фрагментов
  • Фрагменты медиафайлов с медиафрагментами
  • Телефонные номера с тел: URL
  • Адреса электронной почты с mailto: URL
  • Хотя веб-браузеры могут не поддерживать другие схемы URL, веб-сайты могут с registerProtocolHandler ()
hreflang
Указывает на человеческий язык связанного URL.Нет встроенного функционала. Допустимые значения такие же, как для глобального атрибута lang .
пинг
Список URL-адресов, разделенных пробелами. При переходе по ссылке браузер отправит на URL-адреса запросов POST с телом PING . Обычно для отслеживания.
политика реферера
Сколько реферера отправлять при переходе по ссылке. См. Referrer-Policy для получения информации о возможных значениях и их последствиях.
отн.
Отношение связанного URL как типов ссылок, разделенных пробелами.
цель
Где отображать связанный URL, как имя контекста просмотра (вкладка, окно или