Гипертекстовая ссылка (или просто ссылка) является одной из базовых конструкций гипертекста и служит для связи одного веб-ресурса с другим.

Все прекрасно знают, что такое ссылка и как ее поставить в HTML. (Желающие могут освежить свои знания в первоисточнике: HTML 4.01 Specification: Links.) Но, к сожалению, часто встречаются примеры неправильного использования ссылок и применения их не к месту.

Пример 1. Открываем новые окна

Рассмотрим простой пример открытия формы обратной связи в новом окне. Часто встречается такой вариант:

<a href="#" onclick="popup('/feedback/', 562, 600, 'feedback'); return false;">
 Форма обратной связи
</a>

Он имеет следующие недостатки:

1. Новое окно открывается только при условии, что браузер пользователя поддерживает скрипты, написанные на JavaScript, и эта поддержка включена. Пользователь, у которого JavaScript не работает, перейдет по ссылке, указанной в атрибуте href. При этом в адресной строке браузера к адресу текущей страницы в конце добавится символ решетки (#). Обещанную форму обратной связи пользователь без JavaScript не увидит, если только не подсмотрит адрес в исходном коде.
2. При наведении указателя мыши на такую ссылку в статусной строке браузера пользователь видит [URL текущей страницы]# (например, http://www.somesite.com/#), вместо того, чтобы увидеть там реальный адрес (например, http://www.somesite.com/feedback/), который зачастую помогает пользователю понять, хочет он переходить к ней или нет.
3. Если пользователь нажмет на ссылке правую кнопку мыши и затем выберет «Открыть в новом окне», то он снова попадет на [URL текущей страницы]# и будет долго ругать разработчиков сайта.
4. Робот поисковой системы, так же как и пользователь с браузером без JavaScript, не сможет попасть на страницы, ссылки на которые поставлены таким образом, и, разумеется, не сможет их проиндексировать. Например, Googlebot переходит только по ссылкам указанным в атрибутах href и src.

К слову, ситуация с неработающей в пользовательском браузере поддержкой JavaScript не так уж и надумана. Во-первых, браузер может в принципе не поддерживать JavaScript, либо поддерживать не полностью (например, старые или экспериментальные, никому не известные браузеры). Во-вторых, пользователь может отключить JavaScript в настройках браузера (нередко так делают посетители «сайтов для взрослых» для предотвращения неуправляемого открытия новых окон, редиректов и т. п.). Наконец, даже при работающем JavaScript в браузере может произойти ошибка из-за некорректного скрипта.

Попробуем разобраться, откуда появилась «традиция» ставить один-единственный символ решетки у ссылки в атрибуте href при обработке события onclick. Для того чтобы ссылка стала «кликабельной», у нее обязательно прописывается атрибут href. Но если оставить href пустым, то MSIE интерпретирует ее как ссылку на текущую директорию. Например, если страница имеет адрес /folder/page.html, то href="" внутри такой страницы ссылается на /folder/. Остальные браузеры интерпретируют пустой href как ссылку на текущую страницу. В обоих случаях при клике на ссылку происходит перезагрузка страницы. Чтобы этого избежать, можно воспользоваться так называемым «якорем», т. е. ссылкой на элемент внутри контента страницы. Фактически, код <a href="#"> означает, что мы поставили якорь, но забыли указать идентификатор фрагмента страницы, на который должен ссылаться якорь.

Другим часто встречающимся вариантом является использование протокола javascript:, например, href="javascript:void(0)" или href="javascript://". Данный протокол говорит браузеру, что при нажатии на ссылку нужно запустить интерпретатор JavaScript вместо инициации HTTP-запроса (действия по умолчанию). Функция void(expression) вычисляет значение expression, но ничего не возвращает. // означает символ комментария. Как видите, в обоих случаях ничего не делается. Очевидно, что варианту с протоколом javascript: свойственны те же проблемы, что и в варианте с символом решетки.

Исправить ситуацию можно в три приема:

1. Прописать в атрибуте href вместо # реальный адрес страницы.
2. Добавить атрибут target, чтобы у пользователей без JavaScript страница тоже открывалась в новом окне, причем именованном. К имени окна лучше добавить идентификатор сайта, чтобы разные сайты открывали окна с разными именами. Иначе страница может открыться в окне, где ранее была открыта похожая страница с другого сайта, и при этом пользователь не заметит подмены.
3. В вызове функции popup() параметры, в которых передаются адрес страницы и название окна, заменить соответственно на this.href и this.target.

<a href="/feedback/" target="oursite_feedback"
 onclick="popup(this.href, 562, 600, this.target); return false;">
 Форма обратной связи
</a>

Заметим однако, что атрибут target отсутствует в спецификации HTML Strict, поэтому не следует его использовать, если вы объявили «стандартный режим» на вашем сайте.

Пример 2. Показываем большие картинки

Задача: показать большие картинки поверх основного контента.

Пример взят с сайта Санкт-Петербурга
Фото Александра Ярославцева

Пример взят с сайта Санкт-Петербурга
Фото Александра Ярославцева

Не будем углубляться в детали скрипта, остановимся лишь на том, как поставить ссылку на большую картинку. Часто делают так:

<a href="#" onclick="show('1'); return false;">
 <img src="/i/small.jpg" width="134" height="145" border="0" />
</a>

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

Исправляем ситуацию следующим образом — явно прописываем ссылку на большую картинку в атрибуте href:

<a href="/i/big.jpg" onclick="show('1'); return false;">
 <img src="/i/small.jpg" width="134" height="145" border="0" />
</a>

Нет ничего страшного в том, что у пользователей без JavaScript большая картинка откроется в том же окне и не так как было задумано (т. е. не поверх контента). Главное, что они смогут ее увидеть. Лучше что-то, чем вообще ничего.

И согласитесь, что гораздо приятнее при наведении указателя мыши на ссылку видеть в статусной строке /i/big.jpg, нежели ничего не говорящие символ решетки или протокол javascript:. А что произойдет при нажатии на ссылку, можно предположить еще до нажатия.

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

Пример 3. Когда ссылка не нужна

Обратим внимание на то, как в предыдущем примере сделано закрытие большой картинки. Часто делают так:

<a href="#" onclick="close('1'); return false;">
 <img src="/i/close.gif" width="17" height="17" border="0" alt="Закрыть" />
</a>

В данном случае нет ресурса, на который можно было бы поставить ссылку, т. к. при клике на крестик просто скрывается большая картинка. Если ссылку поставить не на что, то зачем ее использовать? Многие делают это для того, чтобы при наведении указатель мыши принимал форму руки. Можно ли сделать то же самое без ссылки? Ответ — можно и нужно.

Одним из признаков хорошей HTML-верстки является использование элементов согласно их семантике (смыслу), а не внешнему виду в браузере. В данном же примере ссылка используется только для презентационных целей, и поэтому от нее следует избавиться.

Исправить ситуацию можно следующим образом:

1. Убрать ссылку.
2. Обработчик события onclick прописать непосредственно у самой картинки с крестиком.
3. Прописать у картинки стили для курсора: style="cursor: pointer; cursor: hand;" (для наглядности стили указаны inline в атрибуте style; на реальном сайте, конечно, их лучше вынести в класс).

<img src="/i/close.gif" width="17" height="17" border="0" alt="Закрыть"
 style="cursor: pointer; cursor: hand;"
 onclick="close('1'); return false;" />

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