Гиперссылка

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

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

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

Ссылка и её внешний вид

Классическая ссылка выглядит как текст, выделенный по умолчанию синим цветом (RGB: #0000FF). При наведении курсора у неё появляется подчёркивание (по умолчанию) или временно меняется цвет. При этом в левом нижнем углу браузера должен отобразиться адрес, на который ссылается гиперссылка:

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

У стандартной ссылки имеется 4 состояния:

1. Без наведения. По умолчанию текст синего цвета (в некоторых браузерах с подчёркиванием).
2. При наведении курсора. По умолчанию выделяется подчёркиванием (в некоторых браузерах подчёркивание, наоборот, исчезает) и формой курсора, который превращается в руку с вытянутым указательным пальцем. Кроме того, во всплывающем окошке может появиться какое-нибудь пояснение к ссылке, если оно прописано в специальном атрибуте title.
3. При нажатии. По умолчанию пока на ссылке удерживается курсор с зажатой левой клавишей мыши, ссылка окрашивается в оранжевый цвет (RGB: #EE0000).
4. Уже посещённая ранее ссылка. По умолчанию, если Вы уже ранее нажимали на ссылку, она окрашивается в фиолетовый цвет (RGB: #551A8B).

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

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

Куда ведёт ссылка

Итак, при наведении на гиперссылку мы видим адрес, на который она ссылается. К примеру, адрес страницы с этой статьёй будет следующим: https://www.bestfree.ru/article/internet/link.php. Разберёмся, из чего он состоит и что значит:

• https:// (сокр. англ. HyperText Transfer Protocol Secure) – протокол, по которому доступен веб-ресурс (в браузерах также работают протоколы http (протокол передачи гипертекста без шифрования) и ftp (протокол передачи файлов));
• www.bestfree.ru – доменное имя, запрашиваемого веб-ресурса (может быть без WWW, но всегда ведёт на главную страницу сайта);
• /article/internet/ – структура папок, в которой расположен запрашиваемая в адресе конечная точка веб-ресурса;
• link.php – имя запрошенной в адресе страницы, документа или файла.

В нашем примере, получается, что мы хотим получить доступ к странице (файлу) "link.php", которая лежит в папках "/article/internet/" на сайте "www.bestfree.ru" по защищённому протоколу передачи гипертекста "https://". Для современных сайтов на базе некоторых движков (особенно блогового характера) распространённой является практика виртуальной адресации без указания имени запрашиваемого документа. То есть, адреса типа: http://site.name/category/page-name/, где "category" указывает на виртуальный раздел сайта, а "page-name" на уникальный идентификатор нужной страницы в базе данных.

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

При этом внутренние ссылки могут работать даже в рамках одной страницы, быстро перенаправляя наше внимание на определённые её разделы. Такие ссылки носят название "якорь" и часто используются в оглавлениях к длинным статьям. Визуально они отличаются тем, что после адреса у них имеется символ "#" и уникальный идентификатор блока, на который ссылается якорь. Например, вот якорь для текущего раздела статьи: https://www.bestfree.ru/article/internet/link.php#address:

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

Как раз данный тип ссылок может представлять наибольшую опасность, поскольку мы не можем сразу определить, куда попадём в итоге. Непрямые ссылки часто используются различными злоумышленниками для перевода пользователей на фейковые фишинговые веб-ресурсы или для скрытой раздачи вирусного ПО.

К сожалению, заранее однозначно определить непрямую ссылку невозможно, однако, часто для их создания прибегают к сервисам сокращения ссылок. И вот, зная адреса самых популярных "сокращалок", Вы уже можете отличить нормальный линк от подозрительного. Правда, и здесь не всё так однозначно. Короткие ссылки часто используются в соцсетях, как их часть (например, сервис vk.cc Вконтакте) или вынужденная мера (например, сокращение ссылок для соответствия лимита символов в Twitter). Вот примеры нескольких популярных сервисов коротких ссылок:

• https://vk.com/cc;
• https://bitly.com/;
• http://tinyurl.com/;
• https://goo.gl/;
• https://clck.ru/;
• https://shorte.st/ru/;
• http://lmgtfy.com/;

Кстати, наряду с сервисами сокращения ссылок, существуют и сервисы их обратной дешифровки. Такие сервисы позволяют предварительно получить нормальный адрес ссылки и проверить, не ведёт ли укороченный линк на какую-нибудь "гадость". Хорошим примером подобного сервиса можно назвать LongUrl.info, который доступен как онлайн, так и в виде расширения для Google Chrome и Opera:

Последнее, что ещё нужно знать о ссылках, так это то, что есть специальные виды линков, которые могут ссылаться не только на веб-странички и файлы. Ярким примером могут служить почтовые ссылки на E-Mail, нажатие которых запускает почтовую программу и автоматически создаёт письмо с заданными в ссылке параметрами, такими как адрес получателя, тема сообщения, копии рассылки и т.п. Отличить почтовую ссылку от остальных позволяет указание протокола "mailto:" и наличие адреса электронной почты:

Кроме почтовых существует ещё ряд специальных ссылок, например:

1. Ссылка на номер телефона. Имеет вид "tel:+71234567890" (цифры номера будут меняться) и, будучи нажатой на мобильном телефоне, автоматически откроет приложение для совершения звонков с набранным номером, указанным в ней.
2. Ссылка на Скайп. Имеет вид "skype:username?call" (меняется имя пользователя "username") и позволяет автоматически открыть Skype (если он установлен) для связи с нужным абонентом.
3. Ссылка на Viber. Имеет вид "viber:add?number=+71234567890" (меняется номер телефона) и позволяет совершить звонок с мобильного на Viber.
4. Ссылка на Telegram. Имеет вид "tg://resolve?domain=username" (меняется имя пользователя "username") и позволяет запустить Telegram чтобы перейти к диалогу с нужным пользователем.
5. Magnet-ссылка. Имеет вид "magnet:ws=link-to-file" и применяется для организации раздачи файлов в пиринговых сетях. В нашем примере приведён стандартный вид magnet-ссылки, которая запускает torrent-клиент и позволяет скачать файл, зашифрованный в её адресе, через сеть BitTorrent.

Ссылки с параметрами

Средняя длина адреса ссылки в соответствии с рекомендациями специалистов должна укладываться в 60 символов. Однако, часто можно встретить довольно длинные ссылки с кучей, на первый взгляд, непонятных символов в конце. Если Вы встретили подобный линк, то знайте, что, скорее всего, он содержит ряд параметров. Параметры указываются всегда после основного адреса и отделяются от него знаком вопроса (?), а между собой объединяются при помощи символа амперсанда (&):

Параметры позволяют передавать сторонним веб-ресурсам какие-либо данные. Если рассмотреть ссылку со скриншота выше, то мы можем выделить в ней два параметра, которые передаются в Facebook на страницу sharer.php. Параметр "u" содержит закодированную специальным образом ссылку на страницу, которой мы хотим поделиться, а параметр "t" несёт в себе её краткое описание.

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

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

Имеются и примеры, так сказать, нейтрального использования параметров. Все они обычно связаны с идентификацией пользователя или определением его связи с другими пользователями. Ярким примером могут служить так называемые реферальные ссылки. Они часто используются для регистрации пользователей на многих сервисах и выступают в роли своеобразных пригласительных билетов. Обычно они содержат параметр "ref" или "partner", который указывает на имя или идентификатор пользователя, давшего Вам такую ссылку:

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

Атрибуты ссылки

Мы уже многое узнали о ссылках, но, думаю, для полноты картины не помешало бы копнуть немного глубже и ознакомиться с тем, как прописываются ссылки в HTML-коде веб-страниц. Сама ссылка задаётся парным тегом <a>, которым обрамляется любое слово, блок информации или картинка, видимые на странице. Однако, сам по себе тег ничего не определяет, а ссылка на нужную страницу, заголовок и способ перехода задаются при помощи его дополнительных атрибутов. Например:

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

1. _blank. Этот вариант атрибута target позволяет открыть ссылку в новой вкладке или окне (если вкладки не поддерживаются) браузера. Принудительно аналогичного эффекта можно добиться, кликнув по ссылке колёсиком мыши или выбрав в контекстном меню пункт "Открыть в новой вкладке".
2. _self. Данное значение открывает ссылку в текущей вкладке вместо текущей страницы. Кстати, если атрибут target явно не задан, то любая ссылка в большинстве браузеров интерпретируется по умолчанию именно как _self.
3. _parent. Это значение актуально при использовании на сайте фреймовой структуры. В этом случае ссылка открывается в родительском фрейме, в котором была нажата. Если же на сайте фреймов нет, то данное значение обрабатывается браузером так же как и _self.
4. _top. Этот вариант значения target также связан с фреймами. Если они есть, то страница по ссылке откроется вне фреймовой структуры поверх всех остальных фреймов во всё окно браузера. Если же фреймов нет, то, по аналогии с _parent, обрабатываться ссылка будет как _self.

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

Все ссылки без "nofollow" являются по умолчанию открытыми и индексируются поисковыми роботами. Однако, иногда некоторые веб-мастера пытаются инициировать принудительную индексацию, добавляя конструкцию rel="dofollow". На самом деле такого значения спецификацией W3C не предусмотрено, поэтому особого результата можно не ждать...

Последним атрибутом ссылки может быть title. Этот атрибут задаёт текст всплывающей подсказки, которая появляется при наведении на линк. Title задавать необязательно, однако, для улучшения юзабилити и SEO-показателей весьма желательно.

Есть ещё пара нюансов. Если на странице используются ссылки-якоря, то здесь же будут обязательно присутствовать и специальные ссылки-указатели. Они имеют только один параметр "id" (или в устаревшей спецификации "name"), который соответствует значению, заданному в якоре, и просто служат ориентиром для перехода к нужному месту на странице. Например:

Кроме того, как и многие другие HTML-теги, ссылки могут дополнительно иметь атрибут style, позволяющий изменять их внешний вид при помощи CSS-стилей и ряд других редко применяемых атрибутов (download, media, hreflang, type и т.п.).

Выводы

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

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

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.