it-swarm.com.ru

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

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

фрукты

  • Apple
  • Груша
  • Оранжевый

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

60
Jon P

Хотя элемент заголовка или заголовка не структурирован, ваша разметка может иметь тот же эффект. Вот некоторые предложения:

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

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

Вариант 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); }).

29
megaflop

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

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

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

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

12
sixthgear

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

1
I.devries

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