Чому я повинен використовувати "li" замість "div"?

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

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

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

Що у вашому запитанні є ключове слово: "дивись". Чи можете ви також змусити їх вводити однакові для незрячих людей за допомогою зчитувача Брайля? Чи можете ви зробити так, щоб вони звучали однаково для сліпих людей, використовуючи синтезатор тексту в мовлення? Чи можете ви все ще зробити так, щоб вони виглядали однаково для людей із вадами зору, використовуючи користувацькі таблиці клієнтських стилів CSS на стороні клієнта?

Це слово "дивись" - це дуже небезпечне слово - коли ви використовуєте це стосовно HTML, усі тривоги повинні згасати у вашій голові. HTML - це мова для опису смислової структури гіпермедіа-документа. Семантична структура не має "вигляду", це абстрактне поняття.

Навіть якщо ви не переймаєтесь всією цією семантичною hocuspocus і вам не байдуже сліпих людей, врахуйте це: Google, Yahoo, MSN та Co. не мають очей, вони не "дивляться" на ваш наданий CSS .

Використовуючи семантично правильну розмітку, ви вкладаєте додаткову інформацію у свій текст. Використовуючи ul / li, ви повідомляєте споживчому додатку, що інформація є списком, а не просто "чимось" (хто знає, що), що є деяким текстом всередині довільного елемента.

Прямий відповідь на ваше запитання: функціональна перевага полягає в тому, що діви означають мало самостійно, тоді як ul lis прямо означає «це список не впорядкованих елементів».

Термін "семантика" відноситься до того, як ви використовуєте притаманне значення існуючих структур для створення явного значення. HTML складається з тегів, які означають певні речі самі по собі. І є встановлені правила / вказівки / способи їх використання, щоб ваш опублікований документ HTML передав те, що ви хочете.

Якщо ви щось перелічите у своєму документі, додайте упорядкований список (UL) або не упорядкований список (OL). З іншого боку, елемент поділу сторінки (DIV) використовується для створення конкретного та окремого фрагмента вмісту.

Елемент div "розділяє". Коли ви переглядаєте сторінку, є конкретні частини, такі як тіло вмісту, колонтитул, заголовок, навігація, меню, форми тощо. Ви можете використовувати теги div для створення цих підрозділів. Часто частини сторінки відповідають візуальному макету, тому використання чітких розділів сторінки (DIVs) для скорочення вашого макета в CSS - це природна придатність. Таким чином теги Div стають структурними.

Якщо ви неправильно використовуєте або не використовуєте тег div , це може створити ненавмисне значення та розширення коду.

Щоб плутати питання: Google використовує h3 і div, щоб "розділити" свої перелічені результати пошуку. ul> li> h3 + div

Так що, коли ви виключаєте всі стилі (Shift + Cmd / Ctrl + S в Firefox ж / WebDeveloper на панелі інструментів), то діви повинен піти, і стек природно. Ваш голий HTML все-таки повинен мати приємну сторінку з чіткою ієрархією: зверху вниз, найважливіший вміст спочатку та списки з куль і номерами для перелічених елементів. І корисно додати посилання вгорі (для невізуальних користувачів), що дозволяє переходити до: основного вмісту, важливих форм або основних заголовків (наприклад, до змісту).

Нарешті, майте на увазі, що ви будуєте документ. Без усіх візуальних ефектів це все-таки повинен бути зухвалим документом.

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

<div>набагато більш універсальний. Якщо ви перераховуєте інгредієнти для торта, так, це список. Якщо ви перераховуєте речі для пакування для пішохідної поїздки, так, це список.

А як щодо форми користувача, наприклад, яка містить перелік випадкових речей, які насправді не є списком, ані ряд абзаців, ані всі заголовки. Деякі речі - дати, деякі - прапорці, а деякі - текст. Підніміть це, якщо ви запитаєте мене. Сліпий людина була б неправильно інформований , якщо він був розмічений з <ul>і <li>і вони почули «Ось список ...» , коли це просто мішанина речі, на самому ділі не список.

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

Ще один аргумент полягає в тому, що при відключенні css. Веб-переглядач надає стилю за замовчуванням, що дозволяє придивитись до використання альтернативних пристроїв для перегляду. Це також підвищує доступність.

Якщо ви замість цього використовуєте div, рись не зможе відтворити сторінку читабельно.

Мені особисто подобаються лі для семантики. Переглядаючи джерело, ви відразу бачите, що у вас є список чогось, якщо вони обгорнуті лілією. Колекція div не має семантичного значення, і зазвичай єдину семантику до списку вносять класи css типу "listItem". Що, очевидно, вказує на той факт, що в першу чергу слід було використовувати лі.

Якщо у вас є цикл у вашій логіці презентації, я завжди віддаю перевагу li над дівом.

<li> означає елемент у списку, який дає змогу парсерам (браузерам, пошуковим системам, павукам) знати, що ви перераховуєте елементи. Ви можете використовувати DIV замість LI, але ті парсери ніколи не дізнаються, що ці елементи перераховані, і DIV насправді нічого не описує, крім того, що це блок.

Це залежить від проекту. Нещодавно я зробив проект, в якому було створено меню, створене за допомогою списку. Вони хотіли додати купу ефектів, таких як ковзання / згасання, а також хотіли зробити його збірним з кількох рівнів.

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

Навіть якщо ваш проект ще не має цих вимог, можливо, доцільно думати, як ви можете це змінити в майбутньому ...

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

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

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

І це додатково до того, що всі інші говорили про семантику.

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

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

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

інша річ про ul li є; ви можете використовувати ul як контейнер, який допоможе вам встановити клас Style

<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

Звичайно, це залежить від того, як ми хочемо ним користуватися і як нам це подобається. Це мені подобається

Надія допомагає Спасибі