Какие HTML теги использовать для кнопок с разным поведением

Что проверяют

Различаете ли вы действие и навигацию и знаете ли, что нативный элемент даёт бесплатно. Следом часто спрашивают, почему кнопка внутри формы вдруг её отправляет, и что не так с div с обработчиком клика.

Как отвечать

Главное правило: ведёт на другой адрес, значит ссылка <a href>; выполняет действие на странице, значит <button>. Дальше по видам поведения:

• <button type="submit">: отправка формы. Внутри <form> у кнопки без атрибута type по умолчанию именно submit;
• <button type="button">: действие на JavaScript без отправки формы, например открыть модалку или добавить в корзину;
• <button type="reset">: сброс полей формы, в реальных интерфейсах почти не нужен;
• formaction, formmethod, formnovalidate: разное поведение у нескольких submit-кнопок одной формы, например «Сохранить черновик» без валидации;
• атрибут form: привязка кнопки к форме, если она стоит вне её разметки;
• <a href> и <a download>: переход и скачивание. Ссылку можно открыть в новой вкладке и скопировать, у кнопки этого нет;
• popovertarget: кнопка открывает поповер без JavaScript;
• <input type="submit">: рабочий, но неудобный вариант, внутрь нельзя положить иконку или разметку.

Для кнопок-переключателей добавляют aria-pressed, для раскрывающих меню и секций aria-expanded. Нативный <button> сам получает фокус, срабатывает на Enter и пробел и объявляется экранным диктором как кнопка. У ссылки атрибута disabled нет, а у кнопки он есть, и это ещё один довод не путать их.

Где спотыкаются

Делают кнопку из div или span. Тогда фокус, клавиатуру и роль приходится дописывать вручную, и почти всегда что-то теряется.

Вешают role="button" на ссылку, которая просто ведёт на страницу. Навигация должна оставаться ссылкой, а role="button" обязывает ещё и обработать пробел.

Забывают type="button" у кнопки внутри формы, и клик по «Показать пароль» внезапно отправляет форму на сервер.