Как семантически предоставить заголовок, заголовок или метку для списка в 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, подключенный к заголовку с 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>