1.8. HTML-списки

html_listHTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

маркированный список<ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список<ol> — каждый элемент списка <li> отмечается цифрой,
список определений<dl> — состоит из пар термин <dt><dd> определение.

Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.

Создание HTML-списков

1. Маркированный список

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>
unordered list
Рис. 1. Маркированный список

2. Нумерованный список

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

Блок списка также имеет стили браузера по умолчанию:

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

.

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>
Атрибут Описание, принимаемое значение
reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>
ordered list
Рис. 2. Нумерованный список

3. Список определений

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}

.

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>
  <dt>Режиссер:</dt>
    <dd>Петр Точилин</dd>
  <dt>В ролях:</dt>
    <dd>Андрей Гайдулян</dd>
    <dd>Алексей Гаврилов</dd>
    <dd>Виталий Гогунский</dd>
    <dd>Мария Кожевникова</dd>
</dl>
dl
Рис. 3. Список определений

4. Вложенный список

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

<ul>
 <li>Пункт 1.</li>
  <li>Пункт 2.
    <ul>
      <li>Подпункт 2.1.</li>
       <li>Подпункт 2.2.     
        <ul>
          <li>Подпункт 2.2.1.</li>
          <li>Подпункт 2.2.2.</li>
          </ul>
       </li>          
      <li>Подпункт 2.3.</li>
    </ul>
  </li>
 <li>Пункт 3.</li>
</ul>
ul ul ul
Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:

<ol>
  <li>пункт</li> <!-1.->
  <li>пункт           
    <ol>
      <li>пункт</li> <!-2.1.->
      <li>пункт</li> <!-2.2.->
      <li>пункт
        <ol>
          <li>пункт</li> <!-2.3.1.->
          <li>пункт</li> <!-2.3.2.->
          <li>пункт</li> <!-2.3.3.-> 
        </ol>
      </li> <!-2.3.->
      <li>пункт</li> <!-2.4.->  
    </ol>
  </li> <!-2.->
  <li>пункт</li> <!-3.->        
  <li>пункт</li> <!-4.->        
</ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

ol {
/* убираем стандартную нумерацию */
list-style: none; 
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
counter-reset: li; 
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li; 
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li,".") ". "; 
}
numeric list
Рис. 5. Многоуровневый нумерованный список
  • Константин

    Не подскажете, как в дважды или трижды вложенном ul-списке раскрасить самый внутренний одними css-стилями, не редактируя исходный html-документ?

    • Посмотрите пример http://codepen.io/html5book/pen/ORPVWO.
      Вы просто выстраиваете цепочку, по которой можно дойти до последнего списка и его элементов.
      Если у вас второй уровень вложенности, значит пишем ul ul li {}, если третий — добавляем ещё один ul: ul ul ul li {}. Это так называемые селекторы потомков, которые применяют стили к элементам, расположенным внутри элемента-контейнера.

      • Михаил

        А самый внешний? Так чтоб внутренние вложенные не наследовали? 😉

        • Посмотрите это пример https://codepen.io/html5book/pen/PmwZRd

          • Михаил

            Спасибо, но не совсем то, что имел в виду.
            Точнее: есть многоуровневый список внутри контента; надо внешние элементы списка представить как заголовки (в том числе размер шрифта в относительных единицах (em)); все вложенные уровни оставить шрифтом без изменения. Проба двух вариантов: https://codepen.io/anon/pen/PjrWWK и https://codepen.io/anon/pen/XgLpRL не решают ситуации.
            Есть ли вариант решения, не прибегая к установке размера шрифта в абсолютных значениях?
            То есть чтоб вложенные списки не наследовали установки внешнего уровня… 😉

          • Есть: ul li {color: red; font-size: 1.5em}
            ul li ul li {color: blue; font-size: initial;}

          • Михаил

            Супер решение! Но судя по прочтенному описанию initial кроссбраузерность будет хромать — ослик его вроде бы совсем не кушает (((

          • Такова реальность CSS ((( Поэтому лучше использовать значения в px.

          • Михаил

            Эх… Хотелось найти красивое решение, но не судьбец — кроссбраузерность это наше всё…
            Придется оставлять em и обёртку «стилевым» span-ом… )))
            Спасибо большое за статью и участие!

          • Пожалуйста!

  • Vasiliy

    Спасибо за статью!

  • Nikita

    Привет! Статьи огонь, но у меня возник вопрос. Как поменять стиль(background-color) у вложенного списка? Банальный пример. У самого верхнего списка(.menu) при наведении элемент li подсвечивается красным цветом. При этом второй по вложенности список (.sub_menu) перенимает это свойство и весь .sub_menu становится красный, а нужно допустим, что бы был синий. Сколько не возился так и не получилось, не могу понять, что не так делаю.

    • Здесь дело не в размерах. Вложенный список наследует свойства списка верхнего уровня. Для стилизации нужно использовать селектор потомка http://codepen.io/html5book/pen/PmwZRd, например:
      ul li {color: red;}
      ul li ul li {color: blue;}
      ul li ul li ul li {color: green;}

  • Dim

    Здравствуйте! Подскажите, а как в первый пункт добавить список из определений, так, чтобы после завершения списка определений пошел отсчет со 2-го пункта, а в нем уже начался вложенный нумерованный список: 2.1., 2.2. и т.д.?

    • Здравствуйте. Все тоже самое, что и в примере 5. Добавление списка определений ни на что не повлияет, так как счётчик вы делаете для элементов li.

  • Александр Тимощенко

    http://prntscr.com/f4envs
    Последние новости — каждая строка в теге li
    Как сделать чтобы не было переноса слов, т.е. сколько влезло — столько показывает ) А то всё съезжает )

    • Ленитесь вы гуглить, white-space:nowrap;

      • Александр Тимощенко

        Как раз таки гуглил, просто чтобы гуглить надо правильно забить))) а у меня по запросу ширина ячейки li или подобному ничего не выдало ))) спасибо )))))

        • )) Пожалуйста.

          • Александр Тимощенко

            а по аналогу сделать точный размер строки (ширину) можно?

          • Нет. Но можно сделать выравнивание текста по ширине.

  • Dim

    Что-то опять «затык» со многоуровневым нумерованным списком: пытаюсь закрыть тегом , как в образце, и не дает, программа указывает его как недопустимый. А без него нет возврата к нумерации на уровень выше. Либо появляется почему-то маркер перед номером, хотя теги везде убрал. Перебрал уже все варианты, heeeelp !! ))

    • Нужен ваш код списка полностью

      • Dim

        Работаю на jsfiddle, или как лучше поделиться?

    • Dim Nikson

      Елена, спасибо большое за помощь, теперь все отображается корректно, без лишних маркеров и пр.

  • Михаил

    Спасибо за готовое решение по многоуровневому нумерованному списку — зачётно!

  • One_Two

    Добрый день!
    Подскажите пожалуйста, как в многоуровневом нумерованном меню сделать подпункты 1.1, 1.2 и тд?
    Т.е. чтобы было так:
    1. Текст
    1.1. Текст
    1.2. Текст
    Совсем голову сломал..(

    • Добрый день. Пятый пункт этой статьи вам в этом не помог?

      • One_Two

        По пятому пункту и делал, пункты 2.1, 2.2 делаются легко. А пункты 1.1, 1.2 никак не получается.
        Создаю так:

        Текст

        Текст
        Текст

        Текст
        Текст

        Хочу в таком виде получить картину:
        1. Текст
        1.1 Текст
        1.2 Текст
        2.
        3.

        • Скиньте ссылку на онлайн-редактор с кодом или пришлите код страницы на почту, адрес в подвале.

          • One_Two
          • Класс уберите из стилей или задайте его для внешнего контейнера, но не для списка.

          • One_Two

            Спасибо! Решил вообще не использовать класс.

          • Пожалуйста ☺, надеюсь, вы поняли, в чем ошибка, вы поставили счетчик только на вложенный список .

  • Salvatore

    Неужели нельзя маркеры убрать без использования CSS?

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