วิธีเพิ่มส่วนหัวในรายการตามความหมาย

สิ่งนี้รบกวนฉันมาระยะหนึ่งแล้วและฉันสงสัยว่ามีความเห็นตรงกันว่าจะทำอย่างไรให้เหมาะสม เมื่อฉันใช้รายการ 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แท็ก

วิธีที่ถูกต้องในการทำเช่นนี้คืออะไร? ความคิดใด ๆ ?

ดังที่ Felipe Alsacreations ได้กล่าวไปแล้วตัวเลือกแรกก็ใช้ได้

หากคุณต้องการให้แน่ใจว่าไม่มีสิ่งใดที่อยู่ด้านล่างรายการที่ตีความว่าเป็นของส่วนหัวนั่นคือสิ่งที่องค์ประกอบเนื้อหาแบ่งส่วน 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>: อยู่หน้ารายการ! ;)

แก้ไข: สตีฟ Faulkner, หนึ่งในบรรณาธิการของ 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)

ลองกำหนดคลาสใหม่ 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 ไม่มีกฎที่ระบุว่า UL ต้องมีองค์ประกอบ LI เท่านั้น