Làm thế nào để thêm tiêu đề vào danh sách

Điều này đã làm phiền tôi trong một thời gian và tôi tự hỏi liệu có sự đồng thuận nào về cách làm điều này đúng cách không. Khi tôi đang sử dụng danh sách HTML, làm thế nào để tôi bao gồm một tiêu đề cho danh sách?

Một lựa chọn là:

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

nhưng về mặt ngữ nghĩa, <h3>tiêu đề không được liên kết rõ ràng với<ul>

Một lựa chọn khác là:

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

nhưng điều này có vẻ hơi bẩn, vì tiêu đề không thực sự là một trong những mục danh sách.

Tùy chọn này không được W3C cho phép:

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

như <ul>'s chỉ có thể chứa một hoặc nhiều <li>' s

"Danh sách tiêu đề" cũ <lh>có ý nghĩa nhất

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

nhưng tất nhiên nó không phải là một phần chính thức của HTML

Tôi đã nghe nó gợi ý rằng chúng tôi sử dụng <label>giống như một hình thức:

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

nhưng điều này hơi lạ và dù sao cũng sẽ không xác nhận.

Thật dễ dàng để thấy các vấn đề ngữ nghĩa khi cố gắng tạo kiểu cho các tiêu đề danh sách của tôi, nơi cuối cùng tôi cần đặt <h3>các thẻ của mình trong đầu tiên <li>và nhắm mục tiêu chúng để tạo kiểu với một cái gì đó như:

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

kinh hoàng! Nhưng ít nhất theo cách này tôi có thể kiểm soát toàn bộ <ul>, tiêu đề và tất cả, bằng cách tạo kiểu cho ulthẻ.

cách chính xác để làm điều này là gì? Có ý kiến ​​gì không?

Như Felipe Alsacreations đã nói, lựa chọn đầu tiên là ổn.

Nếu bạn muốn đảm bảo rằng không có gì bên dưới danh sách được hiểu là thuộc về tiêu đề, đó chính xác là những gì các yếu tố nội dung của phần HTML5 dành cho. Vì vậy, ví dụ bạn có thể làm

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

Trong trường hợp này tôi sẽ sử dụng một danh sách định nghĩa như sau:

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

Lựa chọn đầu tiên của bạn là một lựa chọn tốt. Đây là vấn đề ít rắc rối nhất và bạn đã tìm thấy những lý do chính xác tại sao bạn không thể sử dụng các tùy chọn khác.

Nhân tiện, tiêu đề của bạn được liên kết rõ ràng với <ul>: nó ở ngay trước danh sách! ;)

chỉnh sửa: Steve Faulkner, một trong những biên tập viên của W3C HTML5 và 5.1 đã phác thảo một định nghĩa về một ltyếu tố . Đó là một dự thảo không chính thức mà anh ấy sẽ thảo luận cho HTML 5.2, chưa có gì nữa.

a <div> là một phân chia hợp lý trong nội dung của bạn, về mặt ngữ nghĩa, đây sẽ là lựa chọn đầu tiên của tôi nếu tôi muốn nhóm tiêu đề với danh sách:

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

sau đó bạn có thể sử dụng css sau để tạo kiểu mọi thứ với nhau như một đơn vị

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

Bạn cũng có thể sử dụng <figure>phần tử để liên kết một tiêu đề với danh sách của bạn như thế này:

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

Nguồn: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (Ví dụ 162)

Hãy thử định nghĩa một lớp mới, ulheader, trong css. p.ulheader ~ ul chọn tất cả những gì ngay sau Tiêu đề của tôi

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

Theo w3.org (lưu ý rằng liên kết này nằm trong bản dự thảo HTML 3.0 đã hết hạn sử dụng ):

Một danh sách không có thứ tự thường là một danh sách các mục có dấu đầu dòng. HTML 3.0 cung cấp cho bạn khả năng tùy chỉnh các viên đạn, làm mà không cần đạn và bọc các mục danh sách theo chiều ngang hoặc chiều dọc cho danh sách nhiều màu.

Thẻ danh sách mở phải là <UL>. Nó được theo sau bởi một tiêu đề danh sách tùy chọn ( <LH>chú thích </LH>) và sau đó là mục danh sách đầu tiên ( <LI>). Ví dụ:

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

có thể được hiển thị là:

Trái cây để bàn

• táo
• những quả cam
• chuối

Lưu ý: Một số tài liệu cũ có thể bao gồm các tiêu đề hoặc văn bản thuần túy trước phần tử LI đầu tiên. Những người triển khai các tác nhân người dùng HTML 3.0 được khuyên nên phục vụ cho khả năng này để xử lý các tài liệu kế thừa được hình thành xấu.

Tôi đặt tiêu đề bên trong ul. Không có quy tắc nào nói rằng UL phải chỉ chứa các phần tử LI.