Ссылка - это как дверь. Если дверь выглядит как стена, никто не поймёт, что в неё можно войти. Поэтому у ссылок есть понятные правила: как они выглядят, как меняются при наведении и где открываются.
У ссылки есть три основных состояния: неактивная, активная и кликнутая. Неактивная -это обычная ссылка, которую ещё не открывали. Она должна быть подчёркнутой.
Активная ссылка - на которую навели курсор или нажали. Она должна быть без подчёркивания. Кликнутая - это ссылка, которую уже открывали раньше. Она тоже должна быть подчёркнутой.
Подчёркивание - самый простой и понятный признак ссылки. Если убрать его у обычной ссылки, пользователь может подумать, что это просто текст. Если убрать у кликнутой, он не отличит её от новой.
А вот в активном состоянии подчёркивание можно убрать, чтобы показать, что ссылка реагирует на действие. Важно не убирать подчёркивание у всех ссылок сразу. Браузеры из соображений приватности не позволяют сильно менять стиль посещённых ссылок. Поэтому лучше оставить подчёркивание по умолчанию, а убирать его только при наведении или нажатии.
У ссылок есть параметр target. Он говорит браузеру, где открывать ссылку. Если ссылка ведёт внутри сайта или страницы, она должна открываться в той же вкладке. Для этого используется target="_self".
Если ссылка ведёт на другой сайт, она должна открываться в новой вкладке. Для этого используется target="_blank". Внутренние ссылки - это переходы по вашему же сайту. Пользователю удобно оставаться в одной вкладке.
А внешние ссылки уводят с сайта. Если открывать их в той же вкладке, человек может потерять ваш сайт. Поэтому внешние ссылки лучше открывать отдельно. Но с target="_blank" есть важный нюанс безопасности. Добавляйте к таким ссылкам rel="noopener noreferrer". Это защищает сайт и пользователя.
Мало просто открывать внешние ссылки в новой вкладке. Пользователь должен заранее понимать, что сейчас уйдёт на другой сайт. Поэтому внешние ссылки нужно визуально отличать.
Можно добавить иконку со стрелочкой, например ↗, использовать другой цвет, сделать другой стиль подчёркивания или добавить подпись "откроется в новой вкладке". Лучше не полагаться только на цвет.
Ещё важно помнить несколько вещей. Не делайте ссылку похожей на обычный текст, иначе её просто не найдут. Не открывайте внутренние ссылки в новой вкладке, это раздражает. Предупреждайте о внешних ссылках, иконка или подпись помогают.
Не используйте только цвет, добавляйте подчёркивание, иконку или другой признак.
В итоге правила ссылок простые. Неактивная и кликнутая ссылка подчёркнуты. Активная ссылка без подчёркивания.
Внутренние ссылки открываются в той же вкладке. Внешние ссылки открываются в новой вкладке с target="_blank". Внешние ссылки визуально отличаются от внутренних. Для _blank добавляем rel="noopener noreferrer". Если соблюдать эти правила, сайт становится понятнее, безопаснее и удобнее. Пользователь всегда знает, где он находится, куда ведёт ссылка и что произойдёт после клика.
