Какие элементы являются ссылками

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

Рассмотрим представленный фрагмент макета. Давайте вместе определим, какие элементы на нем являются ссылками.

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

• Шапка: «О проекте», «Разместить компанию», «Вход для компаний».
• Центральная часть: «другое шоссе» (если это кнопка переключения), «по рубрикам» и «на карте» (вкладки), «на всем направлении» (если это якорная ссылка или кнопка фильтрации).
• Блок «Пиво»: Заголовок «40 видов пива» (возможно, ведет на список), изображение рядом (часто кликабельно и ведет на список/подраздел), «Пиво в подарок» (скорее всего, заголовок карточки товара/акции и/или кнопка).
• Блок «Новости»: 5 заголовков новостей (обычно кликабельны и ведут на страницу новости) и, возможно, соответствующие им изображения (тоже часто кликабельны).
• Баннер: Обычно кликабелен.
• Логотип: Обычно ведет на главную страницу.

Однако, как вы правильно отметили, это только первый взгляд. Важно различать визуальное оформление и семантическое значение элемента. Семантически корректный HTML подразумевает использование тегов по их прямому функциональному назначению.
Для определения того, является ли элемент ссылкой (a), нужно руководствоваться не только стилями (например, подчеркиванием), но и его функцией на странице:

Переходит ли элемент по адресу? Если href ведет на другой документ, якорь на той же странице, открывает email (mailto:), запускает телефон (tel:), или вызывает JavaScript-обработчик (javascript:), то это, по сути, ссылка.
Является ли элемент интерактивным элементом управления? Элементы button, input (кроме hidden), select, textarea и другие имеют свою функцию (отправка формы, ввод данных и т.д.) и не являются ссылками, даже если стилизованы под них. Для вкладок часто используют button или div/span с role=»tab» и обработчиками.
Используется ли элемент исключительно для навигации? Основные блоки навигации оборачивают в nav. Заголовки, которые кликаются и ведут на другую страницу (например, заголовок статьи в списке), могут быть ссылками (a), но тогда сама ссылка оборачивает весь кликабельный элемент (заголовок + возможно изображение и аннотация).
Является ли элемент просто декоративным или используется для стилизации? Тогда это не должна быть ссылка.

Обращение к спецификации HTML действительно важно для правильного выбора тега. Например, заголовок «40 видов пива» может быть просто h3, а кликабельной областью для перехода к списку — отдельная ссылка, возможно, обернутая в кнопку или просто a с соответствующим href.

A link is a connection from one Web resource to another.
…
The default behavior associated with a link is the retrieval of another Web resource.
…
By activating these links (by clicking with the mouse, through keyboard input, voice commands, etc.), users may visit these resources.

Основное назначение ссылки – обеспечить переход. Это может быть переход на другую веб-страницу или на определённый фрагмент текущей страницы. Следовательно, если нажатие на потенциальный элемент ссылки (например, на текст или кнопку) запускает JavaScript-функцию, которая переключает вкладки, открывает всплывающее окно или, к примеру, выделяет строки в таблице, то использовать тег a для такого элемента некорректно.
Возвращаясь к нашему анализу, предположим, что переключение вкладок «по рубрикам» и «на карте» должно происходить с помощью JavaScript. В таком случае становится понятно, что эти элементы не являются настоящими ссылками. Также уточнили, что клики по элементам «другое шоссе», «на всем направлении» и «вход для компаний» будут приводить к появлению различных всплывающих окон (хотя на изображении они не видны). Исходя из этого, количество действительных ссылок на макете существенно уменьшается:

Оформление активных элементов

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

Тут нужно использовать нейтральный тег, обычно div или span, смотря по тому нужен строчный или блочный элемент. Собственно, ограничений нет. Также это могут быть, например li, если это список или strong, если того требует SEO оптимизация.

Также таким элементам нужно добавлять следующее правило:

span{
	cursor:pointer
}

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

Обычный курсор — обычный текст!

А так поинтереснее! Видно, что что-то произойдет!

Поскольку на макете активные элементы оформлены аналогично ссылкам, логично предположить, что при наведении мыши подчеркивание должно пропадать:

span:hover{
	text-decoration:none
}

Тут нужно помнить, что наш любимый IE6 как всегда выделился. Псевдокласс :hover он понимает только для ссылок. Поэтому у пользователей этого браузера (а есть и такие) подчеркивание пропадать не будет. Тут у нас два варианта. Либо скромно упустить этот момент из вида, либо решить проблему скриптом.

В HTML активным элементам прописывается title — всплывающая подсказка:

<span title="поиск по рубрикам">по рубрикам</span>

Теперь активный элемент не отличишь от ссылки. Но только внешне!

Мы и сами так делаем

Рассмотрим еще один пример:

Меню — кладезь активных элементов. Ссылки тут только названия статей:

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

Плохой пример или как не надо делать

Если ты все еще используешь дедовские техники верстки, если тебе начихать на позиции в поисковиках, можешь конечно делать так: <a href=»javascript: void(0)» onclick=»[Вызов фукции]; return false»>

Если же ты за веб идеалы, у тебя современные взгляды на верстку и стандарты — используй связку «активный элемент + JavaScript во внешнем файле».

Выводы

Ссылки применяем там, где происходит переход на другую страницу либо на якорь в пределах текущей страницы. Там, где нажатие на что-то вызывает скрипт, используем нейтральный элемент, который оформляем как активный — в CSS прописываем ему cursor:pointer и :hover (если того требует макет), в HTML добавляем title и id.