Какая предпочтительная семантическая и доступная разметка для этого контакта iOS, например, список делителей?

Question

Какая предпочтительная семантическая и доступная разметка для этого списка делителей?

Я использую jQuery mobile для проекта, и он использует эту наценку

<ul data-role="listview" data-dividertheme="d" data-inset="true"> 
    <li data-role="list-divider">A</li> 
    <li><a href="index.html">Adam Kinkaid</a></li> 
    <li><a href="index.html">Alex Wickerham</a></li> 
    <li><a href="index.html">Avery Johnson</a></li> 
    <li data-role="list-divider">B</li> 
    <li><a href="index.html">Bob Cabot</a></li> 
    <li data-role="list-divider">C</li> 
    <li><a href="index.html">Caleb Booth</a></li> 
    <li><a href="index.html">Christopher Adams</a></li> 
</ul>

Я думаю, что для разделителей (A, B, C ...) следует использовать теги HTML-заголовков.

Answer 1

Определенно, не ul, поскольку он является алфавитным, он должен быть либо ol с list-style-type:upper-alpha; с вложенным списком.

Я бы пошел с HTML что-то вроде:

<ol>
   <li>
      <ul>
         <li>Adam</li>
         <li>Alan</li>
      </ul>
   </li>
</ol>

Образец: http://jsfiddle.net/easwee/8UUbh/5/

Answer 2

Я бы использовал список определений

<dl data-role="listview" data-dividertheme="d" data-inset="true"> 
   <dt data-role="list-divider">A</dt>
   <dd>blblblaba</dd>
</dl>

Я знаю, что заголовки не являются заголовками определений, но ясно, какие элементы являются разделителями, а какие - содержимым.

edit Я думаю, что решение @ easwee намного лучше с семантической точки зрения.