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

Содержание

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=”_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

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

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

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

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

Относится к

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

Пример

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

<a href=»https://html5css. ru» target=»_blank»>Visit html5css</a>

Пример области

Изображение-карта с областью щелчка и target атрибутом:

usemap=»#planetmap»>

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

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

Пример формы

Отображение ответа, полученного в новом окне или на вкладке:

<form action=»/action_page.php» method=»get» target=»_blank»>
First name: <input type=»text» name=»fname»><br>
Last name: <input type=»text» name=»lname»><br>
<input type=»submit» value=»Submit»>
</form>

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

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

Элемент
a	Да	Да	Да	Да	Да
area	Да	Да	Да	Да	Да
base	Да	Да	Да	Да	Да
form	Да	Да	Да	Да	Да

target = «_blank» — сильно недооцененная уязвимость в безопасности

Недавно, работая над своим сайтом, я наткнулась на любопытную вещь когда использовала атрибут target=»_blank» для ссылок.

Что в действительности происходит, когда вы открываете ссылку в новом окне, указав target=»_blank»?

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

Рассмотрим сценарий возможной атаки

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

Создайте «фишинговый» сайт например по такому адресу https://phishingwebsite/facebook.com/page.html и разместите следующий код на вашей «фишинговой» странице.

window.opener.location = 'https://phishingwebsite/facebook.com/page.html';

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

Что же произошло?

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

Давайте посмотрим, как мы можем это исправить

Добавьте для ссылки атрибут rel с значением noopener.

<a href= '/share' rel="noopener" target="_blank"/>

Совсем старые браузеры, например такие как IE11, не поддерживают значение «noopener» и для них придется добавить еще одно значение для атрибута rel — «noreferrer»

<a href= '/share' rel="noopener noreferrer" target="_blank"/>

поддержка rel=»noopener» браузерами

Подытоживая все вышесказанное, для ссылок с target=»_blank», всегда следует добавлять rel=»noopener noreferrer», как меру предосторожности против фишинга. Это гарантирует, что значение window.opener будет null, в Chrome и Firefox. В Safari Technology Preview 68, для target=»_blank» задается rel=»noopener» по умолчанию.

Спасибо, что прочитали мои мысли по этой теме.

Target = «_blank» и другие значения атрибута target. Валидный target=»_blank» Атрибут target тега a

открывается во фрейме с именем frame1 , то есть

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

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

ltconsulting.co.uk

ltconsulting.co.uk/contact-us

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рад приветствовать Вас на блоге сайт! В сегодняшней статье мы начнем говорить о языке гипертекстовой разметки html . Данная публикация будет первой в своем роде (и далеко не последней), так как прежде я ничего подобного не писал.

План поста:

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

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

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

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

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

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

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

Также существует еще очень много нюансов, которые облегчат Вам работу, и о которых, Вы прочитаете ниже в моей статье – это и rel=” nofollow” , и target=“_ blank” , и много еще чего интересного связанного со ссылками.

Тег ссылки А – создаем гиперссылку в html документе с анкором и без него

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

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

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

Разобравшись немного с теорией гиперссылок в html документе, можно приступить и к наглядным примерам. Вот такой код будет иметь ссылка:

Здесь должен быть текст Вашей гиперссылки, то есть анкор

Как видите, ссылка начинается с открывающейся скобки «».

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

Открытие ссылки в новом окне. Атрибут target _blank

Что же, с html тегом А разобрались, но это еще не все. Существует еще множество атрибутов, которые будут полезны Вам при работе со ссылками. Один из них – атрибут target _blank .

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

Target blank в html используют очень часто так, как это помогает, в плане поведения посетителей на Вашем сайте, то есть влияет на его поведенческие факторы. Поэтому, если Вы до сих пор не используете атрибут target с параметром _blank, рекомендую очень внимательно прочитать данный раздел.

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

Атрибут rel nofollow и тег noindex. Закрываем ссылку от индексации

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

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

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

Естественно, атрибут rel nofollow не стоит использовать, когда Вы ссылаетесь на внутренние страницы Вашего сайта, так как грамотная внутренняя перелинковка залог успешной оптимизации ресурса и дальнейшего его развития.

Я использую вышеупомянутый атрибут только, если ссылаюсь на внешние сайты. К примеру, как Вы могли заметить, часто в конце своих статей я предлагаю постетилям стать моим читателем в твиттере (), и даю ссылку на свой аккаунт, естественно эту ссылку я заключаю в rel nofollow. Выглядит это следующим образом:

Становитесь моим фолловером

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

Теперь стоит обсудить тег noindex . Он служит для того, чтобы поисковые роботы не индексировали не нужные элементы страницы. При чем, это касается не только гиперссылок, но и определенных участков текста.

Становитесь моим фолловером

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

Ссылка якорь и как ее сделать. Атрибут Name

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

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

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

Как видите, атрибут name не имеет анкора, так как якорь состоит из открывающегося и закрывающегося тега A. Параметр атрибута Вы должны задать сами, указывается он после знака равенства и скобок, как показано выше на примере.

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

Анкор

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

Что же, на этом у меня все, если возникли какие-либо вопросы, задавайте их в комментариях. Отмечу, что эта не последняя статья по html, в обозримом будущем будут еще публикации на эту тему.

Видео-эпилог: художник очень быстро рисует картины на стекле

Что такое target в html. Target = «_blank» и другие значения атрибута target. Значение по умолчанию

открывается во фрейме с именем frame1 , то есть

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

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

ltconsulting.co.uk

ltconsulting.co.uk/contact-us

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

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

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

Можно ли пользоваться тегом 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

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

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

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

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

Но для того, чтобы правильно создавать гиперссылки и вставлять их в код вебстраниц (например, своего сайта), необходимо изучить соответствующую область языка гипертекстовой разметки (), поскольку эти элементы образуются с помощью 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 подобные метки-якоря можно установить практически в любом месте вебстраницы. Поскольку обычно текст разделяется на абзацы, то их можно применить и к . Я в основном проставляю якоря , которыми статьи разделены на логические части:

5.4. Ссылки внутри фреймов. HTML, XHTML и CSS на 100%

HTML | Атрибут target — GeeksforGeeks

HTML | Атрибут цели

Атрибут цели HTML используется для указания, где открыть связанный документ. Его можно использовать с различными элементами, такими как:

Синтаксис:

Значения атрибутов:

_blank: It открывает ссылку в новом окне.
_self: Открывает связанный документ в том же фрейме.
_parent: Открывает связанный документ в родительском наборе фреймов.
_top: Открывает связанный документ во всем теле окна.
framename: Открывает связанный документ в названном фрейме.

Пример:

< html >

< Головка > 900 < заголовок >

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

заголовок >

глава >

< корпус >

< центр >

< h2 > GeeksForGeeks h2 >

< h3 > HTML Target Attribu te h3 >

< p > Добро пожаловать в

id = "GFG" target = "_self" >

GeeksforGeeks

a >

p >

 2  92     центр  > 
    корпус  > 
  
    html  >

Выход: Браузеры: Браузер, поддерживаемый HTML target Атрибут a ниже:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Целевой атрибут HTML - учебные пособия по HTML

Последнее обновление 26 февраля 2020 г. 08:07:09 (UTC / GMT +8 часов)

мишень

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

Поддерживаемые элементы

HTML атрибут tabindex поддерживает элемент, область, основание, форму, ссылку.

Синтаксис

  .....

Где ElementName - любой поддерживаемый элемент.

Тип значения

FrameTarget.

Значение

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

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

Нет значения по умолчанию для целевого атрибута HTML.

Поддерживаемые типы документов

HTML 4.01 строгий, HTML 4.01 переходный, набор фреймов HTML 4.01.

Пример целевого атрибута HTML с элементом

  



 Пример целевого атрибута HTML с элементом 


  руководства по w3resource

Результат

Посмотреть этот пример в отдельном окне браузера

Пример целевого атрибута HTML с элементом

Предыдущая: HTML-атрибут tabindex
Следующая: HTML-атрибут заголовка

HTML-тегов / Frame Tags / целевой кадр ссылки

Атрибут target элемента A определяет целевой фрейм ссылки.

 
    связанный текст

Атрибут	Значение	Пояснение
target = ""	_ пустой	Связанная страница открывается в новом окне
	_top	Связанная страница открывается во всем окне
	_ себя	Связанная страница открывается в том же фрейме
	_ родительский	Связанная страница открывается в родительском фрейме
	имя фрейма	Связанная страница открывается в названном фрейме

Атрибут target не может использоваться с Strict DTD.

Пример

target = "_ top" (Связанная страница открывается во всем окне)

 
    Все окно

Выход

Пример страницы

target = "_ self" (связанная страница открывается в том же фрейме)

 
    Тот же кадр

Выход

Пример страницы

target = "_ parent" (Связанная страница открывается в родительском фрейме)

 
    Родительский фрейм

Выход

Пример страницы

О родительском фрейме

Когда вы загружаете "child.html" в B-фрейм, родительский фрейм C-фрейма становится B-фреймом.

target = "FrameName" (связанная страница открывается в названном фрейме)

 

    B-кадр    
    C-кадр

Выход

Пример страницы

Теги кадра

Связанный документ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отлично.

Техника

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

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

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

Правильный HTML

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

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

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

Драма

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

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

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

Лучшая альтернатива атрибутам целевых данных | Марк Карон

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

Если вы веб-разработчик, скорее всего, вы видели или использовали атрибут data-target , подобный этому, для управления виджетом в JavaScript:

Модальный HTML Bootstrap 3 (упрощенный)

В приведенном выше примере data -target указывает, какой элемент является целью, которой будет управлять кнопка - нацеленность на

с идентификатором ID «myModal.

Но есть гораздо лучший способ достичь той же цели!

Почему пользовательский атрибут

data- * уступает в этом контексте

Это может звучать семантически, когда «цель» является частью имени атрибута, но это не семантически. В спецификации W3C даже сказано:

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

Plus, data- * атрибуты предназначены для использования, когда нет других альтернатив, но существует более подходящий атрибут .

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

Лучшая альтернатива в этом контексте

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

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

Команде Bootstrap следует рассмотреть возможность использования элементов управления aria в своих модальных окнах. См. «Примечание 1» в нижнем колонтитуле.

Я думаю, можно с уверенностью предположить, что почти каждый раз, когда вы используете data-target, вы обрабатываете кнопку, которая управляет другим элементом.Могут быть и другие крайние случаи, но этот контекст, скорее всего, составляет подавляющее большинство случаев использования. Здесь aria-controls - лучшая альтернатива.

Если вы обнаружите, что используете data-target в контексте за пределами кнопки, управляющей другим элементом, то, возможно, есть атрибут ARIA, который соответствует вашему варианту использования, например, aria-labelledby или aria-describe by . В крайнем случае - если подходящих атрибутов больше нет - используйте data-target .Но, пожалуйста, не делайте этого по умолчанию.

Скорее всего, для этого есть атрибут ARIA.

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

Вот несколько дополнительных (из многих других) атрибутов ARIA, которые предоставляют те же преимущества, что и aria-controls :

aria-Press = «true» - используйте это вместо «активного» класса на кнопках.
aria-selected = «true» - используйте это вместо «активного» или «выбранного» класса на вкладках.
aria-current = «true» - используйте вместо «активного» класса для разбивки на страницы и меню.
aria-extended = «true» - используйте это вместо класса «open» на аккордеонах и других подобных переключаемых виджетах и на их кнопках.

Преимущества этого метода

Использование атрибутов ARIA для стилизации и установки состояний в JavaScript всегда дает следующие преимущества:

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

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

Комментарии и обратная связь

Как всегда, мне интересно услышать мнения и отзывы всех о замене как можно большего количества атрибутов data- * и классов CSS на большее количество семантических параметров, таких как атрибуты ARIA.

Примечание 1:
Очевидно, что если вы используете Bootstrap и переключились на aria-controls , это не сработает прямо из коробки. Я просто использую здесь Bootstrap в качестве примера, потому что эта библиотека знакома многим разработчикам.

Когда (не) использовать Атрибут ссылки Target = "_ Blank"

Все больше и больше сайтов используют target = ”_ blank” для ссылок, чтобы убедиться, что они откроют ссылку в новом окне и сохранят посетителя на сайте.

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

Но действительно ли это разумный поступок?

When Target = ”_ Blank” Можно / нужно использовать

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

Случаи, когда атрибут может (и рекомендуется) использоваться, следующие:

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

Продолжить чтение ниже

Также разумно предупредить посетителя о типе файла, который он собирается загрузить, и о том, как будет открываться ссылка:
Документ (PDF 13K, в новом окне)

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

Target = "_ Blank" по сравнению с другими способами открытия ссылок в новом окне

JavaScript-методы по сравнению с "target =" _ blank "

Продолжить чтение Ниже

Target =" _ blank "всегда будет открываться новое окно или вкладка точно такого же размера, что и оригинал, закрывает оригинал и может сбивать с толку, особенно если пользователь щелкает мышью и на мгновение отводит взгляд.С помощью метода Javascript вы можете контролировать размер окна, чтобы было ОЧЕНЬ очевидно, что это новое окно, и вы все еще можете видеть родителя за ним.
Очевидно, что метод JavaScript не будет работать, если JavaScript отключен. Кроме того, это предотвратит сканирование страницы поисковым ботом.

Target = «_ blank» по сравнению с Target = «new»

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

Продолжить чтение ниже

Ссылки с target = ”_ blank”

Google | Yahoo

Ссылки с target = "_ new"

Google | Yahoo

Дополнительное чтение:

Показанное изображение: Депозитные фотографии

Понимание целевого атрибута со ссылками в ClickDimensions

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

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

Например, наш менеджер гиперссылок ClickDimensions дает вам возможность открывать ссылки в новом окне, как показано ниже.

Этот флажок добавляет дополнительный код в ваш тег в HTML.

Если вы решите не устанавливать этот флажок, исходный код будет настроен следующим образом:

Нажмите здесь

Если вы установите этот флажок, исходный код будет настроен следующим образом:

target= “_blankhibited” > Нажмите здесь

Разница составляет target = «_blank»

Атрибут target используется, чтобы указать, как отображать ссылку при нажатии, а ключевое слово «_blank» указывает ему открыть новую вкладку / окно.Эту функцию можно использовать изначально в ClickDimensions. Ссылки естественным образом загружаются во фрейм, в котором они находятся. Таким образом, указание «_blank» переопределит то, что изначально собирался делать браузер, и создаст новую вкладку / окно.

Это так просто, но при использовании этого атрибута следует помнить о некоторых вещах. Когда появился целевой атрибут, браузеры сильно замедлились при открытии каждой новой вкладки / окна. Чем больше элементов у вас открыто, тем медленнее будет работать ваш компьютер.Естественно, пользователи начали выражать свое пренебрежение. В какой-то момент его даже удалили в HTML. Итак, полезно следовать общему практическому правилу: