0Pricing
HTML Academy · Урок

Упорядоченные списки: ol, start, reversed и type

Создавайте нумерованные списки и настраивайте их последовательность

«Упорядоченные списки: ol, start, reversed и type» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое упорядоченный список

Упорядоченный список отображает элементы, для которых важна последовательность:

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

Элемент ol

Элемент <ol> (упорядоченный список) по умолчанию отображает элементы списка с последовательными номерами:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

Атрибут start

Атрибут start задаёт начальный номер:

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

Атрибут reversed

Атрибут reversed ведёт отсчёт вниз, а не вверх:

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

Атрибут type

Атрибут type изменяет стиль маркера:

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

type в CSS и HTML

Предпочитайте CSS-свойство list-style-type атрибуту HTML type:

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

Атрибут value у li

Переопределяйте номер отдельных элементов списка с помощью value:

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

Вложенные ol и ul

Списки можно вкладывать — сочетайте упорядоченные и неупорядоченные списки:

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

Семантические варианты использования

Используйте <ol>, когда порядок имеет значение:

  • Пошаговые инструкции
  • Результаты с ранжированием (списки из 10 лучших вариантов)
  • Разделы юридических документов
  • Шаги рецепта
  • Оглавление с пронумерованными разделами

Сброс счётчика в CSS

Счётчики CSS дают полный контроль над стилем нумерации списков:

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

ol для цепочек навигации

Навигация в виде цепочки с семантической точки зрения является упорядоченным списком:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

Быстрая проверка

Какой атрибут заставляет ol вести обратный отсчёт?

Повторение: упорядоченные списки

Основные сведения об упорядоченных списках:

  • <ol> — последовательный список, в котором важен порядок
  • start — начать нумерацию с указанного номера
  • reversed — вести обратный отсчёт
  • type — изменить маркер: 1, a, A, i, I
  • value у <li> — переопределить номер отдельного элемента
  • Для большего контроля используйте CSS-свойство list-style-type и счётчики

Часто задаваемые вопросы

Урок «Упорядоченные списки: ol, start, reversed и type» бесплатный?

Да — полный текст урока «Упорядоченные списки: ol, start, reversed и type» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Упорядоченные списки: ol, start, reversed и type»?

Создавайте нумерованные списки и настраивайте их последовательность Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Упорядоченные списки: ol, start, reversed и type»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Неупорядоченные списки: ul и li
  2. Упорядоченные списки: ol, start, reversed и type
  3. Списки описаний: dl, dt и dd
  4. Вложенные списки и стилизация списков
← Назад к HTML Academy