A target blank

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поподробнее поговорить про то, что такое гиперссылка в языке Html, как можно размещать их в тексте на сайте, как сделать ссылкой картинку, как правильно использовать тег «A» и его атрибуты «Href» и «Target blank» (открыть в новом окне).

A target blank

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

Что такое гиперссылка и якорь (anchor)

Итак, мы с вами уже успели познакомились с устаревшими и не рекомендуемыми для повседневного использования тэгами Font, Pre и Blockquote. Продолжим дальнейшее знакомство.


Для того, чтобы сделать гиперссылку в Html коде, нам тоже понадобится использовать тег A. Для него можно будет использовать различные атрибуты, задающие, например, URL адрес цели перемещения по этой ссылке (href) или же предписывающий открывать ее в новом окне (target=_blank). Но давайте поговорим обо все по порядку.

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

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

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

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


A target blank

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

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

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

Тут может возникнуть некоторая путаница, т.к. в SEO под словом «анкор» понимают текст ссылки, но в языке Html под «anchor» подразумевают именно якорь (перевод слова anchor) или же метку в тексте, на которую потом можно будет сослаться.

Зачем в Html используются якоря (anchor)? Это довольно удобно при создании навигации по довольно длинной web-странице. Наверное, вы встречали в сети, когда на открытой вами страничке сразу под ее заголовком приведены названия разделов статьи, опубликованной на этой странице.


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

Как создаются якоря и хеш ссылки

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

<a name="якорь_метка"></a>

Т.е. для того, чтобы сделать anchor, нужно в пустой тег гиперссылки «А» прописать единственный атрибут «Name», в качестве значения которого использовать уникальную метку, которая не должна содержать пробелов и в которой можно использовать символы латиницы, цифры, дефис и подчеркивание (в полной аналогии с правилами, по которым можно создавать Урлы — [0-9],[a-z],[A-Z],[_],[-]).

При этом, якорь не будет виден на самой странице, т.к. внутри элементов «A» мы не прописали никакого текста. Однако, созданные таким вот образом anchor будут загрязнять Html код, и поэтому сейчас гораздо чаще чем якоря используют другой способ создания метки.


В этом случае не нужно создавать пустой тег «А», а можно использовать любой из уже имеющихся в нужном месте текста элемент. Например, это могут быть теги заголовков H1-H6 или абзацев P.

Т.е. для создания аналога якоря достаточно прописать к любому тегу универсальный атрибут ID (его можно будет использовать для всех тегов, и на его основе, кстати, работают селекторы Id в CSS коде), например, так:

<h2 id="якорь_метка"> Текст заголовка </h2>

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

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

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

<a href="#якорь_метка"> перекинет на место страницы, помеченной якорем </a>

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


Если вы делаете якорь с помощью атрибута ID в удобно расположенном для этого теге, то нужно учитывать, что кроме ограничения по типу используемых символов ([0-9],[a-z],[A-Z],[_],[-]), значение ID обязательно должно начинаться с символа латинской буквы.

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

Если вы не пропишите после символа решетки «#» никакого названия метки якоря (href=»#»), то такая гиперссылка прокрутит страницу к началу. Именно так можно будет создать простейшую кнопку «Наверх», сделав ссылку с картинки (поговорим об этом чуть ниже) и вставив ее в шаблоне своего сайта, например, так:

A target blank

<a href="#"><img width="67" height="62" src="https://ktonanovenkogo.ru/wp-content/themes/Organic/images/seo.png" /></a>

Href — обязательный атрибут тега любой гиперссылки


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

<a href="путь до файла или web страницы">анкор</a>

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

Однако, напомню, при создании Урлов предпочтительнее использовать только следующие символы: ([0-9],[a-z],[A-Z],[_],[-]) и не использовать пробелы. Если мы рассматриваем содержимое атрибута Href для абсолютных ссылок, то схематично это можно будет представить так:

A target blank

Если отбросить то, что вы редко будете использовать, то можно представить все то же самое в несколько упрощенном виде:


протокол(обычно http)://доменное_имя (например, ktonanovenkogo.ru)/путь_до_файла (web страницы)

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

В интернете вы можете встретить различные варианты содержимого Href, например, такой:

https://ktonanovenkogo.ru/videokursy

Или такой (с расширением для файла):

https://ktonanovenkogo.ru/seo/kak-raskrutit-sajt.html

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

Точно таким же образом можно сделать ссылку для скачивания файла:

<a href="/wp-content/uploads/Collor.zip">Скачать что-то по ссылке</a>

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


Создать ссылку для скачивании файла по протоколу Ftp (тут можете почитать что такое Ftp) можно по аналогии, заменив только тип протолкала в самом начале содержимого атрибута Href:

<a href="ftp://ktonanovenkogo.ru/wp-content/uploads/Collor.zip">Скачать с Ftp сервера</a>

Можно еще, например, создать гиперссылку с псевдопротоколом Mailto (почтовый), добавив в Href соответствующий Url:

<a href="mailto:admin@ktonanovenkogo.ru">Написать письмо</a>

Напиши мне письмецо

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

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

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

Как открыть ссылку в новом окне (target blank)


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

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

В поисковиках мне тоже нравится настраивать открывание ссылок в новом окне, чтобы выдача всегда была под рукой и всегда можно было бы в нее вернуться. Для этих целей, как уже упомянул, в Html используется специальный атрибут Target, который по умолчанию имеет значение Self:

<a href="https://ktonanovenkogo.ru" target="_self">Откроет документ в этом же окне</a>

Хотя, конечно же, target=»_self» в теге «A» никто не прописывает, ибо это значение используется по умолчанию, а вот если нужно открыть страницу в новом окне, то нужно будет прописать target=»_blank»:


<a href="https://ktonanovenkogo.ru" target="_blank">Откроется в новом окне</a>

Прописан атрибут target=»_blank»

Обратите внимание, что значения атрибута Target пишутся со знаком подчеркивания вначале (_blank), ибо так оговорено в валидаторе Wc3, содержащем норы языка гипертекстовой разметки. Что примечательно, в Html предусмотрена возможность изменить вариант открытия ссылки принятый по умолчанию.

Например, если вы захотите, чтобы все гиперссылки вашего сайта открывались в новом окне, то нужно будет в области Head, используемого вами шаблона, прописать тег Base с атрибутом target=»_blank»:

<head> <base target="_blank"> что-то там еще </head>

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

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

Цвета гиперссылок при наведении и переходе — как их поменять

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

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

По умолчанию, в чистом Html (без использования свойств CSS) ссылки выделяются подчеркиванием и могут иметь три варианта цвета:

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

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

  1. Link — задается цвет не посещенной ссылки
  2. Alink — цвет активной в данный момент, которая отрабатывается браузером
  3. Vlink — цвет уже посещенной пользователем гиперссылки

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

<body link="#0000ee" alink="#ee0000" vlink="#800080">

Естественно, что здесь имелся в виду вариант чистого Html, когда по каким-либо причинам не удобно или не возможно использовать стилевое оформление, в противном случае все эти цвета можно будет легко задать и поменять с помощью CSS свойства Color.

ktonanovenkogo.ru

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

a  area  base  form

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

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

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

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

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

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

_blank

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

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

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

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

_self

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

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

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

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

_parent

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

_top

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

framename

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

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

_self

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

Кстати, я настраиваю отчеты, цели и события в системах Яндекс Метрика и Google Analytics.

Подробнее здесь. Обращайтесь.

A target blank

webgyry.info

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

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

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

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

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

«>

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

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

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

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

<a href="//goldbusinessnet.com/optimizatsiya-i-raskrutka-saita/ankor-ssylki-ssylochnoe-ranzhirovanie/">немного об анкорах</a>

А вот так та же HTML ссылка будет отображаться на веб-странице в браузере:

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

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

//goldbusinessnet.com/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

Таким образом, можно создать ссылку на скачивание файла, который запакован в архив:

<a href="//goldbusinessnet.com/downloads/subscribe-to-comments.zip">скачать</a>

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

скачать

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

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

<a href="ftp://goldbusinessnet.com/downloads/subscribe-to-comments.zip">скачать с сервера</a>

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

<a href="mailto:admin@goldbusinessnet.com">пишите письма</a>

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

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

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

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

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

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

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

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

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

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

По формату:

1. Текстовые — ссылки в виде слова, словосочетания или фрагмента текста

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

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

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

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

<a href="//goldbusinessnet.com/vazhnye-terminy-i-ponyatiya/kontekst-chto-eto-takoe/">Контекст — что это такое</a>

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

<a href="/vazhnye-terminy-i-ponyatiya/kontekst-chto-eto-takoe/">Контекст — что это такое</a>

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

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

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

Я решил предоставить вам страничку со спецификацией по тегу a в соответствии с версией HTML5, которую принимают все популярные браузеры (хотя на разных стадиях разработки уже находятся модификации 5.1 и 5.2 языка гипертекстовой разметки):

«>

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

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

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

Среди всех атрибутов тега a есть, например, rel, одно из значений которого nofollow предназначено исключительно для поисковых систем и позволяет настроить значимость ссылки. Вебмастера используют rel=»nofollow» для того, чтобы запретить роботам Яндекса и Google переходить по гиперссылкам и, соответственно передавать ее текст, PageRank и тИЦ.

Target blank — как открыть ссылку в новой вкладке

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

  • _blank — открывает страницу в новой вкладке браузера;
  • _self (значение по умолчанию) — открывает вебстраницу в текущей вкладке;
  • _parent — загружает страничку в родительский фрейм;
  • _top — этот параметр отменяет все созданные фреймы и загружает страницу в полном окне веб-браузера.

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

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

<a href="//goldbusinessnet.com/">Блог о создании сайтов</a>

и

<a target="_self" href="//goldbusinessnet.com/">Блог о создании сайтов</a>

Блог о создании сайтов

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

<a target="_blank" href="//goldbusinessnet.com/vazhnye-terminy-i-ponyatiya/kontekst-chto-eto-takoe/">Контекст — что это такое</a>

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

«>

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

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

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

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

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

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

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

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

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

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

У меня для каждой такой гиперссылки прописан еще и «target=»_blank»», поэтому эта же страничка будет открыта в новой вкладке, но уже на нужном месте. Это создает дополнительный комфорт для посетителей при изучении материала.

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

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

<h3 id="hash-lynk-anchor">Как формировать хеш-ссылки и якоря?</h3>

Отметив таким образом все нужные места в HTML коде, далее создаем гиперлинки на них. Для этого в конце после последнего слэша «/» в URL (являющегося, как вы уже знаете, значением атрибута href) прописываем последовательно знак решетки «#» и имя метки (ID):

<a href="//goldbusinessnet.com/osnovy-html/giperssylka-chto-eto-kak-sdelat-ssylku-html-href-target-blank-atributy-tega-a/#hash-lynk-anchor">Как формировать хеш-ссылки и якоря?</a>

Причем, если подобная якорная ссылка проставлена на той же странице, что и якоря, то часть урла до последнего слеша перед решеткой включительно может быть опущена и в качестве параметра href использованы только «#» плюс наименование ID (в сущности, это один из вариантов относительной ссылки):

<a href="#hash-lynk-anchor">Как формировать хеш-ссылки и якоря?</a>

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

<a href="#">Наверх</a>

Попробуйте нажать:

Наверх

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

Как убрать подчеркивание и изменить цвет ссылки

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

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

По умолчанию и без применения средств CSS гиперссылки выделены подчеркиванием и тремя вариантами цвета, каждому из которых соответствует свой атрибут для тега body:

  • link — задает цвет гиперлинка на вебстранице (по умолчанию синий, который в шестнадцатеричной системе обозначается #0000ff);
  • alink — цвет активной гиперссылки на тот промежуток времени, пока она обрабатывается веб-браузером (красный #ff0000);
  • vlink — цвет посещенной юзером ссылки (фиолетовый, #800080).

Как же заменить цвета ссылок, отображаемых браузерами для вашего сайта? Ну, для простого HTML-сайта, где странички формируются вручную (а полнофункциональных ресурсов такого рода в современных реалиях, думаю, практически не осталось, разве что простенькие дневники и лендинги) нужно просто найти открывающий тег <body> и прописать для него нужные параметры (кстати для обозначения цвета можно использовать и его название), например:

<body link="#8fffc7" vlink="66cdaa" alink="red">

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

Для большинства тем WordPress (тут о действиях с шаблонами WP, а тут об их структуре), например, это может header.php. Необходимо внимательно изучить фрагмент, относящийся к <body>. В современных темах там, скорее всего, указан код функции body_class(), которая выводит стилевое оформление всей страницы, включая гиперссылки:

<body <?php body_class(); ?>>

А в этом случае, увы, все сложнее. Простая вставка значений link, alink, vlink ничего не даст, надо будет еще отменить установленные стили для гиперссылок в файле style.css. Вот так.

Чтобы убрать нижнее подчеркивание, можно воспользоваться одним из универсальных HTML атрибутов style, который применяется как один из вариантов для подключения свойств CSS к HTML документу. В качестве его параметра нужно указать «text-decoration none»:

<a style="text-decoration:none" href="URL_страницы" target="_blank">текст анкора</a>

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

goldbusinessnet.com

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

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

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

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

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

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

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

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

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

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

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

Проверяем улучшенное решение: ссылка на главную, должна открыться в новом окне. Если всплывающие окна запрещены — ссылка откроется в этом же окне.

Выводы

Для открытия ссылки в новом окне вместо невалидного атрибута target рекомендуем применять JavaScript: onclick="return !window.open(this.href)".

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

xiper.net

Основы Html

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

План поста:

  1. Тег ссылки А – создаем гиперссылку в html документе с анкором и без него
  2. Открытие ссылки в новом окне. Атрибут target _blank
  3. Атрибут rel nofollow и тег noindex. Закрываем ссылку от индексации
  4. Ссылка якорь и как ее сделать. Атрибут Name

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

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

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

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

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

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

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

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

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

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

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

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

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

<a href=”//checho.ru”>Здесь должен быть текст Вашей гиперссылки, то есть анкор</a>

Как видите, ссылка начинается с открывающейся скобки «<», затем идет html тег A, после него должен быть обязательный атрибут href и знак равенства. Далее, следуют две скобки следующего типа – «”», между ними нужно указать URL адрес ссылающегося ресурса, при использовании «http://». Затем, нужно указать анкор ссылки и в конце концов закрыть тег ссылки А при помощи «</a>».

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

Безанкорная ссылка имеет следующий вид в html:

<a href=”//checho.ru”></a>

То есть, в тексте гиперссылки не используются символы, таким образом, она будет видна в интернет-браузере для пользователей, как http://checho.ru.

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

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

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

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

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

<a target=”_blank” href=”//checho.ru”>Текст ссылки</a>
или
<a href=”//checho.ru” target=”_blank”>Текст ссылки</a>

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

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

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

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

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

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

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

<a rel=”nofollow” href=”https://twitter.com/milanfan93”>Становитесь моим фолловером</a>

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

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

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

<noindex><a rel=”nofollow” href=”https://twitter.com/milanfan93>Становитесь моим фолловером</a></noindex>

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

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

checho.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Драматический накал

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

Автор: Chris Coyier

Источник: http://css-tricks.com/

Редакция: Команда webformyself.

A target blank

webformyself.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector