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

Я не уверен, почему мне нужно использовать ul-li vs просто с помощью divs при перечислении элементов. Я могу сделать как посмотреть точно так же

в вашем вопросе есть ключевое слово: "посмотрите". Можете ли вы также сделать их тип то же самое для слепых с использованием шрифта Брайля читатель? Можете ли вы сделать их звук то же самое для слепых людей, используя текст-в-речь синтезатора? Можете ли вы еще сделайте их выглядеть одинаково для визуально люди с ограниченными возможностями, использующие пользовательские таблицы стилей CSS на стороне клиента?

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

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

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

прямой ответ на ваш вопрос: Функциональным преимуществом является то, что divs мало значат сами по себе, тогда как ul lis явно означает "это не упорядоченный список элементов."

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

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

на div элемент "делит."Когда вы смотрите на страницу, есть определенные части, такие как тело контента, нижний колонтитул, заголовок, навигация, меню, формы и т. д. И вы можете использовать div теги для создания этих подразделений. Часто части страниц соответствуют визуальному макету, поэтому использование явных разделов страниц (DIVs) для разрезания макета в CSS является естественным. Сюда div теги становятся структурными.

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

чтобы запутать вопросы: Google использует h3 и div чтобы "разделить" их список поиска результаты. ul > li > h3 + div

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

еще одна вещь об 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

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

надеюсь, что помогает Спасибо

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

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