Какое значение href использовать для JavaScript-ссылок: "#" или "javascript:void(0)"?

Краткий ответ: используйте <button> или href="#" с preventDefault()

Ни #, ни javascript:void(0) не являются идеальными решениями. Современная практика рекомендует вообще отказаться от <a>, если ссылка не ведёт на другой URL. Для действий (открытие модалки, отправка формы) семантически правильнее использовать <button>. Если же вам нужна именно ссылка (например, для стилизации), то лучший вариант — href="#" с обязательным вызовом event.preventDefault().

Почему javascript:void(0) — плохая практика?

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

Почему href="#" лучше?

Хотя # — это якорь наверх страницы, он хотя бы является валидным URL. Главное правило: всегда предотвращать переход по ссылке двумя способами:

// Вариант 1: через return false в атрибуте (устаревший)
<a href="#" onclick="doSomething(); return false;">Действие</a>

// Вариант 2: через addEventListener (современный)
<a href="#" id="myLink">Действие</a>

<script>
  document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault();
    // ваш код
  });
</script>

Второй вариант предпочтительнее, так как отделяет поведение от разметки.

Лучшее решение: используйте <button>

Если элемент выполняет действие (а не навигацию), семантически правильный тег — <button>. Его не нужно стилизовать как ссылку с помощью text-decoration: underline — достаточно CSS:

// HTML
<button class="link-style" id="openModalBtn">Открыть модалку</button>

// CSS
.link-style {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

// JavaScript
document.getElementById('openModalBtn').addEventListener('click', function() {
  // логика открытия модалки
});

Когда можно оставить <a>?

Только если ссылка должна работать как запасной вариант при отключённом JavaScript. Например:

<a href="/modal-page.html" onclick="event.preventDefault(); openModal();">Открыть модалку</a>

В этом случае href ведёт на реальную страницу, а JavaScript перехватывает клик.

Вывод

• Для действий → <button>
• Для навигации с JS-улучшением → <a href="реальный URL"> + preventDefault()
• Избегайте javascript:void(0) в современных проектах

<a href="javascript:void(0)" onclick="alert('Hello')">Нажми меня</a>