Тег <ol>

Упорядоченный список
  • Категории: Потоковое содержимое
  • Контекст:

    Где ожидается потоковое содержимое.

  • Модель:

    Ноль или более элементов <li>.

Тег <ol> (сокращение от "order list" - упорядоченный список) представляет список элементов, порядок которых имеет значение:

  • топ фильмов
  • пункты договора
  • рейтинг сайтов
  • и т.д.

Упорядоченные списки вместо обычных маркеров сопровождают свои элементы порядковым номером. Если мы удалим или добавим в список новые элементы, номера будут автоматически пересчитаны.

Атрибуты

  • Глобальные атрибуты
  • reversed - меняет порядок списка на обратный
  • start - порядковый номер первой позиции, от которой происходит дальнейший отчет
  • type - тип маркера

  • Использование упорядоченного списка

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

  • Изменение порядка отчета

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

  • Начальное значение отчета

    Начальное значение для отчета списка можно также поменять. Делается это при помощи атрибута start:

  • Изменение маркера

    Изначально в качестве порядкового номера используются арабские цифры. Мы можем изменить данное поведение при помощи атрибута type:

    • 1 - арабские цифры (по умолчанию)
    • a - строчные буквы
    • A - заглавные буквы
    • i - строчные Римские цифры
    • I - заглавные Римские цифры

    Если тип маркера не имеет прямого значения и носит исключительно визуальный характер, то для этих целей лучше использовать CSS-свойство list-style-type:

  • Вложенность списка

    Элементы списка могут иметь любое потоковое содержимое. Таким образом мы можем вкладывать один список в другой, создавая иерархию элементов любой сложности. Например, это могут быть пункты договора:

Поделитесь данной записью с друзьями