Какова причина, по которой меню верстают через ненумерованный список ul?

333
12 мая 2017, 14:25

Какова причина, по которой меню верстают через ненумерованный список ul?

Не знаю "правильно" это или нет, но у меня получилось без всяких проблем сверстать нормально работающее одноуровневое горизонтальное меню в виде таблицы, а с помощью flexbox так и вообще замечательно всё верстается.

Answer 1

Сначала для верстки таких меню действительно использовались таблицы потому что не было поддержки многих 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>

Answer 2

Верстайте семантическими <ul>, но сильно не расслабляйтесь. Все вокруг говорят о семантике и прочих понятностях кода, но никто из этих людей не скажут вам о проблемах, с которыми вы можете или скорее всего столкнетесь при оформлении ваших списков, например при расширении вашего проекта. Поэтому выбор использовать улы или нет - это выбор между шилом и мылом.

С одной стороны давят всякие сеошники и другие семантически нездоровые люди со своими глупыми гуглами, которые, по их мнению, вообще не понимают дивов и классов на них. И тут в сравнении с глупыми гуглами вообще нечего говорить про других тоже глупых программистов и верстальщиков, которые вообще без опыта и в упор не увидят в вашей верстке повторяющихся групп элементов, потому-что они не обернуты в <li>. Это утверждение верно, естественно, если вы и сам не дуб, и делаете все хорошо.

С другой стороны вам, возможно и скорее всего, придется иметь дело с различными wysiwyg редакторами страниц, которые нажатием одной кнопки позволят конечному пользователю сайта добавить в код страницы заветный <ul>, который с маркерами должен быть, если кто забыл. Или, там, вдруг, с font-awesome иконками за место маркеров, мало ли что придет в голову дизайнерам. Это, конечно, все можно учесть, но вы лишний раз будете вспоминать о том, чтобы у половины ваших сайдбаров и менюшек не появилось ничего лишнего, например, задуманных стилями маркеров, отступов, стилей начертания. Тоже правило действуети в обратном направлении. Или подключите, там слайдер, который использует списки в качестве слайдов. В таком случае ваша свобода использования каскадности css значительно ограничивается и усложняется нездоровыми людьми. И это единичный пример, среди других тонких моментов, которые обязательно всплывут по мере разработки и расширения. Поэтому не расслабляйтесь в этом плане.

READ ALSO
Всплывающая подсказка css

Всплывающая подсказка css

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

369
Абсолютный путь&hellip; Картинки и файлы в браузере

Абсолютный путь… Картинки и файлы в браузере

Здравствуйте, возникла следующая задача

351
Как защитить файл от повреждения при отключении питания?

Как защитить файл от повреждения при отключении питания?

Программа хранит ряд настроек в xml-файлеЕсли в момента записи настройки отключается питание компьютера, содержимое файла пропадает (сам...

360
Как упростить проверку на null на C#?

Как упростить проверку на null на C#?

Есть ли возможность упростить такое выражение:

369