Как семантически предоставить заголовок, заголовок или метку для списка в 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 :: 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]; например, вы можете добавить класс «заголовок как заголовок» и использовать 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команду connected to a head со 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>