Як семантично надати підпис, заголовок або мітку для списку в HTML

Який правильний спосіб надати семантичний підпис для списку HTML? Наприклад, наступний список має "заголовок" / "підпис".

Фрукти

• Яблуко
• Груша
• Помаранчевий

Як слід поводитися зі словом «фрукт» таким чином, щоб воно було семантично пов’язане із самим списком?

Хоча немає заголовка або елемента заголовка, що ефективно структурує вашу розмітку, може мати той самий ефект. Ось декілька пропозицій:

Вкладений список

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

Заголовок до списку

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

Список визначень

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

Варіант 1

HTML5 має елементи figureіfigcaption , які, як мені здається, працюють досить добре.

Приклад:

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

Потім вони легко стилюються за допомогою CSS.

Варіант 2

Використання CSS3's :: before псевдоелемент може бути хорошим рішенням:

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;
}

Звичайно, ви можете використовувати інший селектор, ніж ul[title]; наприклад, ви можете додати клас "title-as-header" і використовувати ul.title-as-header::beforeзамість цього, або все, що вам потрібно.

Це має побічний ефект, коли ви дасте підказку для всього списку. Якщо вам не потрібна така підказка, замість цього ви можете використовувати атрибут даних (наприклад, <ul data-title="fruit">і ul[data-title]::before { content: attr(data-title); }).

Наскільки мені відомо, у поточних специфікаціях HTML немає положень щодо надання підпису для списку, як і в таблицях. Наразі я б залишився використовувати або класифікований абзац, або тег заголовка.

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

У майбутньому, коли HTML5 набуде більш широкого поширення, ви зможете використовувати теги <legend>та та <figure>зробити це трохи більш семантично.

Для отримання додаткової інформації дивіться цей пост у списку розсилки W3C.

Щоб забезпечити підключення читачів з екрана списку до пов’язаного заголовка, ви можете використовувати aria-labelledbyпідключений до заголовка приблизно idтакий:

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

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

Як зазначалось у попередній відповіді, переконайтесь, що рівень заголовка відповідає порядку заголовка у вашому документі.

Для списку, подібного до таблиці, немає тегу, подібного до підписів. Тому я просто дав би йому <Hx>(x залежно від ваших раніше використовуваних заголовків).

Я знаю, що це старе, але хотів додати відповідь, яку знайшов для майбутніх людей: https://www.w3.org/MarkUp/html3/listheader.html

використовуйте <lh>елемент:

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

Оскільки я намагався знайти рішення зі старішою підтримкою браузера, я маю надто спрощене рішення. Використання стилів відображення таблиць та ідентифікаторів / класів:

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

Потім застосуйте display: table-row;стиль до елемента в CSS:

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

Це працює набагато краще, якщо ви використовуєте список описів, що я робив, коли у мене було таке саме запитання. У цьому випадку ви можете використовувати <div>в HTML і display: table-caption;в CSS, оскільки елементи div підтримуються у списку dl:

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

У CSS ви можете застосувати до підпису різні стилі:

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

Слід зазначити, що table-captionце працює не так добре, ul/olоскільки воно трактується як елемент блоку, і текст буде вирівняний вертикально, чого ви, мабуть, не хочете.

Я тестував це як у Firefox, так і в Chrome.

Ви завжди можете використовувати <label/>для прив’язки мітки до елемента списку:

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