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

Что является лучшим способом, чтобы добавить заголовок для HTML-список? Например

фруктовое

  • Яблоко
  • груша
  • оранжевый

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

4 54
html html-lists semantic-markup

4 ответа:

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

Вложенного Списка

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

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]; например, вы можете добавить класс 'title-as-header' и использовать ul.title-as-header::before вместо этого, или все, что вам нужно.

это имеет побочный эффект, давая вам подсказку для всего списка. Если вам не нужна такая подсказка, вы можете использовать атрибут данных вместо этого (например,<ul data-title="fruit"> и ul[data-title]::before { content: attr(data-title); }).

22

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

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

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

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

12

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

1