Что такое гиперссылка – какие функции она выполняет и как ее правильно делать

Приватность

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

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

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

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

Но есть и невидимые сервисы, которые создаются с помощью

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

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

2017-04-04_235100.png

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

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

Как выглядят гиперссылки

Каждый человек, когда-либо читавший что-либо в Интернете, знаком с гиперссылками. Они выглядят как подчеркнутый текст синим шрифтом. Есть и другие окрасы, но очень редко. Каким-то образом было решено, что синий + подчеркнутый = ссылка.

Пример текста со ссылками

Бывают ли тексты без ссылок? Да, вполне. Но большинство статей в Интернете все же имеют ссылки, ведь они выполняют кучу полезных функций. Мы рассмотрим их, но сначала поговорим о типах ссылок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По своему охвату:

1. Внешние – ведут на страницы, расположенные за пределами сайта, на котором они расположены;

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

По формату:

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

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

По типу URL, который служит значением атрибута href:

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

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

Контекст — что это

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

Контекст — что это

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

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

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

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

2017-04-08_135541.png

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

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

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

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

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

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

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

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

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

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

Контекст — что это

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

2017-04-07_171613.png

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

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

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

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

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

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

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

Читайте также: 800+ японских ников: женские, мужские, красивые, значения, необычные, редкие, из аниме, символы

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

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

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

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

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

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

Как формировать хеш-ссылки и якоря?

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

Как генерировать хэш-ссылки и анкоры?

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

Как генерировать хэш-ссылки и анкоры?

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

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

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

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

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

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

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

Так как же изменить цвета ссылок, отображаемых браузерами для вашего сайта?

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

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

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

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

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

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

Как сделать картинку ссылкой в HTML

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

В результате изображение становится кликабельным и ведет на соответствующую страницу:

золото-8.png

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

2017-04-09_121648.png

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

2017-04-09_122030.png

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

Типы ссылок

Давайте выясним, какие типы гиперссылок существуют.

Внешние и внутренние

Внешние ссылки — это ссылки на другие веб-сайты. Например, если я сделаю ссылку на магазин Ozon в статье на сайте vsvoemdome.ru, она будет внешней.

Внутренние — ссылки на другие материалы на той же странице. Здесь я сейчас создаю ссылку на статью о конверсии. Если вы нажмете на нее, вы окажетесь на другой странице на той же странице.

Открывающиеся в новой вкладке или в уже открытой

Все ссылки обычно открываются в новой вкладке. То есть, когда человек нажимает на гипертекст, открывается как бы новая страница, а старая остается рядом. Если сейчас перейти по ссылке на статью о КПК, она откроется вот так:

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

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

Лайфхак — как открывать ссылки в новом окне

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

Вы также можете щелкнуть ссылку правой кнопкой мыши и выбрать «Открыть в новой вкладке».

Но это долго и нудно. Лучше просто щелкнуть колесиком мыши.

Открытые и закрытые

Ссылки могут быть «открытыми для индексации» и закрытыми. Для обычного читателя это ничего не значит, но для веб-мастера это значит очень многое. Если ссылка «закрыта», вебмастер снимает с себя ответственность за содержание ресурса, на который он ссылается.

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

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

Что веб-мастера пишут в коде для ссылок

Любая ссылка в HTML-коде выглядит так:

Ссылка в HTML-коде

Давайте посмотрим, что здесь.

Код «target=»_blank»» означает, что ссылка открывается в новом окне.

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

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

не открывающий

«CPA» или «конверсия» — это слова, под которыми нужно «спрятать» ссылку. Их называют «якорями».

Анкор — это текст, под которым скрыта ссылка на веб-странице. Обычно он выделен синим цветом и подчеркнут.

Какие функции выполняют ссылки

Давайте проанализируем преимущества ссылок для читателей и для самого владельца сайта.

Польза для читателя

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

Некоторые читатели могут этого не понять. Я, конечно, вкратце объясню, что это значит, а заодно и ссылку на статью про конверсию дам. Чтобы читатель мог прочитать и наверняка все понял.

Польза для веб-мастера

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

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

Среди поведенческих факторов особенно важны два: время пребывания на объекте и переработка. Переработка только внутренних переходов сайта.

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

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

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

Но если читатель прочитал мою статью, но потом вернулся к поиску и прочитал еще несколько текстов, значит, я не полностью ответил на его вопрос, не решил его проблему. Следовательно, моя статья не очень качественная, в ТОПе ей делать нечего.

Как ссылки влияют на авторитет сайта

Представьте ситуацию. Два сайта. По одному предмету. С абсолютно идеальными материалами, хорошим дизайном и т.д. Какую сторону ставить в первый ряд, а какую во второй?

Чтобы решить эту проблему, крупные поисковые компании (в первую очередь Google) решили посмотреть, сколько сайтов ссылается на анализируемый веб-проект.

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

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

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

Оцените статью
Блог про Вконтакте
Adblock
detector