Пример вложенного списка

Пример вложенного списка


Делаем вложенный список в HTML

Вложенные списки делать довольно просто. Для начала сделаем список первого уровня. После,  внутрь элемента этого списка, под которым будет еще один внутренний список, добавляем второй уровень, используя  для этого парный тег <li></li>. Вроде не сложно, правда? Но! Нужна аккуратность и внимание, чтобы правильно закрыть эти теги.

Разберем пример, где я покажу как можно допустить ошибку.

Вот это правильный код вложенного списка:

<ul>
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>

А этот неправильный.

<ul>
  <li>1</li>
  <ul>
    <li>1.1</li>
    <li>1.2</li>
  </ul>
  <li>2</li>
</ul>

Нашли ошибку? В первом примере список второго уровня присутствует внутри элемента списка первого уровня. А в ошибочном примере второй уровень расположен промеж элементов первого.

Уровней можно создавать сколько душа пожелает и при этом не имеет значения, из чего формируется вложенный список: из упорядоченных или неупорядоченных.

Советую хорошенько запомнить то, в каком порядке идут теги для вложенного списка – для поисковиков это очень важно.

Поехали дальше!