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

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

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

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

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

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

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

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

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

Ответ 14

другая вещь о 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

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

Надежда помогает Благодаря

Ответ 15

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

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