Какова причина, по которой меню верстают через ненумерованный список 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
значительно ограничивается и усложняется нездоровыми людьми
. И это единичный пример, среди других тонких моментов, которые обязательно всплывут по мере разработки и расширения. Поэтому не расслабляйтесь в этом плане.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Наводим на текст-всплывает подсказкаКак наилучшим образом реализовать подобное?
Программа хранит ряд настроек в xml-файлеЕсли в момента записи настройки отключается питание компьютера, содержимое файла пропадает (сам...