Bir listeye anlamsal olarak nasıl başlık eklenir

Bu beni bir süredir rahatsız ediyor ve bunun nasıl düzgün yapılacağına dair herhangi bir fikir birliği olup olmadığını merak ediyorum. Bir HTML listesi kullandığımda, liste için semantik olarak nasıl bir başlık eklerim?

Seçeneklerden biri şudur:

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

ancak anlamsal olarak <h3>başlık açıkça ilişkili değildir<ul>

Başka bir seçenek de şudur:

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

ancak başlık liste öğelerinden biri olmadığı için bu biraz kirli görünüyor.

Bu seçeneğe W3C tarafından izin verilmiyor:

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

olarak <ul>Sadece bir tane ya da daha fazla içerebilirler <li>s '

Eski "liste başlığı" <lh>en mantıklı olanıdır

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

ama tabii ki resmi olarak HTML'nin bir parçası değil

<label>Tıpkı bir form gibi kullanmamızı önerdiğini duydum :

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

ama bu biraz garip ve yine de geçerli olmayacak.

Liste başlıklarımı biçimlendirmeye çalışırken anlamsal sorunları görmek kolaydır, burada <h3>etiketlerimi ilk sıraya koymam <li>ve bunları aşağıdaki gibi şekillendirme için hedeflemem gerekir:

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

dehşeti! Ama en azından bu şekilde <ul>, uletiketi şekillendirerek başlığın tamamını , başlığını ve tümünü kontrol edebilirim .

Bunu yapmanın doğru yolu nedir? Herhangi bir fikir?

Felipe Alsacreations'ın da söylediği gibi, ilk seçenek sorun değil.

Listenin altındaki hiçbir şeyin başlığa ait olarak yorumlanmadığından emin olmak istiyorsanız, HTML5 bölümleme içerik öğelerinin amacı budur. Yani, örneğin yapabilirsin

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

Bu durumda, şu şekilde bir tanım listesi kullanırdım:

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

İlk seçeneğiniz iyi olanıdır. En az sorunlu olanıdır ve diğer seçenekleri neden kullanamadığınız için doğru nedenleri zaten buldunuz.

Bu arada, başlığınız açıkça şununla ilişkilidir <ul>: listenin hemen önünde! ;)

düzenleme: W3C HTML5 ve 5.1 editörlerinden Steve Faulkner, bir elemanın tanımını çizdi . Bu , HTML 5.2 için tartışacağı resmi olmayan bir taslak , daha fazlası değil.lt

a <div>, içeriğinizdeki mantıksal bir bölümdür, eğer başlığı listeyle gruplamak istersem anlamsal olarak bu benim ilk tercihim olurdu:

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

daha sonra her şeyi tek bir birim olarak biçimlendirmek için aşağıdaki css'yi kullanabilirsiniz

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

<figure>Öğeyi, aşağıdaki gibi bir başlığı listeye bağlamak için de kullanabilirsiniz :

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

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

Css'de yeni bir sınıf olan ulheader tanımlamayı deneyin. p.ulheader ~ ul, Başlığımdan hemen sonra gelenleri seçer

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

W3.org'a göre (bu bağlantının süresi dolmuş taslak HTML 3.0 spesifikasyonunda olduğuna dikkat edin ):

Sırasız liste tipik olarak madde işaretli öğeler listesidir. HTML 3.0, madde işaretlerini özelleştirme, madde işaretleri olmadan yapma ve çok sütunlu listeler için liste öğelerini yatay veya dikey olarak kaydırma yeteneği sağlar.

Açılış listesi etiketi olmalıdır <UL>. Ardından isteğe bağlı bir liste başlığı ( <LH>başlık </LH>) ve ardından ilk liste öğesi ( <LI>) gelir. Örneğin:

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

şu şekilde oluşturulabilir:

Sofra meyvesi

• elmalar
• portakal
• muz

Not: Bazı eski belgeler, ilk LI öğesinden önce başlıklar veya düz metin içerebilir. HTML 3.0 kullanıcı aracılarının uygulayıcılarının, kötü biçimlendirilmiş eski belgeleri işlemek için bu olasılığı karşılamaları önerilir.

Başlığı ul'nin içine koydum. UL'nin yalnızca LI öğeleri içermesi gerektiğini söyleyen bir kural yoktur.