Лучшая практика предоставления заголовка, заголовка или метки для списка в HTML

Ответ 1

Несмотря на то, что элемент заголовка или заголовка не структурирован, ваша разметка эффективно может иметь такой же эффект. Вот несколько советов:

Вложенный список

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

Ответ 2

Вариант 1

В HTML5 есть figure и figcaption элементы, которые я нахожу очень неплохо.

Несмотря на их имена, они не определяются как ограниченные графическими иллюстрациями.

Пример:

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

Затем они легко стилизуются с помощью CSS.

Вариант 2

Использование CSS3:: перед псевдоэлементом может быть хорошим решением:

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

Ответ 3

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

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

В будущем, когда HTML5 получит более широкое применение, вы сможете использовать теги <legend> и <figure>, чтобы выполнить это немного более семантически.

Для получения дополнительной информации см. этот пост в списке рассылки W3C.

Ответ 4

В списке, подобном таблице, нет тега, напоминающего подпись. Поэтому я бы просто дал ему <Hx> (x в зависимости от ваших ранее используемых заголовков).