Почему использовать 'li' вместо 'div': преимущества и доступность

Быстрый ответ

Предпочтите тег <li> тегу <div>, чтобы соответствовать элементам списка четкой семантике и улучшить показатели в поисковых системах (SEO). Элемент li предполагает принадлежность элемента к списку, тогда как <div> более обобщённый и не указывает на конкретное содержание.

<!-- Мама мне говорила, что жизнь как коробка шоколадок. Она никогда не говорила, что кодирование – это список <li>. -->
<ul>
  <li>Первый элемент</li>  <!-- Напоминает шоколадку с арахисовым маслом. Сладкий и наполненный орехами. -->
  <li>Второй элемент</li>  <!-- А этот кусок шоколадки с витиеватыми узорами. Скользкая, но мудра. -->
  <li>Третий элемент</li>  <!-- И, конечно, он загадочен! -->
</ul>

Тег <li> обеспечивает понятную привязку к контексту списка, в отличие от <div>, который может добавить путаницы и осложнить структуру.

Семантический HTML: Более чем просто набор тегов

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

Доступность: Путь к удобной веб-среде

Семантические теги легко воспринимаются программами доступности. Использование <ul> и <li> для списков значительно улучшает удобство использования сайта, облегчая навигацию.

Подробнее об этом расскажет наш спикер на видео

SEO: В соответствии с требованиями поисковых систем

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

Визуализация

Управление содержимым часто сравнивают с порядком в шкафу, где HTML-теги выступают в роли организаторов.

🖥️ ┌─────────┐
🖥️ │ 🍴🥄🔪🍴🥄🔪 │  <!-- Ящик 'div'. Когда-то пытались нащупать вилку в темноте? -->
🖥️ └─────────┘

🖥️ ┌─────────┐
🖥️ │ 🍴🍴 | 🥄🥄 | 🔪🔪 │  <!-- Разделители 'li'. Всё на своих местах! -->
🖥️ └─────────┘

Как секции-организаторы в ящике для столовых приборов, так и теги <li> помогают упорядочивать и разъяснять содержимое, облегчая навигацию пользователями и поисковыми системами.

Теги <div>: не в каждом случае подходящие

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

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

Неправильное использование <div> может внести путаницу и ухудшить пользовательский опыт. Неправильное применение <ul> и <li> может исказить смысл контента и будет неприемлемо для поисковых систем.

Когда следует выбрать <div>

Для разнообразного содержания, которое не требует формата списка, лучше выбрать <div>, что поможет сохранить семантическую точность и улучшить доступность.

Нюансы стилизации

Стилизуя списки, помните, что стилизация – это область ответственности CSS. Семантика HTML должна оставаться неприкосновенной, а внешний вид и оформление разметки предоставляются СSS.

Полезные материалы

1. Тег li в HTML – W3Schools
2. <li>: Элемент списка – MDN
3. Семантика в HTML 5 – Серия статей
4. list-style | Тайны CSS – CSS-Tricks
5. Структура содержимого | WAI | W3C
6. Структурная семантика: значимость разделов в HTML5 — Smashing Magazine
7. WebAIM: Введение в доступность веба