Атрибут type тега <li> — вид маркера пункту списку

HTML

<hr>
<p><b>Виберіть значення <code>type</code> для нумерованого списку:</b>
<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>
  <option value="none" name="value">none</option>
</select>
  </p>
<nav id='text'>Значення type встановлено за замовчуванням</nav>
<p>Обов'язкові предмети, що вивчаються в школі:</p>
<ol >
    <li >Українська мова</li>
    <li id="type">Математика</li>
    <li >Англійська мова</li>
  </ol>
<hr>
<hr>
<p><b>Виберіть значення <code>type</code> для маркованого списку:</b>
<select id="forma">
   <option value="square" name="value">square</option>
   <option value="circle" name="value">circle</option>
  <option value="disc" name="value">disc</option>
   <option value="none" name="value">none</option>
</select>
  </p>
<nav id='texta'>Значення type встановлено за замовчуванням</nav>
<p>Обов'язкові предмети, що вивчаються в школі:</p>
<ul>
    <li >Українська мова</li>
    <li  id="typee">Математика</li>
    <li >Англійська мова</li>
  </ul>
<hr>
<hr>

JS

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

var wrappers = document.getElementById('typee');
var forma = document.getElementById('forma');
var texta = document.getElementById('texta');

var textArray = { 'A': 'Великі літери.',
  'a': 'Малі літери.',
  'I': 'Великі римські символи.',
  'i': 'Малі римські символи.',
  '1': 'Арабські цифри.', 'none': 'Нумерація відсутня.' };

var textsArray = { 'square': 'Вид маркера - заповнений квадрат.',
  'circle': 'Вид маркера - пусте коло.',
  'disc': 'Вид маркера - заповнене коло.',

  'none': 'Маркер - відсутній.' };

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);
};


forma.onchange = function () {
  for (var i = 0; i < forma.options.length; i++) {if (window.CP.shouldStopExecution(1)) break;
    if (forma.options[i].selected == true) {
      wrappers.type = forma.options[i].value;
      texta.innerHTML = textsArray[forma.options[i].value];
    }
  }window.CP.exitedLoop(1);
};
//# sourceURL=pen.js

HTML

<h3>1. Атрибут type — по одному пункту</h3>
<ol>
    <li>звичайний пункт, маркер типовий</li>
    <li type="a">той самий список, але маркер — латинська літера</li>
    <li>третій пункт: маркер повернувся, а номер не збився</li>
    <li type="I">римська цифра — знову лише тут</li>
    <li value="10">а ось value міняє САМ номер</li>
    <li>і всі наступні їдуть від нового числа</li>
</ol>

<h3>2. Те саме стилями — одним правилом на весь список</h3>
<ol class="alpha">
    <li>перший</li>
    <li>другий</li>
    <li>третій</li>
</ol>

<h3>3. Маркований список: три значення атрибута й те, чого в нього немає</h3>
<ul>
    <li>типовий маркер</li>
    <li type="circle">type="circle"</li>
    <li type="square">type="square"</li>
</ul>
<ul class="strilka">
    <li>власний символ замість маркера</li>
    <li>такого атрибут не вмів ніколи</li>
</ul>
<ol class="nuli">
    <li>нумерація з провідним нулем</li>
    <li>теж лише в стилях</li>
</ol>

CSS

h3 {
    margin: 22px 0 6px;
    font-size: 1em;
    color: #1b4f9c;
}

ol,
ul {
    max-width: 520px;
    padding-left: 34px;
    line-height: 1.7;
}

.alpha {
    list-style-type: lower-alpha;
}

.strilka {
    list-style-type: "→ ";
}

.nuli {
    list-style-type: decimal-leading-zero;
}

li::marker {
    color: #c0392b;
    font-weight: 700;
}

<hr>
<p><b>Приклад значень <code>type</code> для маркованого списку:</b>
<p>Обов'язкові предмети, що вивчаються в школі:</p>
<ul>
    <li type="square">Українська мова</li>
    <li>Математика</li>
    <li type="circle">Англійська мова</li>
  </ul>
<hr>
<p><b>Приклад значень <code>type</code> для нумерованого списку:</b>
<p>Обов'язкові предмети, що вивчаються в школі:</p>
<ol >
    <li type="A">Українська мова</li>
    <li type="I">Математика</li>
    <li type="a">Англійська мова</li>
  </ol>
<hr>