Cara menambahkan judul ke daftar secara semantik

Ini telah mengganggu saya untuk sementara waktu, dan saya bertanya-tanya apakah ada konsensus tentang bagaimana melakukan ini dengan benar. Saat saya menggunakan daftar HTML, bagaimana cara menyertakan header untuk daftar secara semantik?

Salah satu opsinya adalah ini:

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

tetapi secara semantik, <h3>tajuk tidak secara eksplisit dikaitkan dengan<ul>

Opsi lainnya adalah ini:

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

tetapi ini tampaknya agak kotor, karena judulnya sebenarnya bukan salah satu item daftar.

Opsi ini tidak diperbolehkan oleh W3C:

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

sebagai <ul>'s hanya dapat berisi satu atau lebih <li>' s

"Judul daftar" lama <lh>paling masuk akal

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

tapi tentu saja ini bukan bagian resmi dari HTML

Saya pernah mendengarnya menyarankan agar kami menggunakan <label>seperti formulir:

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

tapi ini agak aneh dan toh tidak akan valid.

Sangat mudah untuk melihat masalah semantik saat mencoba memberi gaya pada tajuk daftar saya, di mana saya akhirnya harus meletakkan <h3>tag saya di bagian pertama <li>dan menargetkannya untuk penataan dengan sesuatu seperti:

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

kengerian! Tapi setidaknya dengan cara ini saya bisa mengontrol keseluruhan <ul>, heading dan semuanya, dengan memberi style pada ultag.

Apa cara yang benar untuk melakukan ini? Ada ide?

Seperti yang Felipe Alsacreations katakan, opsi pertama baik-baik saja.

Jika Anda ingin memastikan bahwa tidak ada di bawah daftar yang ditafsirkan sebagai milik heading, untuk itulah elemen konten pembagian HTML5 digunakan. Jadi, misalnya Anda bisa melakukannya

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

Dalam hal ini saya akan menggunakan daftar definisi sebagai berikut:

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

Pilihan pertama Anda adalah yang bagus. Ini yang paling tidak bermasalah dan Anda sudah menemukan alasan yang benar mengapa Anda tidak dapat menggunakan opsi lain.

Ngomong-ngomong, heading Anda IS secara eksplisit terkait dengan <ul>: itu tepat sebelum daftar! ;)

edit: Steve Faulkner, salah satu editor dari W3C HTML5 dan 5.1 telah digambarkan definisi dari sebuah ltelemen . Itu adalah draf tidak resmi yang akan dia diskusikan untuk HTML 5.2, tidak lebih.

a <div> adalah divisi logis dalam konten Anda, secara semantik ini akan menjadi pilihan pertama saya jika saya ingin mengelompokkan judul dengan daftar:

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

maka Anda dapat menggunakan css berikut untuk menata semuanya menjadi satu unit

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

Anda juga bisa menggunakan <figure>elemen untuk menautkan judul ke daftar Anda seperti ini:

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

Sumber: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (Contoh 162)

Coba definisikan kelas baru, ulheader, di css. p.ulheader ~ ul memilih semua yang langsung mengikuti My Header

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

Menurut w3.org (perhatikan bahwa tautan ini ada dalam draf spesifikasi HTML 3.0 yang kedaluwarsa ):

Daftar tak berurutan biasanya adalah daftar item berpoin. HTML 3.0 memberi Anda kemampuan untuk menyesuaikan peluru, untuk dilakukan tanpa peluru dan untuk membungkus item daftar secara horizontal atau vertikal untuk daftar multikolom.

Tag daftar pembuka harus <UL>. Ini diikuti oleh header daftar opsional ( <LH>keterangan </LH>) dan kemudian oleh item daftar pertama ( <LI>). Sebagai contoh:

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

yang dapat diterjemahkan sebagai:

Buah Meja

• apel
• jeruk
• pisang

Catatan: Beberapa dokumen lama mungkin menyertakan header atau teks biasa sebelum elemen LI pertama. Pelaksana agen pengguna HTML 3.0 disarankan untuk memenuhi kemungkinan ini untuk menangani dokumen lama yang berformat buruk.

Saya meletakkan tajuk di dalam ul. Tidak ada aturan yang mengatakan UL hanya boleh mengandung elemen LI.