Атрибут target тега a. Когда использовать target=_blank
Здравствуйте, уважаемые читатели блога сайт. Сегодняшнюю публикацию я решил посвятить важнейшему аспекту вебмастеринга, где со всеми подробностями попытаюсь объяснить, что представляет из себя гиперссылка, неразрывно связанная с , который, в свою очередь, без преувеличения, является основой интернета.
Но для того, чтобы правильно создавать гиперссылки и вставлять их в код вебстраниц (например, своего сайта), необходимо изучить соответствующую область языка гипертекстовой разметки (), поскольку эти элементы образуются с помощью 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 подобные метки-якоря можно установить практически в любом месте вебстраницы. Поскольку обычно текст разделяется на абзацы, то их можно применить и к . Я в основном проставляю якоря , которыми статьи разделены на логические части:
Отметив таким образом все нужные места в HTML коде, далее создаем гиперлинки на них. Для этого в конце после последнего слэша «/» в URL (являющегося, как вы уже знаете, значением атрибута href) прописываем последовательно знак решетки «#» и имя метки (ID):
Как формировать хеш-ссылки и якоря?
Причем, если подобная якорная ссылка проставлена на той же странице, что и якоря, то часть урла до последнего слеша перед решеткой включительно может быть опущена и в качестве параметра href использованы только «#» плюс наименование ID (в сущности, это один из вариантов относительной ссылки):
Как формировать хеш-ссылки и якоря?
То есть при составлении оглавления мануала для оптимизации HTML кода вы вполне можете воспользоваться этим облегченным вариантом. Если в качестве URL вы поставите лишь один знак решетки, без названия идентификатора, то с места, где находится такая ссылка, страничка будет прокручиваться до конца вверх:
Наверх
Собственно, это простейший вариант , которая опять же служит дополнительным плюсом юзабилити ресурса, поскольку облегчает жизнь его посетителям. В качестве анкора для создания кнопки можно использовать привлекательную картинку.
Как убрать подчеркивание и изменить цвет ссылки
Разработчики HTML продумали практически все нюансы, которые могут помочь в оптимизации того или иного аспекта, это же касается и гиперлинков. Например, переходя по какой-нибудь гиперссылке на другую веб-страницу, а затем вернувшись обратно, юзер увидит, что гиперссылка изменила цвет.
Если ему требуется повторять такие действия неоднократно, то он сможет быстро определять, какие ссылки он уже нажимал, а какие нет. Такая опция заложена практически в каждом браузере. Нет нужды объяснять, насколько это удобно и сколько времени экономит.
По умолчанию и без применения средств CSS гиперссылки выделены подчеркиванием и тремя вариантами цвета , каждому из которых соответствует свой атрибут для :
- link — задает цвет гиперлинка на вебстранице (по умолчанию синий, который в обозначается #0000ff);
- alink — цвет активной гиперссылки на тот промежуток времени, пока она обрабатывается веб-браузером (красный #ff0000);
- vlink — цвет посещенной юзером ссылки (фиолетовый, #800080).
Как же заменить цвета ссылок, отображаемых браузерами для вашего сайта? Ну, для простого HTML-сайта, где странички формируются вручную (а полнофункциональных ресурсов такого рода в современных реалиях, думаю, практически не осталось, разве что простенькие дневники и лендинги) нужно просто найти открывающий тег
и прописать для него нужные параметры (кстати для обозначения цвета можно использовать и его название), например:
Если вы установили для администрирования своего веб-ресурса систему управления контентом (), то, независимо от типа движка, который вы используете, необходимо открыть на редактирование файл, отвечающий за вывод хидера (шапки), где присутствует открывающий тег
.Если ваш ресурс работает под управлением Вордпресс, то для практической реализации этой задумки в качестве инструмента для автоматической вставки картинки внутрь гиперссылки можно воспользоваться , где сначала выбираете из библиотеки или загружаете нужное изображение и вставляете его в текст:
Затем выделяете полученный код картинки и нажимаете кнопку «link» редактора, после чего в появившемся окне вставляете нужный скопированный гиперлинк:
На многих сайтах применяется практика открывать внешние ссылки в новом окне. Часто таким образом открываются, например, ссылки на сайт разработчиков или результаты выдачи поисковой системы. Как правило, для этого используется атрибут тега < >:
Вообще говоря, указывать пользователю, как ему открыть ссылку некрасиво. Гуру юзабилити сайтов в один голос утверждают, что пользователь сам в состоянии решить, как ему открыть ссылку. Он разберется в своих окнах без наших с вами пожеланий по этому поводу. Более того, мы нарушим и работу стандартной кнопки браузера «Назад». Такое грубое вмешательство в привычки, скорее всего вызовет неприязнь!
Кроме того создается плохое впечатление: «Пользователь уходит с сайта! Он может сюда никогда не вернуться! А-а-а! Что делать? Давайте откроем новую ссылку в другом окне! Может быть, когда он посмотрит все, что ему нужно, то закрыв это окно, он опять попадет к нам и уж тогда-то точно станет постоянным посетителем!»
Смысл, надеюсь, ясен — наполняй сайт качественным полезным и интересным контентом и тогда посетители вернуться осознанно и самостоятельно.
Однако кроме моральной есть еще и техническая сторона вопроса — атрибут target отсутствует в спецификации XHTML 1.0 Strict и, соответственно, не пройдет валидацию!
Валидное решение: JavaScript
Если, несмотря на предыдущие абзацы, вы все-таки решили (или вас заставили) открывать страницу в новом окне, давайте хотя бы сделаем это валидно.
Тут на помощь придет JavaScript. Попробуем перехватить событие onclick ссылки и принудительно открыть новое окно с помощью функции window.open(). После чего запретим переход по ссылке в родном окне, указав return false:
Ссылка откроется в новом окне
Проверяем полученное решение: .
Все замечательно. Браузеры уверенно открывают ссылку в новом окне. Валидатор радует нас зеленым сообщением об успехе. Казалось бы можно успокоиться, но не тут-то было! Давайте попробуем поставить в браузере функцию жесткой блокировки всплывающих окон и снова перейти по ссылке!
Более удачное решение
Блокировка всплывающих окон предназначена главным образом для борьбы с надоедливой рекламой. Такая функция есть во всех современных браузерах. Некоторые браузеры даже предлагают разные уровни блокировки. Например в Opera 9+ можно блокировать либо только «нежелательные» окна либо все подряд.
Уж не знаю какой процент пользователей так радикально борется с всплывающими окнами, а только при таких настройках вместо открытия окошка просто появиться маленькая подсказочка «всплывающее окно блокировано». Более того, даже это проявление реакции браузера на щелчок в настройках можно отключить. В этом случае ссылка просто потеряет функциональность: «Я кликаю, а ничего не происходит!»
Если прочитав это, кто-то сказал: «Всем не угодишь! Ну кто же им доктор, что у них все отключено!», то нам с такими не по пути. Для остальных продолжим.
Ссылка откроется в новом окне
Тут мы воспользовались тем, что функция window.open() возвращает значение true, если окно открыто успешно и false, в противном случае. То есть, в случае, когда ссылка благополучно открылась в новом окне, мы блокируем открытие ссылки в своем родном окне, т.к. return будет!true=false. И наоборот, если окно открыть не удалось, return true позволит ссылке отработать в штатном режиме.
Большинство веб-разработчиков даже не догадываются:
Страница, на которую мы ссылаемся с использованием target="_blank" , получает доступ к странице-источнику через объект window.opener .
Например, таким образом только что открытая вкладка может изменить window.opener.location, т.е. вместо предыдущей вкладки незаметно подгрузить совсем другую страницу.
Самое ужасное - то, что эта уязвимость присутствует на многих популярных отечественных и зарубежных сайтах: тогда как в Facebook её исправили несколько дней назад, она всё ещё работает, например, в Яндекс.Почте.
Пример атаки
Опираясь на такое поведение браузеров, можно придумать множество сценариев, вот самый простой:
1. Жертве отправляется письмо, возможно, с поддельного адреса. Содержание письма совершенно неважно: главное - это вынудить жертву перейти по ссылке с вредоносным кодом. Например, это может быть просьба заценить ми-ми-мишных котиков вроде того, что ниже. Target="_blank" Яндекс добавляет во все письма автоматически.
2. Жертва открывает письмо в Яндекс.Почте, кликает на ссылку, по которой в новой вкладке открывается сайт-прокладка, выполняющая вредоносный код, который вместо Яндекс.Почты загружает фишинговый сайт, очень похожий на оригинальный, но, например, просящий повторно ввести логин и пароль, а также, чтобы снять подозрения, действительно делает переадресацию на котиков.
Пример такого кода:
// Подмена оригинальной Яндекс.Почты на фейк window.opener.location = "http://e-m-a.il/yandex.ru"; // Переадресация на котиков, чтобы снять подозрения window.location = "https://imgur.com/0A5ZGBN";
3. Жертва, доверяющая Яндексу и посмотревшая на котиков, возвращается на предыдущую вкладку с почтой. Так как в ней она ничего не открывала, а также адрес не меняла, то, скорее всего, она поведется на фейк и введет свои логин и пароль, которые на самом деле отправятся злоумышленнику.
Единственное, что может вызвать подозрения – другой адрес у страницы, но его можно сделать очень похожим на оригинальный, а на мобильных устройствах он часто скрыт по умолчанию.
Лечение
К счастью, исправить всё можно довольно легко: ко всем ссылкам с target="_blank" нужно дополнительно добавлять атрибут rel="noopener noreferrer" .
Если вы не собираетесь ждать, пока это исправят на сайтах и в браузерах, рекомендуем добавить себе в TamperMonkey/GreaseMonkey следующий User Script:
// ==UserScript== // @name NULL Opener object // @namespace nullopenerobjectns // @description Clears the window.openeer object. // @version 1 // @grant none // @run-at document-start // ==/UserScript== (function() { "use strict"; window.opener = null; })();
The only currently relevant value of target is _blank . The other values of target were used to specify specific frames. However, frames have been deprecated in HTML5 .
Default target
If no target is specified, the link will open in the current context, unless the user or browser specifies otherwise.
a target=”_blank” Open in New Browser Tab (or Window)
The target attribute specifies where the linked document will open when the link is clicked. The default is the current window. If target="_blank" , the linked document will open in a new tab or (on older browsers) a new window.
Why Open in a New Browser?
The most common reason to use `target=”_blank” is so that offsite links open in a separate tab. This allows a user to click on a reference and come back to it later without leaving the current page. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited.
Open All External Links in a New Tab with JavaScript
You don"t need to manually add target="_blank" to every link on your site. If you link out a lot (which you should do), it is easy to add some JavaScript code to your site and turn all external links into _blank links automatically.
jQuery(document.links) .filter(function() { return this.hostname != window.location.hostname; }) .attr("target", "_blank");
(You can see a slightly modified form of this code in action on every page of this website.) This trick requires jQuery , but there is a good chance you are using it already. It is used in the most popular frameworks and content management systems, including WordPress , Drupal , and Twitter Bootstrap . If you need to do it without jQuery, that can be done as well. Here is a “plain JavaScript” version:
Function externalLinks() { for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) { var b = c[a]; b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks();
Besides making it easier, this cleans up your markup considerably.
Reasons not to use `target=”_blank”
Some people argue that users do not prefer to open links in a new browsing context. They think that doing so is similar to popup ads and other annoying behavior. With the rise of tabbed browsing , this argument has largely gone away. Most users prefer to open links in a new tab, because it allows them to come queue referenced links for later reading without losing their current browsing context.
Values of the target Attribute
| Value Name | Notes |
|---|---|
| _blank | Opens the linked document in a new tab or window. |
| _parent | Opens the link in the parent frame. Frames are deprecated in HTML5. |
| _self | Open the link in the current frame. |
| _top | Opens the link in the top-most frame. Frames are deprecated in HTML5. |
| frame name | Opens the link in the named frame. Frames are deprecated in HTML5. |
target=»_blank используется, чтобы тег открыл ссылку в новом окне. Но что такое target HTML ? Почему он должен быть blank ? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.
Атрибут target
Значения target
Четыре наиболее распространенных значения атрибута target :
_self
Единственная ситуация, в которой это может произойти, если в HTML
использован тег
_blank
Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .
Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.
_parent
Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов