Используйте <a>или <div>для кнопок изображения

Question

Каким способом лучше создавать кнопки с изображениями?

Использование <a>: чтобы установить фоновое изображение для моего изображения, необходимо указать <a href="#">, однако в строке состояния браузера появится URL, что немного раздражает.

Использование <div>: установить фоновое изображение для моего изображения, которое не отображается в строке состояния браузера, однако необходимо добавить cursor:pointer в .css

Answer 1

Лично я бы не пошел на div, потому что семантически div - это не кнопка . Если вам нужна кнопка, которая выполняет действие JavaScript, я бы, вероятно, просто использовал тег <button></button>. Вы можете разместить другие HTML-элементы внутри тега кнопки, как если бы они были div, и это лучше семантически.

Чтобы повторить то, что сказал @Richard JP Le Guen, в идеале вы должны добавить эти кнопки также с использованием JavaScript, чтобы люди без включенного JavaScript не видели их, или вы могли бы предложить альтернативные функции для тех, у кого не включен JS. *

Answer 2

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

В идеале вы бы также добавили это <div>, используя JavaScript, чтобы пользователи без JavaScript вообще не видели его.

Answer 3

Стэн!Есть CSS-файлы с тысячами строк кода.Вот почему еще одно правило «курсор: указатель» не является большой проблемой.:)

Answer 4

Я предпочитаю использовать <a>, потому что браузер изначально обрабатывает события нажатия.Для кликабельного <div> потребуется JavaScript для обработки событий клика.

Отображение URL назначения в строке состояния обычно считается хорошей практикой проектирования.Он дает пользователю дополнительную информацию о том, куда эта кнопка / ссылка приведет его.