Тег <ol>: нумерованный список

Список с порядковыми номерами: шаги инструкции, рейтинг, этапы.

Уровень: начальный 10 разделов 8 минут

1. Что это и зачем

Список с порядковыми номерами: шаги инструкции, рейтинг, этапы.

Каждый тег — это элемент разметки, который сообщает браузеру, какую роль играет его содержимое: заголовок, абзац, ссылка, картинка. Документ строится как дерево таких элементов: одни вкладываются в другие, и браузер по этому дереву строит модель DOM, с которой потом работают CSS и JavaScript.

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

2. Синтаксис и пример

<ol><li>Открыть файл</li><li>Изменить</li><li>Сохранить</li></ol>

Запись выше — базовый вариант использования. Обратите внимание, как тег

    : нумерованный список вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

    3. Нюансы и частые варианты

    У большинства тегов есть атрибуты, уточняющие поведение: у ссылки — адрес, у картинки — источник и alt, у поля — имя и тип. Полный список атрибутов конкретного тега смотрите в базовом курсе HTML на этом сайте.

    В реальной разметке тег

      : нумерованный список встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

      4. Как это работает под капотом

      Каждый тег — это элемент разметки, который сообщает браузеру, какую роль играет его содержимое: заголовок, абзац, ссылка, картинка. Документ строится как дерево таких элементов: одни вкладываются в другие, и браузер по этому дереву строит модель DOM, с которой потом работают CSS и JavaScript.

      Проверяйте вёрстку валидатором W3C: правильная вложенность тегов и закрытие обязательных элементов влияют и на доступность, и на SEO.
      Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

      5. Совместимость и поддержка

      Тег поддерживается всеми современными браузерами и не требует префиксов. Старые браузеры игнорируют незнакомые теги, но HTML-парсер при этом не «ломается»: страница просто покажет содержимое без разметки, поэтому безопасно использовать тег и дополнять его CSS-стилями.

      Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

      6. Распространённые ошибки

      Атрибут start задаёт начальный номер, reversed — обратный порядок.
      Порядок важен — иначе список не должен быть ol.

      7. Практическое задание

      Оформите пошаговую инструкцию из четырёх шагов.

      Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

      8. Как применять в проектах

      В реальном проекте тег встраивается в типовые конструкции страницы: боковые колонки, карточки, формы, меню. Комбинируйте его с семантическими обёртками и следите, чтобы вложенность отражала смысл, а не только форму.

      Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

      9. Чек-лист перед сдачей

      • тег выбран по смыслу, а не «потому что так свёрстал сосед»;
      • вложенность корректна: закрывающий тег на месте (если он обязателен);
      • нужные атрибуты заданы, alt и lang заполнены;
      • значение тега не дублирует соседний элемент без нужды;
      • вкладка в DevTools показывает именно ожидаемое дерево DOM;
      Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

      10. Как закрепить

      Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

      ← Вернуться к курсам