
Знакомая ситуация? С приходом новых технологий и стандартов представления информации возникла одна большая проблема: безграничная свобода в оформлении элементов, которой злоупотребляют веб-дизайнеры, запутывая бедных пользователей.
Так как же с этим быть?
Немного истории
Когда-то давным-давно в веб-дизайне всё было очень просто. Ещё не было широко распространено использование CSS, цветов на сайтах было максимум шестнадцать, ссылки всегда подчеркивались и всё, что они могли — направить вас на другую страницу, отослать почту либо перейти к другому месту на странице.
Но внутренняя тяга к прекрасному и развитие технологий привели к распространению формата CSS. Сайты постепенно начали выглядеть всё сложнее, и теперь, фактически, с помощью каскадных таблиц стилей можно любой элемент страницы заставить выглядеть как угодно.
Внешний вид ссылок
Возьмем, к примеру, обычную ссылку, появившуюся еще на заре интернета: Старая добрая ссылка Да, вы уже все ее узнали — та самая привычная ссылка, от которой всегда знаешь, чего ждать, и которая всегда поддержит в трудный момент. Одна беда, разгуляться было негде, и максимум чего можно было добиться — использовать разные начертания шрифта и цвет.Что же ссылка может представлять из себя сегодня? Да все что угодно! Масса вариантов, тысячи их…

Это волшебное слово «семантика»
В целом, cемантика — раздел языкознания, изучающий значение единиц языка, а применительно к HTML-разметке — совокупность смысловых отношений, возникающих в документе.
Если исходить из того, что ссылка ведет на документ (место в документе, сайт), то текстовая формулировка (якорь) ссылки должна быть существительным. И тем не менее, очень часто ссылки оформляют по-разному и используют в любых качествах, просто потому, что это будет работать.
Наиболее распространенным примером является изображение ссылок в виде кнопок, использование глагола в якоре ссылки. Применять один элемент для решения всех задач, конечно, удобно, но семантически неверно…

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

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

Здесь же для вызова выпадающих и всплывающих окон используются элементы span, что верно семантически — ведь фактической ссылки и перехода к объекту не происходит. Имена или сущности у этих элементов соответствующие — «Добавить», «Обновить» или «Отметить» — совершение определенного действия.
Такие разные ссылки
Еще один из животрепещущих вопросов в мире ссылок — подчеркивание.
Должна ли ссылка всегда быть подчеркнутой? Нет. Утверждение, что без подчеркивания пользователь не разберется, что это ссылка, не совсем верно. Помочь разобраться в этом — задача дизайна, и если он с этим не справляется, то и к ссылкам нет претензий.
«А еще я видел ссылки подчеркнутые, но не совсем!» — скажете вы.
Да, с приходом технологии AJAX и расширяющимися возможностями JavaScript и CSS ссылки обросли многими новыми функциями. Так, стали применяться псевдо-ссылки. Ссылки, нажатие на которые не приводит к перезагрузке страницы, и которые в дизайне показываются пунктирным подчеркиванием — стилем dashed или dotted.Примеры необычного функционала ссылок:
Аnchor-навигация
За примерами реализации подобного решения далеко ходить не нужно. Такая схема применяется в Facebook и многих сервисах Google.Популярная технология “lightbox”
Она улучшает и расширяет стандартные функции элемента, в данном случае — совершенствует вывод информации «пункта назначения ссылки» во всплывающем окнеЛирическое отступление
Кнопки
Как вы уже заметили, в современном веб-дизайне стирается грань в визуальном различии между кнопкой и ссылкой.
Семантически кнопки предназначены для обмена данными: отправки какой-либо информации на сервер или загрузки ее на страницу. Другими словами — функционал для вызова обработки данных.
Например:
В кнопку можно вкладывать блочные и встроенные HTML-элементы, за исключением a, input, select, textarea, label, button, form, что семантически существенно отличает ее от ссылки.
Так что же использовать?
Несмотря на то, что технологически ссылку можно заставить выглядеть и работать как угодно, не стоит нарушать логики ее использования и изначального предназначения элемента.
Кнопки должны запускать, ссылки — перенаправлять, а псевдо-ссылки — показывать дополнительный контент или функционал.
Конечно, данная заметка не затронула всех нюансов, проблем и частных случаев, но о них я предлагаю продолжить обсуждение в комментариях.