Возможные теги внутри <li> в HTML: стандарты и правила

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

В HTML элемент <li> может содержать потоковое содержимое, что включает в себя большинство тегов, например <div>, <span>, заголовки (<h1>-<h6>), параграфы (<p>), а также элементы встраивания (<img>, <video>). Однако, в <li> не рекомендуется добавлять интерактивное содержимое, например <button> или элементы форм (<input>, <textarea>), для корректного отображения и функционирования элементов списка.

Пример:

<li>
  <!-- Впечатляющие заголовки -->
  <h3>Захватывающий взгляд заголовок</h3>
  
  <!-- Лаконичность — это искусство -->
  <p>Сжатое описание можно найти здесь.</p>
  
  <!-- Ведь изображение может заменить тысячи слов -->
  <img src="image.jpg" alt="Описательный текст">
</li>

Определение потокового содержимого

Потоковое содержимое — это ключ для структурного и семантично верного использования элемента <li>. Включение в него таких тегов должно обеспечивать доступность и SEO-эффективность, несмотря на то что многие из часто используемых тегов относятся к потоковому содержимому.

Сопоставление блочных и строчных элементов

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

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

Особенности вложенного содержимого

Будьте аккуратны при использовании таблиц и вложенных списков — это требует чёткого предположения и тщательного вложения. Старайтесь не использовать элементы, которые обычно используются на уровне всего документа, такие как <header>, <footer> и <main>, чтобы не создавать семантическую путаницу.

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

Визуализация содержимого <li>:

🏎️ <li>: Может содержать -
  ├🏠 Блочные элементы 🏗️, например, `<div>`, `<p>` и др.
  ├🖍️ Строчные элементы 💭, такие как `<span>`, `<a>`.
  ├🖼️ Медиа и таблицы 📸🔢, в частности `<img>`, `<canvas>`, `<table>`.

Элемент <li> — унiversal tool, подходящий под разнообразный контент:

🏡 Здания (блочные элементы) обеспечивают структуру и используют пространство.
🧑‍🤝‍🧑 Коллектив (строчные элементы) эффективно использует свободное пространство.
🎭 Реквизит (медиа и таблицы) обогащает общую картину.

Неправильное использование может привести к хаосу:

💣 Ахтунг! Неправильное соблюдение правил и излишняя вложенность могут привести к **коллапсу**!

Искусство вложенности

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

Оценка вашего содержимого

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

Повышение доступности

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

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

1. Элемент списка <li> – MDN Web Docs — Подробное руководство по использованию <li> и лучшим практикам.

2. HTML-стандарт для элемента <li> — Официальные спецификации относительно <li>.

3. Тег <li> на W3Schools — Практическое руководство с примерами использования тега <li>.

4. Должны ли быть <ol>/<ul> внутри <p> или снаружи? – Stack Overflow — Ответы сообщества о правильном расположении списков и <li>.

5. Свойство list-style в CSS – CSS-Tricks — Дополнительная информация о стилизации списков и элементов <li> с помощью CSS.

6. HTML – Списки на TutorialsPoint — Детальный обзор создания списков в HTML.