Как правильно оформить гиперссылку

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

Как должна выглядеть гиперссылка

Ссылка должна быть легко узнаваема. Ссылка должна быть синей или подчеркнутой, а лучше и синей и подчеркнутой, чтобы пользователь без наведения мыши понимал, что это — ссылка. Синие подчеркнутые ссылки — привычный людям стандарт. Кроме того, так советуют делать Артем Лебедев, Максим Ильяхов и Илья Бирман.

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

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

По данным опроса на Хабрабре 66.7% пользователей считают, что ссылки нужно подчеркивать.

Пользователи отмечают, какие ссылки им больше нравятся

Данные опроса на Хабрахабре

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

Плохо: Хорошо:
Оставить заявку на получение кредита вы можете у нас на сайте Оставить заявку на получение кредита вы можете на сайте КредитКафе

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

Читатель должен понимать, куда он попадет когда кликнет на ссылку. Да и стоит ли кликать вообще?

Плохо: Хорошо:
Как воспитывать детей по методу «пряник и отсутствие пряника»? Подробности читайте здесь Подробнее прочитать про новый метод воспитания детей вы можете в статье Ольги Петровой «Пряник и отсутствие пряника» 
Наше сообщество во «Вконтакте» — https://vk.com/myaso_ua  Официальное сообщество нашего интернет-магазина во «Вконтакте» — МЯСО. Молодежная одежда, обувь, аксессуары


Ссылки должны быть гармонично расставлены.
Читать текст, в котором подчеркнуто каждое второе слово, неудобно. Большое количество ссылок отвлекает читателя от самого текста. Если ссылок много — вносите их в конец материала.

Также старайтесь ставить ссылки в конец или начало приложения — так текст выглядит более аккуратным.

Плохо: Хорошо:
Лента американского режиссера Джоан Грац, получившая в 1992 году «Ос­кар», — один из самых знаменитых анимационных фильмов, оживляющих жи­вопись. Лента американского режиссера Джоан Грац, получившая в 1992 году «Ос­кар», — один из самых знаменитых анимационных фильмов, оживляющих жи­вопись.

Дополнительные материалы:
  • Джоан Грац — автор техники «Анимация, нарисованная пластилином»

  • О премии «Оскар»

  • Мультипликация как часть искусства


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

Плохо: Хорошо:
Благодаря гайду у меня стало получаться лучше
Долгое время не мог вылезти из низкого рейтинга. Прочитал гайд по Dota 2 — поднял MMR до 4k
Советы худеющим  Советы худеющим. Как похудеть за месяц до Нового Года? 


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

Допустимо: Хорошо:
Сбор отходов — процесс перемещения отходов от мусорообразователя до процесса вывоза отходов
Сбор отходов — процесс перемещения отходов от мусорообразователя (лица, образующего отходы) до процесса вывоза отходов


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

Плохо: Хорошо: 
На прошлой неделе мы писали про детский творческий конкурс. Теперь мы отобрали из их рисунков самые интересные
На прошлой неделе мы писали про детский творческий конкурс.Теперь мы отобрали из их рисунков самые интересные


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

Плохо: Хорошо: 
Подробнее про способы изучения английского самостоятельно вы можете прочитать в статье Алины Сидоровой.
Подробнее про способы изучения английского самостоятельно вы можете прочитать в статье Алины Сидоровой.


Не делайте многострочные ссылки.
Артем Горбунов на сайте своего дизайн-бюро советует не делать в тексте многострочные ссылки — из-за переноса слова получается логический разрыв. В таком случае пользователь может подумать, что перед ним несколько ссылок, а не одна. Также Артем советует группировать ссылки, если они расположены рядом и логически совместимы. Например, их можно вывести отдельным списком или в виде красиво оформленных горизонтальных блоков.

Используйте советы Артема Горбунова

Как группировать ссылки: советы Артема Горбунова

Как правильно ставить ссылку на почту

Стоит писать полный адрес текстом без уточнений, что это почта. Это делается ссылкой формата «mailto:admin@mail.ru».

Пишите на admin@mail.ru

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

Библиографические ссылки

Основные требования оформления библиографических ссылок предусмотрены национальными и межгосударственными стандартами, в том числе ГОСТ Р 7.0.5-2008, ГОСТ 7.1-2003, ГОСТ 7.82-2001.

Например:

Иванова Л. О. Развитие искусственного интеллекта. [Электронный ресурс] URL: http://artificialntelligence/fgd/6354 (дата обращения: 23.11.2017) 

Ссылки на юридические документы

Традиционная ссылка на статью состоит из подпункта, пункта, номера статьи и правового акта.

В краткой записи это выглядит так: «пп.12.3 п.3 ст.149 НК РФ».

Бюро Артема Горбунова и группа инициативных юристов предложили свой стандарт краткой записи ссылок на юридические документы: сначала идет ссылка на статью, потом — на пункты и подпункты.

В краткой записи ссылок слова «пункт» и «подпункт» заменяются на средние точки. Слово «статья» оставляют в сплошном тексте: «в соответствии со статьей 57 · 4 ТК». «РФ» к названиям кодексов и законов добавляют только в международных документах.

Юридическая ссылка «пп.9 п.3 ст.149 НК РФ» превращается в «149 · 3 · 9 НК». Ссылку будет легче прочитать и понять, текст останется юридически прочным.

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

Важную ссылку можно вынести на поля

ссылка на сайте Модульбанка

Подведем итоги

  • Ссылка должна быть легко узнаваема и не должна нарушать целостность текста

  • По тексту под ссылкой должно быть понятно, куда она ведет

  • Чем меньше ссылок — тем приятнее читать текст

  • Ссылка должна вызывать желание нажать на нее

  • Нельзя терять важные части ссылки: предлоги, союзы и дополнения

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