![]() |
Степан Резников
15 февраля 2006 |
|
Гипертекстовая ссылка (или просто ссылка) является одной из базовых конструкций гипертекста и служит для связи одного веб-ресурса с другим.
Все прекрасно знают, что такое ссылка и как ее поставить в HTML. (Желающие могут освежить свои знания в первоисточнике: HTML 4.01 Specification: Links.) Но, к сожалению, часто встречаются примеры неправильного использования ссылок и применения их не к месту.
Рассмотрим простой пример открытия формы обратной связи в новом окне. Часто встречается такой вариант:
|
Он имеет следующие недостатки:
href
. При этом в адресной строке браузера к адресу текущей страницы в конце добавится символ решетки (#
). Обещанную форму обратной связи пользователь без JavaScript не увидит, если только не подсмотрит адрес в исходном коде.[URL текущей страницы]#
(например, http://www.somesite.com/#
), вместо того, чтобы увидеть там реальный адрес (например, http://www.somesite.com/feedback/
), который зачастую помогает пользователю понять, хочет он переходить к ней или нет.[URL текущей страницы]#
и будет долго ругать разработчиков сайта.href
и src
.К слову, ситуация с неработающей в пользовательском браузере поддержкой JavaScript не так уж и надумана.
Попробуем разобраться, откуда появилась «традиция» ставить один-единственный символ решетки у ссылки в атрибуте href
при обработке события onclick
. Для того чтобы ссылка стала «кликабельной», у нее обязательно прописывается атрибут href
. Но если оставить href
пустым, то MSIE интерпретирует ее как ссылку на текущую директорию. Например, если страница имеет адрес /folder/page.html
, то href=""
внутри такой страницы ссылается на /folder/
. Остальные браузеры интерпретируют пустой href
как ссылку на текущую страницу. В обоих случаях при клике на ссылку происходит перезагрузка страницы. Чтобы этого избежать, можно воспользоваться так называемым «якорем», т. е. ссылкой на элемент внутри контента страницы. Фактически, код
означает, что мы поставили якорь, но забыли указать идентификатор фрагмента страницы, на который должен ссылаться якорь.
Другим часто встречающимся вариантом является использование протокола javascript:
, например, href="javascript:void(0)"
или href="javascript://"
. Данный протокол говорит браузеру, что при нажатии на ссылку нужно запустить интерпретатор JavaScript вместо инициации HTTP-запроса (действия по умолчанию). Функция void(expression)
вычисляет значение expression
, но ничего не возвращает. //
означает символ комментария. Как видите, в обоих случаях ничего не делается. Очевидно, что варианту с протоколом javascript:
свойственны те же проблемы, что и в варианте с символом решетки.
Исправить ситуацию можно в три приема:
href
вместо #
реальный адрес страницы.target
, чтобы у пользователей без JavaScript страница тоже открывалась в новом окне, причем именованном. К имени окна лучше добавить идентификатор сайта, чтобы разные сайты открывали окна с разными именами. Иначе страница может открыться в окне, где ранее была открыта похожая страница с другого сайта, и при этом пользователь не заметит подмены.popup()
параметры, в которых передаются адрес страницы и название окна, заменить соответственно на this.href
и this.target
.
|
Заметим однако, что атрибут target
отсутствует в спецификации HTML Strict, поэтому не следует его использовать, если вы объявили «стандартный режим» на вашем сайте.
Задача: показать большие картинки поверх основного контента.
Не будем углубляться в детали скрипта, остановимся лишь на том, как поставить ссылку на большую картинку. Часто делают так:
|
Проблемы, как вы понимаете, те же, что и в первом примере: пользователи без JavaScript не могут увидеть большую картинку, при этом все пользователи видят в статусной строке непонятную решетку и не могут открыть большую картинку в новом окне.
Исправляем ситуацию следующим образом — явно прописываем ссылку на большую картинку в атрибуте href
:
|
Нет ничего страшного в том, что у пользователей без JavaScript большая картинка откроется в том же окне и не так как было задумано (т. е. не поверх контента). Главное, что они смогут ее увидеть. Лучше
И согласитесь, что гораздо приятнее при наведении указателя мыши на ссылку видеть в статусной строке /i/big.jpg
, нежели ничего не говорящие символ решетки или протокол javascript:
. А что произойдет при нажатии на ссылку, можно предположить еще до нажатия.
Лирическое отступление |
Для интернет-магазина наличие большой и красивой фотографии продукта является одной из главных составляющих успешной продажи продукта. Странно, что многие интернет-магазины, размещая большие фотографии продуктов, совершенно не заботятся об их доступности (accessibility). Например, Ozon.ru для показа большой фотографии продукта использует |
Использовать JavaScript в ссылках можно лишь для добавления на страницы спецэффектов (интерактивности, избавления от ненужных перезагрузок страницы и т. д.). При отключении спецэффектов функциональность должна оставаться.
Обратим внимание на то, как в предыдущем примере сделано закрытие большой картинки. Часто делают так:
|
В данном случае нет ресурса, на который можно было бы поставить ссылку, т. к. при клике на крестик просто скрывается большая картинка. Если ссылку поставить не на что, то зачем ее использовать? Многие делают это для того, чтобы при наведении указатель мыши принимал форму руки. Можно ли сделать то же самое без ссылки? Ответ — можно и нужно.
Одним из признаков хорошей HTML-верстки является использование элементов согласно их семантике (смыслу), а не внешнему виду в браузере. В данном же примере ссылка используется только для презентационных целей, и поэтому от нее следует избавиться.
Исправить ситуацию можно следующим образом:
onclick
прописать непосредственно у самой картинки с крестиком.style="cursor: pointer; cursor: hand;"
(для наглядности стили указаны inline в атрибуте style
; на реальном сайте, конечно, их лучше вынести в класс).
|
Технологу на заметку |
В MSIE для того, чтобы сделать курсор мыши в виде руки нужно написать cursor: hand; . В Mozilla (и по рекомендации W3C) — cursor: pointer; . Последний вариант работает и в WinMSIE6. Для того чтобы сделать стиль для всех браузеров, нужно написать cursor: pointer; cursor: hand; (именно в такой последовательности). Тогда MSIE возьмет последнее (cursor: hand; ), а остальные браузеры, в соответствии со спецификацией, возьмут первое значение, т. е. cursor: pointer; .
|
Ссылка всегда должна вести на какой-нибудь ресурс, будь то веб-страница, файл или якорь. Другими словами, атрибут Не следует использовать ссылку, если поставить ее не на что, то есть ресурса нет. Обработчик события |
См. также в «Ководстве»: § 75. «Про дом и про ссылки на самого себя» |
© 19952025 Студия Артемия Лебедева
|