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

Question

Как правильно предоставить семантическую подпись для списка HTML? Например, следующий список имеет заголовок / заголовок.

Фрукты

• Яблоко
• Груша
• Orange

Как следует обращаться со словом "фрукты" таким образом, чтобы оно семантически ассоциировалось с самим списком?

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

Answer 2

Вариант 1

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

Пример:

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

Затем их легко стилизовать с помощью CSS.

---

Вариант 2

Использование псевдоэлемента :: before в 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); }).

Answer 3

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

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

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

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

Answer 4

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

Answer 5

Вы всегда можете использовать <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>