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

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

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

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

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

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

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


css xhtml semantics
person Skilldrick    schedule 09.04.2009    source источник
comment
Вы всегда можете включить теги заголовков внутри привязки и установить для них значение display:inline. Я думаю, как и предлагали другие, использование ‹span› — это правильный путь.   -  person Zack The Human    schedule 09.04.2009
comment
Какой DOCTYPE вы используете? p внутри li кажется мне совершенно правильным.   -  person Alohci    schedule 10.04.2009

Ответы (4)


arrow_upward
4
arrow_downward

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

person Jason DeFontes    schedule 09.04.2009
comment
Лично я бы порекомендовал ‹em›, поскольку семантическая инертность не всегда хороша, особенно если есть реальная семантическая разница. - person Zarel; 25.06.2009

arrow_upward
1
arrow_downward

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

person Jamie Ide    schedule 09.04.2009

arrow_upward
0
arrow_downward

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

<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>
person Andrew Marsh    schedule 24.06.2009

arrow_upward
-1
arrow_downward

  1. Промежуток с отображением: block==div

  2. ‹li> ‹h3>заголовок ‹/h3> ‹h4>подзаголовок ‹/h4> ‹/li>

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

person Itay Moav -Malimovka    schedule 09.04.2009
comment
Это работает, но только если я не заключаю все содержимое li в тег a, что является обломом, потому что у меня есть эффект hover css для ссылки... - person Skilldrick; 09.04.2009
comment
Дайте [a] display: block, а затем сделайте это. - person Itay Moav -Malimovka; 09.04.2009
comment
Однако валидатор все равно будет рассматривать его как встроенный элемент. - person Skilldrick; 10.04.2009