Веб-страницы часто содержат сложные структуры данных, и вложенные списки в HTML предоставляют отличный способ организации информации.

Давайте рассмотрим, как создавать вложенные списки с использованием тегов.

Нумерованные вложенные списки

В HTML, вложенные нумерованные списки создаются путем вложения тега <ol> внутрь элемента <li> другого упорядоченного списка.

<ol>
 <li>Главный пункт 1
   <ol>
     <li>Подпункт 1.1</li>
     <li>Подпункт 1.2</li>
   </ol>
 </li>
 <li>Главный пункт 2</li>
</ol>

Этот код создает следующую структуру:

Маркированные вложенные списки

Точно так же, как и с нумерованными списками, можно создать вложенные маркированные списки с использованием тега <ul>.

<ul>
 <li>Главный элемент 1
   <ul>
     <li>Подэлемент 1.1</li>
     <li>Подэлемент 1.2</li>
   </ul>
 </li>
 <li>Главный элемент 2</li>
</ul>

Этот код создает следующую структуру:

Смешанные вложенные списки

Вы также можете комбинировать нумерованные и маркированные списки внутри других списков для создания разнообразных структур.

<ul>
 <li>Главный элемент
   <ol>
     <li>Подэлемент 1</li>
     <li>Подэлемент 2
       <ul>
         <li>Подпункт 2.1</li>
         <li>Подпункт 2.2</li>
       </ul>
     </li>
     <li>Подэлемент 3</li>
   </ol>
 </li>
</ul>

Этот код создает следующую структуру:

Заключение

Вложенные списки являются мощным инструментом для организации контента на веб-страницах, делая их более читаемыми и структурированными. Они предоставляют гибкость в создании сложных макетов и являются важным элементом веб-разработки.