Подтвердить что ты не робот

Единственный хэш в якоре href?

В проекте, над которым я работаю, я недавно перешел от разработки серверных (то есть не веб-серверов) к веб-вещам. В коде HTML я обнаружил следующее повсюду:

<a href='#'>some link</a>

Затем некоторые JS присоединяются к событию click элемента <a>.

Имеет ли этот единственный хэш какой-то особый смысл? Я понимаю, как href='#some_id' сообщает браузеру прокручивать элемент с идентификатором = some_id. Но href='#' не работает таким образом, не так ли? Если все о создании интерактивного фрагмента текста, почему бы просто не использовать <span>?

4b9b3361

Ответ 1

Совершенно верно. То, что вы видите здесь, как-то плохой дизайн (хотя довольно часто используется href="#").

То, что он на самом деле будет делать, - это прыгать в верхнюю часть страницы, если действие по умолчанию не предотвращено.

Намного лучше было бы

  • используйте <button> и соответствующим образом настройте его (возможно, даже вставили с помощью JavaScript)
  • или пусть ссылка указывает на какой-то реальный ресурс (который вызывает некоторые действия на стороне сервера) и присоединяет обработчик событий JavaScript для выполнения этого (или подобного) действия на клиенте и предотвращает выполнение ссылки (ключевое слово: ненавязчивый JavaScript).

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

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

Ответ 2

Хеш на своих ссылках на верх страницы.

Это иногда используется для этой цели, то есть ссылки "Вверх", но более типично такая ссылка используется в сочетании с кликом Javascript, который даже возвращает false, и, таким образом, отрицает действие href.

В этом контексте он используется таким образом по следующим причинам:

  • Тег <a> может быть семантически правильным - т.е. элемент, который нужно щелкнуть, действует как ссылка; т.е. загружать больше контента или открывать всплывающее окно и т.д., даже если он использует Javascript для его функциональности.

  • Использование тега <a> также означает, что элемент будет создан таким же образом, как и другие теги <a> на сайте. Это включает в себя стили эффектов :hover и т.д. Обратите внимание, что IE6 поддерживает только элементы :hover on <a>, и ничего больше, а это означает, что если сайт был разработан для работы в IE6 или ему еще нужно его поддерживать, t повторите эту функцию с другими тегами. Это была очень веская причина использовать теги <a> для этой функции в прошлом, даже если она не была подходящей семантически. В наши дни это не проблема. Даже в современных браузерах использование <a> для этих элементов по-прежнему полезно для сокращения реплицированных таблиц стилей, если вы хотите, чтобы они выглядели так же, как и другие ссылки. Ссылки также имеют несколько других специальных функций, которые могут быть трудно реплицироваться с помощью других элементов, например, в индексной последовательности вкладок и т.д.

  • HTML требует, чтобы тэг <a> имел атрибут href, чтобы элемент отображался как ссылка, поэтому хеш используется как минимальное значение для этого. Кроме того, наличие хэша в атрибуте href означает, что ссылка не вызовет каких-либо неприятных непредвиденных последствий, если пользователь отключит Javascript или разработчик забыт до return false;. Напротив, наличие пустой строки приведет к перезагрузке страницы, что вряд ли будет тем, что вы хотите, если вы только что запустили javascript. Тем не менее, также часто бывает, что ссылка указывает на действительный URL-адрес, который будет запущен, если Javascript был выключен; это хороший способ иметь задний механизм для вашего сайта. Но это не всегда уместно, и здесь явно не намерение.

Учитывая, что элемент просто запускает событие click в Javascript, нет причин, по которым вы не могли бы использовать какой-либо другой элемент для этого. Вы могли бы легко использовать <span> (или даже лучше, a <button>) вместо этого, но приведенные выше пункты должны показать, что нет ничего плохого в использовании тега <a>.

Надеюсь, что это поможет.

Ответ 3

Хэш в href на самом деле является хорошей практикой и определенно лучше, чем стиль (или, что еще хуже, кнопка). Хэш в теге а также можно заменить на href="javascript:;", это предотвратит "переход на верх".

Хэш в href является главным признаком того, что к этому якорю подключен javascript.

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

Пролет возможен, но не будет получать фокус вкладки, как было сказано ранее, и не имеет семантического значения вообще (также замечено ранее).

Итак, чтобы повторить:

Хорошо:

<a href="#">click</a>
<a href="javascript:;">click</a>

Kinda Хорошо:

<span>click</span>

Плохая практика

<button>click</button>

Ответ 4

Имеет ли этот единственный хэш какой-либо особый смысл?

Он ссылается на верх страницы

Почему бы просто не использовать <span>?

  • Он не будет в порядке фокуса
  • Он не будет использовать стили по умолчанию для чего-то, что нужно нажать

A <button> будет лучше, чем span. Что-то построенное на альтернативной стороне сервера было бы лучше.

Ответ 5

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

Ответ 6

Потому что:

  • стиль выполнен для вас;
  • ссылка семантически по-прежнему является ссылкой, даже если она начинается с no-op href.

Риторический вопрос:
Можете ли вы объяснить, почему вы думаете, что span более подходит, чем a для ссылки?

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