Какова причина, по которой меню верстают через ненумерованный список ul?
Не знаю "правильно" это или нет, но у меня получилось без всяких проблем сверстать нормально работающее одноуровневое горизонтальное меню в виде таблицы, а с помощью flexbox так и вообще замечательно всё верстается.
Сначала для верстки таких меню действительно использовались таблицы потому что не было поддержки многих CSS-фич. Вообще все версталось таблицами. Со временем технологии развивались и таблицы потеряли свою актуальность в разметке страницы из-за того что таблицы сложно поддерживать.
Тогда была два актуальных варианта: обернуть ссылки в див, сделать список. Из этих двух подходов список более правилен с семантической точки зрения потому что меню — это как раз список ссылок.
В стандарте HTML5 появился тег nav, но, несмотря на это, в спецификации рекомендуют использовать список для списка ссылок для упрощения понимания структуры навигации. Как-то так:
nav {
border: 1px solid #ccc;
}
nav ul {
display: flex;
width: 100%;
margin: 0;
padding: 0;
}
nav li {
border-right: 1px solid #ccc;
flex-grow: 1;
padding: 5px;
list-style: none;
}
nav li:last-child {
border-right: none;
}
<nav>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
<li><a href="#">Пункт 6</a></li>
</ul>
</nav>
Верстайте семантическими <ul>, но сильно не расслабляйтесь. Все вокруг говорят о семантике и прочих понятностях кода, но никто из этих людей не скажут вам о проблемах, с которыми вы можете или скорее всего столкнетесь при оформлении ваших списков, например при расширении вашего проекта. Поэтому выбор использовать улы или нет - это выбор между шилом и мылом.
С одной стороны давят всякие сеошники и другие семантически нездоровые люди со своими глупыми гуглами, которые, по их мнению, вообще не понимают дивов и классов на них. И тут в сравнении с глупыми гуглами вообще нечего говорить про других тоже глупых программистов и верстальщиков, которые вообще без опыта и в упор не увидят в вашей верстке повторяющихся групп элементов, потому-что они не обернуты в <li>. Это утверждение верно, естественно, если вы и сам не дуб, и делаете все хорошо.
С другой стороны вам, возможно и скорее всего, придется иметь дело с различными wysiwyg редакторами страниц, которые нажатием одной кнопки позволят конечному пользователю сайта добавить в код страницы заветный <ul>, который с маркерами должен быть, если кто забыл. Или, там, вдруг, с font-awesome иконками за место маркеров, мало ли что придет в голову дизайнерам. Это, конечно, все можно учесть, но вы лишний раз будете вспоминать о том, чтобы у половины ваших сайдбаров и менюшек не появилось ничего лишнего, например, задуманных стилями маркеров, отступов, стилей начертания. Тоже правило действуети в обратном направлении. Или подключите, там слайдер, который использует списки в качестве слайдов. В таком случае ваша свобода использования каскадности css значительно ограничивается и усложняется нездоровыми людьми. И это единичный пример, среди других тонких моментов, которые обязательно всплывут по мере разработки и расширения. Поэтому не расслабляйтесь в этом плане.
Сборка персонального компьютера от Artline: умный выбор для современных пользователей