Получить профессию в Skypro
Задать начальное число для списка в HTML через CSS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Чтобы установить начальное значение для упорядоченного списка, вы можете использовать атрибут start:
<ol start="10">
<li>Проба пера: мы начинаем с 10!</li>
<li>И вот уже единадцатый пункт, без проблем!</li>
</ol>В итоге, нумерация списка начнётся с числа 10, вместо обычного стартового значения 1. Жизненно важно помнить, что тут важен не конечный результат, а сам процесс.
Атрибут 'start': Нумерация списков с произвольного значения
Установка начального значения списка с помощью 'start'
Атрибут start – удобный механизм в HTML5 для начала нумерации элементов списка с любого числа:
<ol start="100">
<li>Остатки прошлого, что начинаются со 100!</li>
<li>Ещё один шаг и мы на 101 месте!</li>
</ol>Итак, вы сами решаете, с какого значения начнётся отсчет, даже если это значение равно 💯.
Компатибельность: HTML5 и HTML 4.01
Не забывать про прошлое – это значит не допустить повторения ошибок! К счастью, несмотря на то что в HTML 4.01 атрибут start был убран, HTML5 вернул его обратно. Всего лишь убедитесь, что используетесь документ <!DOCTYPE html> для корректной работы HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Специальная страница</title>
</head>
<body>
<ol start="3">
<li>Третий пункт – начало списка</li>
<li>Четвёртый пункт, уже лучше, не так ли?</li>
<li>Пятую позицию мы заслужили!</li>
</ol>
</body>
</html>CSS: Повышаем стилистические возможности списков
Когда функционал HTML не удовлетворяет ваши потребности, приходит на помощь CSS с его счётчиками:
- Для задания начального значения в
olиспользуйтеcounter-reset:
ol {
counter-reset: list-counter 4; /* Начинаем с 5 – почему бы и нет? */
}
li {
list-style-type: none; /* Кто сказал, что нам нужны обычные маркеры? */
counter-increment: list-counter; /* И так начинается отсчет */
}
li:before {
content: counter(list-counter) ". "; /* Знаки пунктуации важны */
}- Это, конечно, не новости, но благодаря CSS-счётчикам, ваши списки могут быть преобразованы во что-угодно.
Контролирование нумерации элементов списка: использование атрибута 'value'
Временами, может возникнуть потребность управлять номерами конкретных элементов списка. В таком случае можно применить атрибут value:
<ol>
<li>Просто первый элемент!</li>
<li value="5">Тут мы прыгаем сразу на пятое место, какое приключение!</li>
<li>И вот шестой элемент списка подоспел!</li>
</ol>И таким образом '5' встал на второе место, в то время как остальная нумерация осталась прежней.
Визуализация
Визуализация процесса установления начального значения для ol:
<ol start="5">
<li>Кофе☕</li>
<li>Чай🍵</li>
<li>Молоко🥛</li>
</ol>Это не спортивная гонка, быть первым здесь необязательно:
🏁 1.
🏁 2.
🏁 3.
🏁 4.
👟 5. Кофе
👟 6. Чай
👟 7. МолокоЗдесь каждый "элемент списка" начинается с присвоенного ему номера:
**Традиционная гонка**: 🏁 1. 🏃 2. 🏃 3. 🏃 (Бегун номер 1)
**HTML список**: 🏁 5. 📄 6. 📄 7. 📄 (Элементы списка номер 5)Атрибут start устанавливает начальную позицию для списка.
Способы обхода трудностей: Глубокое руководство
Кроссбраузерная совместимость: Необходимая предосторожность
Ответственность следует вместе с властью. Этот принцип работает и в случае кроссбраузерной совместимости! Тестирование в различных браузерах поможет предотвратить неприятные сюрпризы с отображением элементов.
О заботе о доступности
Убедитесь, что ваши креативные способы нумерации списков не приводят к сбоям в работе технологий помощи и не наводят путаницу при озвучивании контента.
Использование JavaScript: Управление динамическими списками
В быстро меняющемся мире, где списки обновляются каждый час, стоит задуматься об использовании JavaScript для контроля атрибута start или CSS-счётчиков, чтобы обеспечить гибкость и последовательность.
Сборник практических примеров
- Вселенная примеров на JSFiddle и поддержка CodePen — живые демонстрации покажут вам способы использования HTML и CSS.
- Стремитесь к использованию этих практических примеров. Ведь опыт – это всё в нашем деле.
Полезные материалы
- <ol>: Упорядоченный список элементов – HTML: HyperText Markup Language | MDN — Полная информация о
start. - Тег ol в HTML – W3Schools — Пособие по применению тега
start. - HTML Standard – WHATWG — Изнанка истории о том, как
olстал уникальным.