Неупорядоченный список в HTML5 с именем списка / группы

Question

Как бы вы создали неупорядоченный список элементов в HTML5 с именем группы вверху?Элементы должны выглядеть с отступом.

Пример:

GroupName1
    Item1
    Item2
    Item3
GroupName2
    Item4
    Item5

Answer 1

Почему бы просто не создать список в списке?

<ul>
  <li>
    Group 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
    Group 2
    <ul>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </li>
</ul>

Answer 2

Я думаю, ответ scurker - это путь, но если ваши группы действительно отделены друг от друга и, следовательно, не имеют смысла в одном большом списке, вы можете сделать это:*

<section>
    <h1>GroupName1</h1>

    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
</section>

<section>
    <h1>GroupName2</h1>

    <ul>
        <li>Item4</li>
        <li>Item5</li>
    </ul>
</section>