Атрибут start тега <ol> — номер початку списку

<p><b>Приклад використання атрибуту <code>start</code></b></p>
<p>Обов'язкові предмети, що вивчаються в школі:</p>
<ol start = "-3">
    <li>Українська мова</li>
    <li>Математика</li>
    <li>Англійська мова</li>
    <li>Природознавство</li>
    <li>Інформатика</li>
    <li>Фізична культура</li>
  </ol>
<br><br>
<p><b>Приклад без використання атрибуту "start" </b></p>
<p>Обов'язкові предмети, що вивчаються в школі:</p>
<ol >
    <li>Українська мова</li>
    <li>Математика</li>
    <li>Англійська мова</li>
    <li>Природознавство</li>
    <li>Інформатика</li>
    <li>Фізична культура</li>
  </ol>

HTML

<p><b>Приклад використання атрибуту <code>start</code></b></p>
<p id="text"> Початкове значення: 1 </p>
<input type="range" id="range" min="0" max="100" step="1" name="range" >
<input type="button" value="Встановити значення" onclick="f()">

<p>Виберіть потрібне значення для <code>type</code>:

<select id="form">
   <option value="A" name="value">A</option>
  <option value="a" name="value">a</option>
   <option value="I" name="value">I</option>
   <option value="i" name="value">i</option>
   <option value="1" name="value">1</option>
</select>
  </p>
<nav id='text'>Значення type встановлено за замовчувнням</nav>
<hr>

<p>Обов'язкові предмети, що вивчаються в школі:</p>
<ol id="type" start="1">
    <li>Українська мова</li>
    <li>Математика</li>
    <li>Англійська мова</li>
    <li>Природознавство</li>
    <li>Інформатика</li>
    <li>Фізична культура</li>
  </ol>

JS

function f() {
  var start = document.getElementById("range").value;
  var type = document.getElementById("type");
  type.setAttribute("start", start);
  text.innerHTML = "Поточне значення " + start;
}

var wrapper = document.getElementById('type');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'A': 'Великі латинські букви (A, B, C, D).',
  'a': 'Малі латинські літери (a, b, c, d).',
  'I': 'Вид маркера - заповнений квадрат.',
  'i': 'Малі римські числа (i, ii, iii, iv).',
  '1': 'Без задання. Звичайні числа (1, 2, 3, 4).' };

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      wrapper.type = form.options[i].value;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

HTML

<p><b>Приклад використання атрибуту <code>start</code></b></p>
<p id="text"> Початкове значення: 1 </p>
<input type="range" id="range" min="0" max="100" step="1" name="range" >
<input type="button" value="Встановити значення" onclick="f()">

<p>Місяці:</p>
 <ol id="m1" name="m1" start="1">
   <li>Грудень</li>
   <li>Листопад</li>
   <li>Жовтень</li>
   <li>Вересень</li>
   <li>Серпень</li>
   <li>Липень</li>
   <li>Червень</li>
   <li>Травень</li>
   <li>Квітень</li>
   <li>Березень</li>
   <li>Лютий</li>
   <li>Січень</li>
  </ol>

JS

function f() {
  var start = document.getElementById("range").value;
  var m1 = document.getElementById("m1");
  m1.setAttribute("start", start);
  text.innerHTML = "Поточне значення " + start;
}
//# sourceURL=pen.js

HTML

<h3>1. <code>start="5"</code></h3>
<ol start="5">
  <li>Розмітка</li>
  <li>Стилі</li>
  <li>Перевірка</li>
</ol>

<h3>2. Розірваний список: <code>value</code> в пункті</h3>
<ol>
  <li>Підготувати текст</li>
  <li>Зверстати сторінку</li>
</ol>
<p class="note">Тут між пунктами стоїть абзац, а список нижче продовжує нумерацію.</p>
<ol start="3">
  <li>Перевірити на телефоні</li>
  <li value="10">Викласти на сервер</li>
  <li>Перевірити ще раз</li>
</ol>

<h3>3. <code>reversed start="10"</code></h3>
<ol reversed start="10">
  <li>Десяте місце</li>
  <li>Девʼяте місце</li>
  <li>Восьме місце</li>
</ol>

CSS

h3 { font-size: 1rem; margin: 1.2em 0 .4em; }
ol { margin: .3em 0; }
.note { font-size: .9rem; color: #555; margin: .4em 0; }