Как семантически добавлять заголовок в список

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

Один из вариантов:

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

но семантически заголовок <h3> явно не связан с <ul>

Другой вариант:

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

но это кажется немного грязным, поскольку заголовок на самом деле не является одним из элементов списка.

Этот параметр не разрешен W3C:

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

как <ul> может содержать только один или несколько <li> 's

Старый "заголовок списка" <lh> имеет наибольшее значение

<ul>
    <lh>Fruits I Like:</lh>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

но, конечно, это не официально часть HTML

Я слышал, что он предложил использовать <label> как форму:

<ul>
    <label>Fruits I Like:</label>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

но это немного странно и в любом случае не будет проверять.

Легко увидеть семантические проблемы при попытке стилизации заголовков своих списков, где мне нужно разместить теги <h3> в пределах первого <li> и настроить их для стилизации с помощью чего-то вроде:

ul li:first-of-type {
    list-style: none;
    margin-left: -1em;
    /*some other header styles*/
}

ужас! Но, по крайней мере, таким образом я могу контролировать весь <ul>, заголовок и все, путем создания тега ul.

Каков правильный способ сделать это? Любые идеи?

ОТВЕТЫ

Ответ 1

Как уже сказал Felipe Alsacreations, первый вариант в порядке.

Если вы хотите убедиться, что ничто ниже списка не интерпретируется как принадлежащее к заголовку, это то, для чего предназначены элементы содержимого секции HTML5. Так, например, вы могли бы сделать

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->

Ответ 2

В этом случае я бы использовал список определений так:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

Ответ 3

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

Кстати, ваш заголовок Явным образом связан с <ul>: он прямо перед списком!;)

edit: Стив Фолкнер, один из редакторов W3C HTML5 и 5.1, набросал определение lt element. Это неофициальный проект который он обсудит для HTML 5.2, еще ничего.

Ответ 4

a <div> является логическим делением в вашем контенте, семантически это было бы моим первым выбором, если бы я хотел сгруппировать заголовок со списком:

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

то вы можете использовать следующий css, чтобы объединить все вместе как единое целое

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...

Ответ 5

В соответствии с w3.org (обратите внимание, что эта ссылка находится в Долгосрочная версия HTML 3.0 3.0):

Неупорядоченный список обычно представляет собой маркированный список элементов. HTML 3.0 дает вам возможность настраивать патроны, обойтись без пуль и для переноса элементов списка по горизонтали или вертикали для многоколоночного списки.

Тег открытия списка должен быть <UL>. Затем следует дополнительный список header (<LH> caption </LH>), а затем первым элементом списка (<LI>). Для Пример:

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

который может отображаться как:

Плоды стола

  • яблоки
  • апельсины
  • бананы

Примечание. Некоторые устаревшие документы могут включать заголовки или обычный текст перед первый элемент LI. Разработчикам пользовательских агентов HTML 3.0 рекомендуется чтобы удовлетворить эту возможность, чтобы справиться с плохо сформированным наследием документы.

Ответ 6

Попробуйте определить новый класс, ulheader, в css. p.ulheader ~ ul выбирает все, что сразу следует за My Header

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}

Ответ 7

Я помещаю заголовок внутри ul. Нет правила, согласно которому UL должен содержать только элементы LI.