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

HTML

<p><b>З використанням атрибута value</b></p>
<ol> 
	<li value="1">Ноутбук</li> 
	<li>Монітор</li>
	<li>Телефон</li>
</ol>
<ol> 
	<li value="-5">Ноутбук</li> 
	<li>Монітор</li>
	<li>Телефон</li>
</ol>
<ol  type = "A">  
	<li value="2">Ноутбук</li> 
	<li>Монітор</li>
	<li>Телефон</li>
</ol>
<br>
<div class="a1" >
<p><b>Без використання атрибута value</b></p>
<ol> 
	<li >Ноутбук</li> 
	<li>Монітор</li>
	<li>Телефон</li>
</ol>
<ol> 
	<li >Ноутбук</li> 
	<li>Монітор</li>
	<li>Телефон</li>
</ol>
<ol>  
	<li >Ноутбук</li> 
	<li>Монітор</li>
	<li>Телефон</li>
  </ol></div>

CSS

.a1{
  float:left;
  margin-left:-120px

}

HTML

<div class="grid">
    <div>
        <p class="head">value розриває нумерацію</p>
        <ol>
            <li>звичайний перший</li>
            <li value="5">value="5"</li>
            <li>далі рахунок іде від нього</li>
            <li value="-2">value="-2"</li>
            <li>і знову далі</li>
        </ol>
    </div>

    <div>
        <p class="head">у ненумерованому — нічого</p>
        <ul>
            <li>крапка</li>
            <li value="5">value="5" тут мертвий</li>
            <li>крапка</li>
        </ul>
    </div>

    <div>
        <p class="head">type="I" — число те саме, вигляд інший</p>
        <ol type="I">
            <li>перший</li>
            <li value="4">value="4" — це IV</li>
            <li>наступний</li>
        </ol>
    </div>

    <div>
        <p class="head">type="a" — 27 стає «aa»</p>
        <ol type="a">
            <li value="27">value="27"</li>
            <li>наступний</li>
        </ol>
    </div>

    <div>
        <p class="head">value сильніший за start</p>
        <ol start="3">
            <li>start="3"</li>
            <li value="10">value="10"</li>
            <li>далі від десяти</li>
        </ol>
    </div>

    <div>
        <p class="head">reversed — рахунок униз</p>
        <ol reversed>
            <li>перший</li>
            <li value="9">value="9"</li>
            <li>наступний</li>
        </ol>
    </div>

    <div>
        <p class="head">некоректні значення</p>
        <ol>
            <li value="7abc">value="7abc"</li>
            <li value="3.9">value="3.9"</li>
            <li value="">порожнє значення</li>
            <li value="+4">value="+4"</li>
        </ol>
    </div>
</div>

CSS

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.grid > div {
    min-width: 210px;
    padding: 8px 12px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.head {
    margin: 0 0 6px;
    color: #5a6472;
    font: 600 13px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
}

ol,
ul {
    margin: 0;
    padding-left: 34px;
    line-height: 1.7;
}

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