Listas

As listas de itens ou alíneas podem ser expressas em HTML de três formas distintas: cada uma delas tem sua aplicação, sendo que, naturalmente, a preferência recai sobre a tradicional, ficando as demais como opções para lidar com listas exóticas, que não sequem uma sequência ou simbologia usuais.

A renderização é apresentada em https://jsfiddle.net/a05xhoag/

Listas-padrão

HTML5 oferece diversos recursos para declarar estilo, além de permitir lista dentro de lista. O exemplo abaixo, apesar de inicio e salto exóticos, é uma lista padrão.

<ol type="I" start="2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10" >Gamma</li>
  <li>Delta</li>
</ol>

Listas especiais

Quando o símbolo ou contador é exótico, por exemplo "II.1", deixa de ser possível o uso e controle sobre a contagem automática. Ainda assim pode-se fazer uso das mesmas tags, a solução fica a cargo do atributo value que receberá o rótulo da sequência, e do CSS fixado com ajuda do atributo class.

<ol type="I" class="listaEspecial">
  <li value="II-A">Alpha</li>
  <li value="II-B">Beta</li>
  <li value="X" >Gamma</li>
  <li value="XI">Delta</li>
</ol>

Elas se tornam viáveis apresentarão exatamente a mesma aparência que a lista padrão, mediante o seguinte CSS:

ol.listaEspecial {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
  margin-left: 0;
}
.listaEspecial li:before {
    content:  attr(value) ". ";
    text-align: right;
    display: inline-block; 
    width: 35px; 
    padding-right: 10px;
 }

Listas improvisadas

Vantagem do uso da lista "improvisada" é que ela preserva, no processo de edição ou revisão, o rótulo como parte também editável junto com o restante do parágrafo, não requer interface adicional.

Ela também preserva em sua estrutura todas as informações necessárias para converter em lista especial, de modo que não há contra-indicação se o objetivo for depois submeter o HTML a um parser.

<div class="listaEspecial">
  <p><label>II-1</label> Alpha</p>
  <p><label>II-2</label>Beta</p>
  <p><label>X</label> Gamma</p>
  <p><label>XI</label>Delta</p>
</div>

 div.listaEspecial p {
   padding:0;
   margin:0;
   padding-left: 20px;
 }

 div.listaEspecial label:after {
    content: ". ";
        text-align: right;
 }