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

Question

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

Прямой ответ на ваш вопрос: Функциональное преимущество состоит в том, что 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), divs должны исчезнуть и сложиться естественным образом. Ваш голый HTML-код должен по-прежнему отображать симпатичную страницу с четкой иерархией: сверху вниз, сначала наиболее важный контент, а также списки с маркерами и номерами для перечисленных элементов. И это хорошая идея, чтобы добавить ссылку вверху (для невизуальных пользователей), которая позволяет переходить к: основному контенту, важным формам или основным заголовкам (например, оглавлению).

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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

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

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