Какой HTML-тег использовать для кнопки, открывающей модальное окно?

Правильный HTML-тег для кнопки модального окна

Для создания кнопки, которая открывает модальное окно, следует использовать тег <button>. Этот тег семантически обозначает интерактивный элемент, который выполняет действие при нажатии. В отличие от <div> или <span>, <button> по умолчанию доступен для фокусировки с клавиатуры и корректно обрабатывается скринридерами, что улучшает доступность (accessibility).

Пример кода

<button id="openModalBtn">Открыть модальное окно</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Содержимое модального окна.</p>
  </div>
</div>

<script>
  document.getElementById('openModalBtn').addEventListener('click', function() {
    document.getElementById('myModal').style.display = 'block';
  });
</script>

Почему не стоит использовать другие теги

• <div> или <span> не имеют встроенной роли кнопки, что требует дополнительных атрибутов ARIA (например, role="button") и ручной обработки клавиатурных событий.
• Использование <a> с href="#" может привести к нежелательной навигации или изменению URL, если не предотвратить стандартное поведение.

Вывод

Используйте <button> для любых действий, включая открытие модальных окон. Это обеспечивает семантическую правильность, доступность и простоту реализации.