Як семантично додати заголовок до списку

Це мене турбує вже деякий час, і мені цікаво, чи є консенсус щодо того, як це зробити правильно. Як я використовую список 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>'s може містити лише одне або більше <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, більше нічого.

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

Ви також можете використати <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)

Спробуйте визначити в css новий клас, ulheader. p.ulheader ~ ul вибирає все, що одразу слідує за Моїм заголовком

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. Не існує жодного правила, яке говорить, що UL повинен містити лише елементи LI.