Чат веб-разработчиков
Вложенный список в HTML

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

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

Приведем пример, указав, каким образом можно допустить ошибку в решении такой задачи.

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

Код доступен только после покупки курса HTML для начинающих.

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

Код доступен только после покупки курса HTML для начинающих.

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

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

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

Код доступен только после покупки курса HTML для начинающих.

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

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

Читайте также
Комментарии


Vlad
Vlad

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

ivashkevich
ivashkevich

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

Dmixer
Dmixer

Артем,добрый день!Подскажите пожалуйста,у меня маркеры поменяны местами.Черный маркер имеет другую геометрическую форму.Это версия нотпэда,или я где-то допустил ошибку?Открывал через разные браузеры.

ivashkevich
ivashkevich

Добрый день! Скиньте ваш код в комментариях, гляну. Мне кажется просто другая версия браузера.

Dmixer
Dmixer
<ul>
      <li>Крепления
         <ul>
            <li>MTB</li>
            <li>Look и SPD</li>
         </ul>
       </li>
 </ul>
ivashkevich
ivashkevich

Всё норм, просто другой браузер. Маркеры можно и явно указать - http://htmlbook.ru/content/svoystva-spiskov

Dmixer
Dmixer

Благодарю!

WebShaker
WebShaker

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

ivashkevich
ivashkevich

Всё правильно говорите) Это проверка на внимательность была :)

WebShaker
WebShaker

То есть уже исправили? я уже подумал что там чтото неправильно.

ivashkevich
ivashkevich

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

ImmortalPsych
ImmortalPsych

Доброго времени суток, автор! Спасибо за учебное пособие!
Вот код на нумерованный список с вложением (научился по твоему пособию))):

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

Норм всё)

ImmortalPsych
ImmortalPsych

Я тут такую речь бахнул, а потом смотрю, ты изменил комент)) Спасиб