Почему я должен использовать li вместо div?

Я не уверен, почему мне нужно использовать ul-li вместо простого использования div при перечислении элементов. Я могу сделать так, чтобы оба выглядели одинаково, так где же функциональное преимущество создания неупорядоченного списка по сравнению с выстраиванием div?

Для смысловой корректности. HTML имеет возможность выражать списки вещей и помогает роботам Google, программам чтения с экрана и всем пользователям, которых не заботит только представление сайта, лучше понимать ваш контент.

Я не уверен, почему мне нужно использовать ul-li, а не просто использовать div при перечислении элементов. Я могу заставить оба выглядеть одинаково

Что в вашем вопросе есть ключевое слово: «смотреть». Можно ли заставить их печатать то же самое для слепых с помощью устройства для чтения Брайля? Сможете ли вы заставить их звучать одинаково для слепых людей с помощью синтезатора речи? Вы можете все еще сделать их выглядеть так же для людей с ослабленным зрением с помощью пользовательских стороне клиента CSS-стилей пользователя?

Это слово «взгляд» - очень опасное слово - когда вы используете его по отношению к HTML, все сигналы тревоги должны срабатывать в вашей голове. HTML - это язык для описания семантической структуры гипермедийного документа. Семантическая структура не имеет «внешнего вида», это абстрактное понятие.

Даже если вас не волнуют все эти семантические фокусы и слепые люди, учтите следующее: у Google, Yahoo, MSN и Co нет глаз, они не «смотрят» на ваш обработанный CSS. ,

Используя семантически правильную разметку, вы встраиваете в свой текст дополнительную информацию. Используя ul / li, вы сообщаете приложению-потребителю, что информация представляет собой список, а не просто «что-то» (кто знает что), то есть текст внутри произвольного элемента.

Прямой ответ на ваш вопрос: функциональное преимущество состоит в том, что div мало что значит сами по себе, тогда как ul lis явно означает «это неупорядоченный / неупорядоченный список элементов».

Термин «семантика» относится к способу использования внутреннего значения существующих структур для создания явного значения. HTML состоит из тегов, которые сами по себе означают определенные вещи. И существуют установленные правила / руководства / способы их использования, чтобы опубликованный HTML-документ передавал то, что вы хотите, чтобы он значил.

Если вы перечисляете что-то в своем документе, добавьте упорядоченный список (UL) или неупорядоченный список (OL). С другой стороны, элемент разделения страницы (DIV) используется для создания определенного и отдельного фрагмента контента.

Элемент div «делит». Когда вы смотрите на страницу, есть определенные части, такие как тело содержимого, нижний колонтитул, заголовок, навигация, меню, формы и т. Д. И вы можете использовать теги div для создания этих разделов. Часто части страницы соответствуют визуальному макету, поэтому использование явных разделений страницы (DIV) для разделения макета в CSS является естественным. Таким образом, теги div становятся структурными.

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

Чтобы запутать ситуацию: Google использует h3 и div для «разделения» перечисленных результатов поиска. ul> li> h3 + div

Поэтому, когда вы отключите все стили (Shift + Cmd / Crtl + S в Firefox с панелью инструментов WebDeveloper), блоки div должны исчезнуть и сложиться естественным образом. Ваш голый HTML должен по-прежнему отображать красивую страницу с четкой иерархией: сверху вниз, сначала наиболее важный контент, а также списки с маркерами и номерами для перечисленных элементов. Также рекомендуется добавить ссылку вверху (для невизуальных пользователей), которая позволит вам перейти к основному контенту, важным формам или основным заголовкам (например, оглавлению).

Наконец, имейте в виду, что вы создаете документ. Без всех визуальных эффектов это все равно должен быть убедительный документ.

Существует много разговоров об использовании <li>или использовании, <div>но ни один комментарий не дал убедительного примера содержимого, которое находится внутри этих тегов. У меня такое ощущения , что <ul>и <li>на самом деле не так важно , как я не могу вам сказать , когда в последний раз , что я на самом деле читать «список» вещи на сайт, газету или журнале - в Интернете или в печатном виде .

<div>намного более универсален. Если вы перечисляете ингредиенты для торта, да, это список. Если вы перечисляете вещи, которые нужно собрать для похода, да, это список.

Но как насчет пользовательской формы, например, которая перечисляет некоторые случайные вещи, которые на самом деле не являются ни списком, ни серией абзацев, ни всеми «заголовками». Некоторые элементы являются датами, некоторые - флажками, а некоторые - текстом. Разделите это, если вы спросите меня. Слепой человек был бы неправильно проинформирован, если бы он был помечен знаком <ul>и <li>услышал бы «Вот список ...», когда это всего лишь мешанина, а не список.

Вы должны использовать соответствующие теги для содержимого, которое хотите поместить внутрь. Это не только означает, что ul / li больше подходит для списков. Это также означает, что вы должны рассмотреть содержимое вашего списка и посмотреть, является ли он неупорядоченным / упорядоченным или определенным списком.

Другой аргумент в том, что при отключении css. Браузер отобразит свой стиль по умолчанию, что облегчит просмотр, если используются альтернативные устройства просмотра. Это также увеличивает доступность.

Если вместо этого вы используете div, lynx не сможет отобразить страницу в удобочитаемой форме.

Мне лично нравится li за семантику. При просмотре источника вы сразу видите, что у вас есть список чего-то, если он заключен в li. Коллекция div не имеет семантического значения, и обычно единственная семантика в список вводится классами css, такими как listItem. Что, очевидно, указывает на то, что в первую очередь следовало использовать li.

Если в вашей логике представления есть цикл, я всегда предпочитаю li над div.

<li> означает элемент в списке и позволяет синтаксическим анализаторам (браузерам, поисковым системам, паукам) знать, что вы перечисляете элементы. Вы можете использовать DIV вместо LI, но эти парсеры никогда не узнают, что эти элементы перечислены, а DIV на самом деле ничего не описывает, кроме того, что это блок.

Это зависит от проекта. Недавно я сделал проект, в котором меню было разработано с использованием списка. Они хотели добавить кучу эффектов, таких как скольжение / затухание, а также хотели сделать его сворачиваемым с несколькими уровнями.

В этом случае DIV были гораздо более подходящими. Мне удалось создать контейнеры для дочерних div и применить jQuery для достижения желаемых эффектов.

Даже если в вашем проекте еще нет этих требований, было бы разумно подумать о том, как вы можете изменить его в будущем ...

Использование <li>(где это уместно) уменьшает количество <div>тегов, которые вы так часто видите на веб-страницах, что очень помогает разработчикам.

Не <div>это плохо, но всякий раз, когда тег используется слишком <div>часто (как это часто бывает), он размывает семантическое значение тега до такой степени, что становится совершенно бесполезным. Я узнал об этом недавно от подрядчика, которого мы наняли, чтобы помочь с CSS / UI нашего веб-приложения, и то, что это повлияло на удобочитаемость / ремонтопригодность HTML-кода, для меня очень заметно.

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

И это в дополнение к тому, что все говорили о семантике.

Для правильного рендеринга в примитивных браузерах или мобильных устройствах

На ваш вопрос уже дан ответ, и я хочу добавить сюда свои два цента. Я работал над проектом, в котором я выполнял внутреннюю логику, и мои данные были агрегированы в шаблон страницы, созданный моим дизайнером. он использовал теги ul и li для представления всех видов списков на странице, некоторые из которых были виджетами. Данные поступали из cms, где пользователи могли вводить форматированный текст с помощью тегов html. когда пользователи начали создавать списки в своем контенте, списки больше не выглядели как маркированные списки, а скорее испортили всю страницу.

Извлеченный урок: не используйте теги списка с общими селекторами CSS, если ваш контент может содержать HTML сам по себе.

еще одна вещь об ul li: вы можете использовать ul в качестве контейнера, который поможет вам установить класс стиля

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

Мне нравится этот шаблон, когда я использую ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Конечно, это зависит от того, как мы хотим его использовать и как нам это нравится. Так мне нравится

Надежда помогает Спасибо