Атрибут id тега <ol>

Описание

Атрибут id задаёт уникальный идентификатор для элемента <ol>. Этот идентификатор может использоваться для:

  • Стилизации через CSS
  • Обращения к элементу в JavaScript
  • Создания якорей для навигации
Пример использования:
<ol id="main-tasks-list"> <li>Главная задача 1</li> <li>Главная задача 2</li> </ol>

Основные правила:

Правило Пример Некорректный пример
Должен быть уникальным в пределах страницы id="user-list" Повторение id на странице
Не должен содержать пробелов id="taskList" id="task list"
Чувствителен к регистру id="MyList" ≠ id="mylist" -

Использование в CSS:

<style> #priority-list { border: 2px solid #d9534f; padding: 15px; } #priority-list li { font-weight: bold; } </style> <ol id="priority-list"> <li>Срочная задача</li> <li>Важная задача</li> </ol>

Использование в JavaScript:

<ol id="dynamic-list"> <li>Исходный элемент</li> </ol> <button onclick="addListItem()">Добавить пункт</button> <script> function addListItem() { const list = document.getElementById('dynamic-list'); const newItem = document.createElement('li'); newItem.textContent = 'Новый элемент ' + (list.children.length + 1); list.appendChild(newItem); } </script>

Рекомендации по использованию:

  • Используйте осмысленные имена, отражающие назначение элемента
  • Придерживайтесь единого стиля именования (camelCase или kebab-case)
  • Избегайте слишком общих имен (например, "list1", "list2")
  • Для групп элементов используйте классы, а не id

Создание якорных ссылок:

<a href="#chapter-list">Перейти к списку глав</a> <!-- ... другой контент ... --> <ol id="chapter-list"> <li>Глава 1</li> <li>Глава 2</li> </ol>

Особенности работы:

  • Элемент можно получить через document.getElementById()
  • ID становится глобальной переменной в некоторых браузерах (не рекомендуется использовать)
  • Высокая специфичность в CSS (0100)
  • Может использоваться в ARIA-атрибутах для доступности

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