Нужно ли добавлять button в li?

Question

[mikhavital]

Приветствую!
Возник небольшой вопрос: есть несколько кнопок, считаются ли они списком, чтобы оборачивать их в li?
Или можно просто закинуть их в div?

<div class="btns-container">
     <button class="btns-container__elem">Item1</button>
     <button class="btns-container__elem">Item2</button>
     <button class="btns-container__elem">Item3</button>
</div>

Answer 1

[Дмитрий Кузнецов]

Если вы не используется ol или ul, то зачем ломать семантику и добавлять li? Оборачивать в div то же не обязательно, просто в btns-container можете добавить свойства grid'а или flex'а и наслаждаться нормальным отображением.

Comments

[mikhavital]

Конечно нужно использовать li в связке с ol или ul по семантике. Вопрос в другом, считаются ли кнопки списком, как например навигация, которую нужно оборачивать в список:

<nav>
    <ul>
        <li><a>item</a></li>
        <li><a>item</a></li>
    </ul>
</nav>

Извините за такие сумбурные объяснения, если кратко говоря, то как семантчески правильно обернуть кнопки?)

[Дмитрий Кузнецов]

mikhavital, по идеи нет. Если я не ошибаюсь, то если вы добавите кнопку в список, то это не будет считаться нарушением семантики и ни чего плохого в этом не будет. Но опять же, я могу ошибаться. В таких случаях лучше проверять через специальные для этого сервисы.

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

Для лучшего понимания ситуации лучше уточнить для каких целей вы будете использовать эти кнопки.

[mikhavital]

Дмитрий Кузнецов, будут использоваться как кнопки управления :)

В любом случае - спасибо за ответы! Не буду оборачивать в список)

[Дмитрий Кузнецов]

mikhavital,

будут использоваться как кнопки управления :)

Тогда да, лучше использовать без списка.