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

Так как же с этим быть?

Немного истории

Когда-то давным-давно в веб-дизайне всё было очень просто. Ещё не было широко распространено использование CSS, цветов на сайтах было максимум шестнадцать, ссылки всегда подчеркивались и всё, что они могли — направить вас на другую страницу, отослать почту либо перейти к другому месту на странице.

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

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

Внешний вид ссылок

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

Что же ссылка может представлять из себя сегодня? Да все что угодно! Масса вариантов, тысячи их…

Многоликая ссылка сегодня

Это волшебное слово «семантика»

В целом, cемантика — раздел языкознания, изучающий значение единиц языка, а применительно к HTML-разметке — совокупность смысловых отношений, возникающих в документе.

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

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

Каноничный веб-дизайнер Лентяев

Для наглядности обратим внимание на использование элементов a и span в почтовом сервисе Gmail:

Навигация между разделами почты сервиса Gmail

Для перехода по разделам, хоть они и происходят без фактической перезагрузки страницы, используется элемент a. Названия ссылок: «Входящие», «Отправленные» и тд. — существительные.

Элементы управления письмами и навигацией

Здесь же для вызова выпадающих и всплывающих окон используются элементы span, что верно семантически — ведь фактической ссылки и перехода к объекту не происходит. Имена или сущности у этих элементов соответствующие — «Добавить», «Обновить» или «Отметить» — совершение определенного действия.

Такие разные ссылки

Еще один из животрепещущих вопросов в мире ссылок — подчеркивание.

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

«А еще я видел ссылки подчеркнутые, но не совсем!» — скажете вы.

Да, с приходом технологии AJAX и расширяющимися возможностями JavaScript и CSS ссылки обросли многими новыми функциями. Так, стали применяться псевдо-ссылки. Ссылки, нажатие на которые не приводит к перезагрузке страницы, и которые в дизайне показываются пунктирным подчеркиванием — стилем dashed или dotted.

Примеры необычного функционала ссылок:

Аnchor-навигация

За примерами реализации подобного решения далеко ходить не нужно. Такая схема применяется в Facebook и многих сервисах Google.

Популярная технология “lightbox”

Она улучшает и расширяет стандартные функции элемента, в данном случае — совершенствует вывод информации «пункта назначения ссылки» во всплывающем окне

Лирическое отступление

Кнопки

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

Семантически кнопки предназначены для обмена данными: отправки какой-либо информации на сервер или загрузки ее на страницу. Другими словами — функционал для вызова обработки данных.

Например:
Форма входа на главной странице Твиттера как бы говорит нам, что нажав на кнопку, мы отправим свои данные для входа в сервис.
Хозяйке на заметку

В кнопку можно вкладывать блочные и встроенные HTML-элементы, за исключением a, input, select, textarea, label, button, form, что семантически существенно отличает ее от ссылки.

Так что же использовать?

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

Кнопки должны запускать, ссылки — перенаправлять, а псевдо-ссылки — показывать дополнительный контент или функционал.

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