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

Это меня уже давно беспокоит, и мне интересно, есть ли консенсус относительно того, как это сделать правильно. Когда я использую список 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тег.

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

Как уже сказал Фелипе Альсакреатенс, первый вариант подойдет.

Если вы хотите убедиться, что ничто под списком не интерпретируется как принадлежащее заголовку, это именно то, для чего предназначены элементы содержимого секционирования 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. -->

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

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

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

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

Редактирование: Стив Фолкнер, один из редакторов W3C HTML5 и 5,1 уже набросал определение в качестве ltэлемента . Это неофициальный проект, который он обсудит для HTML 5.2, не более того.

<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...

Вы также можете использовать этот <figure>элемент, чтобы связать заголовок со своим списком следующим образом:

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

Источник: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (Пример 162)

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

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

Согласно w3.org (обратите внимание, что эта ссылка находится в черновой спецификации HTML 3.0 с истекшим сроком действия ):

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

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

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

который может быть представлен как:

Столовые фрукты

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

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

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