Банальный вопрос, какие правильно использовать теги для кнопок?

Question

[Артур]

Я использую <a href='#!'> для кнопок которые открывают модальные окна, прописываю путь, href='#!', чтобы страница не перезагружать по клику, как в случае с пустым полем. Может нужно вместо ссылки использовать button? Но вроде как без формы будет семантическая ошибка. Как правильно и кто как делает.. такой у меня вопрос появился перед сном)

Answer 1

[Андрей]

Когда вы используете ссылку, то у вас переход по ней записывается в историю браузера. Соответственно появляется возможность кнопками вперед-назад ходить по этой истории.
Ссылки нужно использовать для тех случаев, когда вы предусмотрели возможность нажатия пользователем кнопки "назад" в браузере. Т.е. при разработке сайта вы должны предусмотреть такой сценарий: пользователь открыл модальное окно, потом закрыл его, и нажал назад - в случае, если у вас ссылка, то модальное окно должно открыться.
Если вам такое поведение не нужно, используйте кнопки. Кнопка без формы - никакой ошибки я тут не вижу.

Answer 2

[Odisseya]

Рассмотрим 2 сценария:

1. у пользователя js включен
   
2. js отключен/поломан
   

Если при отключенном js контент мод.окна должен быть доступен — вызов мод.окна делаем якорной ссылкой <a href="#id">, т.к. мод.окно изначально должно находиться в потоке (а скрываться средствами js), добавляем блок мод.окна в конец страницы. Например, для лендинга важна форма заявки и она всегда должна быть доступна.

Если мод.окно не должно быть доступно без js — делаем <button> и исключаем из потока, например, через display:none

Если при отключенном js мод.окно должно вести на другую страницу (например, форма логина) — делаем ссылку на другую страницу, а в js мод.окна предотвращаем событие по умолчанию.

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