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

Question

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

Фрукты

• Яблоко
• Груша
• Апельсин

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

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

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

Answer 3

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

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

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

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

Answer 4

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

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>