Jak semantycznie dodać nagłówek do listy

Od jakiegoś czasu mnie to niepokoi i zastanawiam się, czy istnieje jakikolwiek konsensus co do tego, jak to zrobić poprawnie. Kiedy używam listy HTML, jak semantycznie dołączyć nagłówek listy?

Jedna opcja jest taka:

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

ale semantycznie <h3>nagłówek nie jest jawnie powiązany z<ul>

Inna opcja jest taka:

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

ale wydaje się to trochę brudne, ponieważ nagłówek nie jest tak naprawdę jednym z elementów listy.

Ta opcja nie jest dozwolona przez W3C:

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

as <ul>może zawierać tylko jeden lub więcej <li>plików

<lh>Najbardziej sensowny jest stary „nagłówek listy”

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

ale oczywiście nie jest oficjalnie częścią HTML

Słyszałem, że sugeruje, abyśmy używali <label>tak jak formularza:

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

ale jest to trochę dziwne i i tak się nie sprawdzi.

Łatwo jest zauważyć problemy semantyczne, próbując stylizować moje nagłówki listy, gdzie ostatecznie muszę umieścić moje <h3>tagi w pierwszym <li>i skierować je do stylizacji za pomocą czegoś takiego:

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

horrory! Ale przynajmniej w ten sposób mogę kontrolować całość <ul>, nagłówki i wszystko, stylizując ultag.

Jaki jest właściwy sposób, aby to zrobić? Jakieś pomysły?

Jak już powiedział Felipe Alsacreations, pierwsza opcja jest w porządku.

Jeśli chcesz mieć pewność, że nic poniżej listy nie zostanie zinterpretowane jako należące do nagłówka, właśnie do tego służą elementy treści sekcji HTML5. Na przykład możesz to zrobić

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

W tym przypadku użyłbym listy definicji jako takiej:

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

Twoja pierwsza opcja jest dobra. Jest to najmniej problematyczne i już znalazłeś prawidłowe powody, dla których nie możesz użyć innych opcji.

Nawiasem mówiąc, twój nagłówek JEST wyraźnie powiązany z <ul>: jest tuż przed listą! ;)

edit: Steve Faulkner, jeden z redaktorów W3C HTML5 i 5.1 zostały nakreślone definicję danego ltelementu . To nieoficjalna wersja robocza , którą omówi w HTML 5.2, nic więcej.

<div> to logiczny podział treści, semantycznie byłby to mój pierwszy wybór, gdybym chciał zgrupować nagłówek z listą:

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

następnie możesz użyć następującego css, aby stylizować wszystko razem jako jedną jednostkę

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

Możesz także użyć <figure>elementu, aby połączyć nagłówek z listą w następujący sposób:

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

Źródło: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (przykład 162)

Spróbuj zdefiniować nową klasę, ulheader, w css. p.ulheader ~ ul wybiera wszystko, co następuje bezpośrednio po My Header

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

Według w3.org (zauważ, że ten link znajduje się w nieaktualnej wersji roboczej specyfikacji HTML 3.0 ):

Lista nieuporządkowana to zazwyczaj lista pozycji z punktami. HTML 3.0 daje możliwość dostosowania punktorów, obejścia się bez punktorów i zawijania elementów listy w poziomie lub w pionie w przypadku list wielokolumnowych.

Otwierający tag listy musi być <UL>. Po nim następuje opcjonalny nagłówek listy ( <LH>podpis </LH>), a następnie pierwsza pozycja listy ( <LI>). Na przykład:

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

które można by renderować jako:

Owoce stołowe

• jabłka
• pomarańcze
• banany

Uwaga: niektóre starsze dokumenty mogą zawierać nagłówki lub zwykły tekst przed pierwszym elementem LI. Implementatorom agentów użytkownika HTML 3.0 zaleca się uwzględnienie tej możliwości w celu obsługi źle utworzonych starszych dokumentów.

Nagłówek umieściłem wewnątrz ul. Nie ma reguły mówiącej, że UL musi zawierać tylko elementy LI.