Какой лучший семантический способ сделать перерыв в навигационной панели на основе ul?

Question

Я делаю горизонтальную панель навигации на основе ul, но я хочу, чтобы в каждом элементе было по два уровня, примерно так:

     Nav item1            Nav item2             Nav item3
Nav item1 subtitle    Nav item2 subtitle    Nav item3 subtitle

Субтитры должны быть в другом стиле, чем основной элемент навигации. Сначала я сделал это (наивно?), Используя вложенный p внутри li, но W3C сказал, что не может вложить p внутри li.

По сути, я стараюсь избегать br, главным образом потому, что это неправильная семантика, не так ли? Я поступаю неправильно?

РЕДАКТИРОВАТЬ: я должен был добавить, я хочу элемент навигации и его субтитры в том же теге привязки, потому что они являются одной ссылкой (и я хочу, чтобы: hover работал). Это исключает использование нескольких тегов заголовков в пределах библиотеки.

РЕДАКТИРОВАТЬ 2: ответы были полезны, спасибо. Интересно отметить, что хотя было сказано, что block span == div, W3C-валидатор это не так. Вы можете всегда иметь вложенный промежуток внутри якоря, даже если span: display: block, но вы не можете, например, иметь отображение: встроенный h1 внутри якоря, потому что валидатор не проверяет файлы CSS и HTML вместе.

Answer 1

Вы можете использовать span, поскольку это семантически инертно, а затем присвоить ему стиль display: block.

Answer 2

Мое мнение таково, что <br /> семантически подходит для разрыва строки, разделяющего заголовок и подзаголовок. Вы можете оформить его по-разному, используя <span>.

Answer 3

Вы должны использовать список словаря вместо обычного неупорядоченного списка. Ваш пример должен быть.

<dl>
  <dt>
    Nav Item 1
  </dt>
  <dd>
    Nav Item 1 Subtitle
  </dd>
  <dt>
    Nav Item 2
  </dt>
  <dd>
    Nav Item 2 Subtitle
  </dd>
  <dt>
    Nav Item 2
  </dt>
  <dd>
    Nav Item 2 Subtitle
  </dd>
</dl>

Или в HTML5 или XHTML 2.0 Вы можете сделать

<dl>
  <di>
    <dt>
      Nav Item 1
    </dt>
    <dd>
      Nav Item 1 Subtitle
    </dd>
  </di>
  <di>
    <dt>
      Nav Item 2
    </dt>
    <dd>
      Nav Item 2 Subtitle
    </dd>
  </di>
  <di>
    <dt>
      Nav Item 2
    </dt>
    <dd>
      Nav Item 2 Subtitle
    </dd>
  </di>
</dl>

Answer 4

1. Диапазон с отображением: блок == div

3. название

   подзаголовок

(или любые другие возможные теги H.