Cách cung cấp chú thích, tiêu đề hoặc nhãn theo ngữ nghĩa cho danh sách trong HTML

Cách thích hợp để cung cấp chú thích ngữ nghĩa cho danh sách HTML là gì? Ví dụ: danh sách sau có "tiêu đề" / "chú thích".

Trái cây

• táo
• Lê
• trái cam

Từ "fruit" nên được xử lý như thế nào, theo cách mà nó được liên kết về mặt ngữ nghĩa với chính danh sách?

Mặc dù không có chú thích hoặc phần tử tiêu đề cấu trúc đánh dấu của bạn một cách hiệu quả có thể có tác dụng tương tự. Đây là một vài gợi ý:

Danh sách lồng nhau

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

Tiêu đề trước danh sách

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

Danh sách định nghĩa

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

lựa chọn 1

HTML5 có các phần tử figurevàfigcaption mà tôi thấy hoạt động khá độc đáo.

Thí dụ:

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

Sau đó, chúng được tạo kiểu dễ dàng với CSS.

Lựa chọn 2

Sử dụng CSS3's :: trước phần tử giả có thể là một giải pháp tốt:

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

Tất nhiên, bạn có thể sử dụng một bộ chọn khác với ul[title]; ví dụ: bạn có thể thêm một lớp 'title-as-header' và sử dụng ul.title-as-header::beforethay thế hoặc bất cứ thứ gì bạn cần.

Điều này có tác dụng phụ là cung cấp cho bạn một chú giải công cụ cho toàn bộ danh sách. Nếu bạn không muốn một chú giải công cụ như vậy, bạn có thể sử dụng một thuộc tính dữ liệu thay thế (ví dụ: <ul data-title="fruit">và ul[data-title]::before { content: attr(data-title); }).

Theo như tôi biết, không có quy định nào trong các thông số kỹ thuật HTML hiện tại để cung cấp chú thích cho một danh sách, cũng như các bảng. Bây giờ tôi vẫn sử dụng một đoạn văn được phân loại hoặc thẻ tiêu đề.

<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

Trong tương lai, khi HTML5 được chấp nhận rộng rãi hơn, bạn sẽ có thể sử dụng các thẻ <legend>và <figure>để thực hiện điều này theo ngữ nghĩa hơn một chút.

Xem bài đăng này trên danh sách gửi thư W3C để biết thêm thông tin.

Để đảm bảo trình đọc màn hình kết nối danh sách với một tiêu đề được liên kết, bạn có thể sử dụng aria-labelledbykết nối với một tiêu đề idtương tự như vậy:

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

Như đã lưu ý trong câu trả lời trước, hãy đảm bảo rằng cấp tiêu đề của bạn tuân theo thứ tự tiêu đề trong tài liệu của bạn.

Không có thẻ giống như chú thích cho một danh sách như một bảng có. Vì vậy, tôi chỉ cho nó một <Hx>(x tùy thuộc vào các tiêu đề đã sử dụng trước đó của bạn).

Tôi biết điều này đã cũ nhưng muốn thêm câu trả lời mà tôi đã tìm thấy cho những người trong tương lai: https://www.w3.org/MarkUp/html3/listheader.html

sử dụng <lh>phần tử:

<ul>
  <lh>Types of fruit:</lh>
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
</ul>

Vì tôi đang cố gắng tìm một giải pháp với sự hỗ trợ của trình duyệt cũ hơn, tôi có những gì có thể là một giải pháp quá đơn giản hóa. Sử dụng kiểu hiển thị bảng và id / lớp:

    <ul>
        <li id="listCaption">My List</li>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>

Sau đó, áp dụng display: table-row;kiểu cho phần tử trong CSS:

    li#listCaption {
      display: table-row;
      font-size: larger;
      text-decoration: underline; }

Điều này hoạt động tốt hơn nhiều nếu bạn đang sử dụng danh sách mô tả, đó là những gì tôi đã làm khi tôi có cùng một câu hỏi. Trong trường hợp đó, bạn có thể sử dụng <div>trong HTML và display: table-caption;CSS, vì các phần tử div được hỗ trợ trong danh sách dl:

    <dl>
        <div id="caption">Table Caption</div>
        <dt>term</dt>
        <dd>definition</dd>
    </dl>

Trong CSS, bạn có thể áp dụng nhiều kiểu khác nhau cho chú thích:

    #caption {
        display: table-caption;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background: transparent;
        caption-side: top;
        text-align: center; }

Tôi nên lưu ý rằng điều table-captionđó không hoạt động tốt ul/olvì nó được coi như một phần tử khối và văn bản sẽ được căn chỉnh theo chiều dọc, điều mà bạn có thể không muốn.

Tôi đã thử nghiệm điều này trên cả Firefox và Chrome.

Bạn luôn có thể sử dụng <label/>để liên kết nhãn với phần tử danh sách của mình:

<div>
    <label for="list-2">TEST</label>
    <ul id="list-1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <label for="list-2">TEST</label>
    <ol id="list-2">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>