26.02.2017   2367
Вложенный список в HTML

Делаем вложенный список в 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>

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

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

Давайте добавим к одной из книг её содержание:

...
<h3>Содержание книги</h3>
<ul>
  <li>1. Как создавать чистый код
    <ul>
      <li>1.1 Правильно называем переменные</li>
      <li>1.2 Правильно называем функции</li>
    </ul>
  </li>
  <li>2. Как делать из плохого кода хороший</li>
</ul>
...

Результат в браузере:

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

Домашнее задание
Для просмотра нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

КОММЕНТАРИИ

 Vlad 2017-08-22 22:35:18
0

Зачем в маркированном списке вы использовали цифры... Для это ведь лучше подходит нумерованный список? В браузере отражаться и маркировка и цифра... это не есть хорошо )))

Ответить
  •  ivashkevich 2017-08-24 16:44:23
    0

    Верное замечание) Писал пример ночью - вот и результат

    Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности