PrepBro
← Назад к вопросам

Для кого будет разница между тегами списка и тегом div

2.0 Middle🔥 111 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Для кого будет разница между тегами списка и тегом div

Очень важный вопрос! Разница значительна для нескольких групп людей, особенно для тех, кто использует assistive technologies (вспомогательные технологии).

Главная разница: Семантика

Что такое семантический HTML?

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

<!-- ПЛОХО - не семантично -->
<div>Главное меню</div>
<div>
  <div>Главная</div>
  <div>О нас</div>
  <div>Контакты</div>
</div>

<!-- ХОРОШО - семантично -->
<nav>
  <h1>Главное меню</h1>
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/contact">Контакты</a></li>
  </ul>
</nav>

Вторая версия говорит браузеру и assistive technologies: "Это навигация, это список с ссылками".

Для кого есть разница?

1. Люди с нарушениями зрения (слепые пользователи)

Как они пользуются интернетом: Используют screen reader (читающую программу), которая описывает содержимое вслух.

<!-- ПЛОХО - screen reader скажет просто текст -->
<div>Главная</div>
<div>О нас</div>
<div>Контакты</div>

<!-- ХОРОШО - screen reader скажет "Список с 3 пунктами" -->
<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="/about">О нас</a></li>
  <li><a href="/contact">Контакты</a></li>
</ul>

Screen reader (например NVDA):

Нарочитает:
"Список, 3 пункта"
"Пункт 1, ссылка Главная"
"Пункт 2, ссылка О нас"
"Пункт 3, ссылка Контакты"

Пользователь понимает структуру и может:
- Прыгать между пунктами списка
- Пропустить весь список разом
- Быстро ориентироваться

2. Люди с нарушением моторики

Как они пользуются: Могут управлять только клавиатурой или специальными устройствами.

<!-- ПЛОХО -->
<div onclick="navigate('/')">Главная</div>

<!-- ХОРОШО -->
<a href="/">Главная</a>

Почему разница:

  • <a> тег можно активировать клавишей Enter
  • <div onclick> часто не работает с клавиатурой
  • Ссылки имеют встроенную функциональность для навигации

3. Люди с дислексией

Как они пользуются: Используют text-to-speech и нуждаются в четкой структуре.

<!-- ПЛОХО - все в одной стене текста -->
<div>Товар 1 150р Товар 2 200р Товар 3 300р</div>

<!-- ХОРОШО - четкая структура -->
<ul>
  <li>Товар 1 - 150р</li>
  <li>Товар 2 - 200р</li>
  <li>Товар 3 - 300р</li>
</ul>

Структурированный контент проще читать и воспринимать.

4. Люди со слабым зрением

Как они пользуются: Увеличивают масштаб сайта, используют contrast filters.

<!-- ПЛОХО - зависит только от CSS -->
<div style="font-weight: bold; color: gray;">Важное</div>

<!-- ХОРОШО - визуально и семантически отмечено -->
<strong>Важное</strong>
<!-- или -->
<em>Логично выделено</em>

Семантические теги имеют встроенные стили и более контрастны.

5. Люди, пользующиеся старыми браузерами

<!-- ПЛОХО - зависит от CSS -->
<div class="list">
  <div class="item">Товар 1</div>
</div>

<!-- ХОРОШО - работает везде -->
<ul>
  <li>Товар 1</li>
</ul>

В очень старых браузерах CSS может не загрузиться, но структура все еще будет видна.

Технические различия

Семантика для браузера

<!-- div -->
<div>
  <div>Пункт 1</div>
  <div>Пункт 2</div>
</div>
<!-- Браузер видит просто divы, смысла нет -->

<!-- ul/li -->
<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>
<!-- Браузер видит "Это список с пунктами" -->

CSS по умолчанию

<!-- ul имеет встроенный CSS -->
<ul style="margin: 1em 0; padding-left: 40px;"> <!-- Это в браузере по умолчанию! -->

<!-- div нет -->
<div> <!-- Нужно самому добавлять стили -->

ARIA roles (для assistive tech)

<!-- Без ARIA - screen reader не знает, что это список -->
<div>
  <div>Пункт 1</div>
  <div>Пункт 2</div>
</div>

<!-- С ARIA - можно добавить смысл вручную (но это bad practice) -->
<div role="list">
  <div role="listitem">Пункт 1</div>
  <div role="listitem">Пункт 2</div>
</div>

<!-- Идеально - используй семантические теги -->
<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

Практические примеры

Пример 1: Меню навигации

<!-- НЕПРАВИЛЬНО -->
<div class="navbar">
  <div class="nav-item"><a href="/">Home</a></div>
  <div class="nav-item"><a href="/about">About</a></div>
  <div class="nav-item"><a href="/contact">Contact</a></div>
</div>

<!-- ПРАВИЛЬНО -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Для слепого пользователя:

  • НЕПРАВИЛЬНО: "Три ссылки" (нет контекста)
  • ПРАВИЛЬНО: "Навигация, список из 3 ссылок" (ясный контекст)

Пример 2: Список товаров в магазине

<!-- ПЛОХО -->
<div class="products">
  <div class="product">
    <div>iPhone 15</div>
    <div>999$</div>
    <div onclick="addCart()">Добавить в корзину</div>
  </div>
  <!-- ... еще товары ... -->
</div>

<!-- ХОРОШО -->
<section class="products" aria-label="Доступные товары">
  <ul>
    <li>
      <h3>iPhone 15</h3>
      <p>Цена: <strong>999$</strong></p>
      <button onclick="addCart()">Добавить в корзину</button>
    </li>
    <!-- ... еще товары ... -->
  </ul>
</section>

Для пользователя с экранным диктором:

  • ПЛОХО: "Текст iPhone, текст 999, текст Добавить" (непонятно что делать)
  • ХОРОШО: "Список товаров, товар iPhone 15, цена 999, кнопка Добавить в корзину" (ясно что это)

Пример 3: Обработка клавиатурой

<!-- ПЛОХО - не работает с клавиатурой -->
<div class="menu-item" onclick="selectItem()">Опция</div>

<!-- ХОРОШО - встроенная поддержка клавиатуры -->
<button onclick="selectItem()">Опция</button>
<!-- или -->
<a href="#">Опция</a>

Люди, которые не могут использовать мышь, не смогут кликнуть на div.

Проверка доступности (Accessibility Testing)

Инструменты для проверки:

  1. Wave Browser Extension
Отмечает ошибки доступности:
- Отсутствующие alt текты
- Неправильная структура заголовков
- Низкий контраст
- Неправильное использование тегов
  1. axe DevTools
// Проверяет WCAG стандарты
// Помечает проблемы в консоли
  1. Lighthouse (в Chrome DevTools)
Автоматически проверяет:
- Доступность
- Performance
- SEO
- Best practices
  1. Manual testing с screen reader
# Скачать NVDA (бесплатно) для Windows
# Скачать JAWS (платно) для Windows
# VoiceOver встроен в macOS

WCAG Стандарты

Web Content Accessibility Guidelines - мировой стандарт доступности.

Уровень A - базовый
Уровень AA - рекомендуемый (большинство сайтов должны этого достичь)
Уровень AAA - высокий (для критичных систем)

Правила WCAG относительно списков:

1.3.1 Info and Relationships (Level A)
   -> Используй семантические теги для передачи структуры

2.1.1 Keyboard (Level A)
   -> Все интерактивные элементы должны работать с клавиатурой

4.1.2 Name, Role, Value (Level A)
   -> Assistive technologies должны понимать элемент

Реальные цифры

По статистике ООН:

  • 15% мирового населения имеет инвалидность (~1.3 миллиарда)
  • 80% слепых людей используют интернет
  • 7% американцев слепые или слабовидящие
  • 15% американцев имеют нарушение слуха
  • 2% людей имеют проблемы с моторикой

Для бизнеса:

  • Доступные сайты = больше пользователей
  • Better SEO (Google любит семантический HTML)
  • Меньше эскалаций и жалоб
  • В некоторых странах (ЕС, USA) требуется по закону

Заключение

Разница между <ul><li> и <div> важна для:

  1. Слепых пользователей - они не видят layout, только слышат структуру

  2. Людей с нарушением моторики - они используют клавиатуру

  3. Людей с когнитивными нарушениями - им нужна четкая структура

  4. SEO - поисковикам нужна семантика

  5. Мобильных устройств - обычно экранные дикторы есть

  6. Будущих поддержателей кода - им проще понять семантическую разметку

Правило: Используй семантические теги (<nav>, <ul>, <section>, <header>, <footer>) везде, где они подходят. Это не просто "хорошая практика", это включение людей с инвалидностью в цифровое пространство.

Для кого будет разница между тегами списка и тегом div | PrepBro