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


83

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

Фрукты

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

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


Спецификации HTML должны добавлять к элементам атрибуты или теги заголовка, легенды и примечания. Изображения, таблицы, списки и другие нетекстовые объекты имеют заголовок, легенду и / или примечание, прикрепленное к ним в публикациях, и полезный язык разметки должен отражать это соглашение.

9
Я удивлен, что этот вопрос был закрыт; это явно о семантике, а не об эстетике или любой другой субъективной теме. Возникает прямой вопрос: «Есть ли подходящая семантическая разметка для этой ситуации?» и что касается HTML5, ответ - «да» .
daiscog

9
Я устал видеть так много вопросов, которые меня интересуют, как закрытые как «основанные на мнении». Это контрпродуктивно. Выскажем свое мнение. Кроме того, этот вопрос касается «лучших практик». У людей могут быть веские аргументы относительно передовой практики (с источниками). Нам нужны эти аргументы.
Младен Адамович

2
Я проголосовал за повторное открытие этого вопроса и отредактировал его, чтобы он звучал менее критично. Теперь он явно требует правильного семантического способа добавления заголовка.
Lazar Ljubenović

Ответы:


73

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

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

<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
@alohci Если в списке будет больше определений, что не так со списком определений или неупорядоченным списком?
ahsteele

2
@Alohci: Уточните, пожалуйста. Заинтригован вашим комментарием, но в его нынешнем виде он совершенно бесполезен, поскольку вы не объясняете, почему другие варианты не являются «семантически действительными»,
Стейн де Витт,

4
@StijndeWitt - Это все правда. В данном случае это неправильная семантика только потому, что вопрос не в этом. Это проблема с правильной разметкой HTML, фактическим содержанием и контекстом, который имеет значение.
Alohci

2
@JeffereyCave Наличие <ul>(или любого другого элемента уровня блока) в качестве дочернего для a <p>недопустимо в соответствии со спецификацией HTML , которая гласит, что в <p>качестве дочерних узлов может быть только «фразовое содержимое».
daiscog

4
@ahsteele Интересно ... MDN внесла его в список описаний ... О! «До HTML5 [он] был известен как список определений». developer.mozilla.org/en-US/docs/Web/HTML/Element/dl . Ваша ссылка была для html4. И по этой ссылке они приводят пример dl, представляющего диалог, где каждый dt обозначает говорящего, а dd имеет то, что он говорит. Так что я почти уверен, что их, как бы они ни назывались, можно правильно использовать и таким образом.
RoboticRenaissance

54

Опция 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); }).


Ваш ответ - то, что говорят спецификации. Интересно, почему он не самый популярный.
Ахмед Махмуд

@AhmedMahmoud Наверное, потому что главный ответ на 7 лет старше этого!
daiscog

О, время летит незаметно. Не заметил дату.
Ахмед Махмуд

Означает ли это, что figureможно использовать с контентом, отличным от изображений?
CodeGust


13

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

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

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

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


4

Чтобы программы чтения с экрана подключили список к соответствующему заголовку, вы можете использовать aria-labelledbyкоманду connected to a head со idследующим:

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

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


1

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


1

Я знаю, что это устарело, но хотел добавить ответ, который нашел для будущих людей: https://www.w3.org/MarkUp/html3/listheader.html

используйте <lh>элемент:

<ul>
  <lh>Types of fruit:</lh>
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
</ul>

Примечание: это было упомянуто в черновике HTML 3.0, но никогда не включалось в HTML 3.2, поэтому, хотя оно может правильно отображаться в некоторых браузерах, оно не поддерживается.
Натан Чемпион

0

Поскольку я пытался найти решение с поддержкой старых браузеров, у меня есть то, что может быть слишком упрощенным решением. Использование стилей отображения таблиц и идентификаторов / классов:

    <ul>
        <li id="listCaption">My List</li>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>

Затем примените display: table-row;стиль к элементу в CSS:

    li#listCaption {
      display: table-row;
      font-size: larger;
      text-decoration: underline; }

Это работает намного лучше, если вы используете список описаний, что я делал, когда у меня возник тот же вопрос. В этом случае вы можете использовать <div>в HTML и display: table-caption;CSS, поскольку элементы div поддерживаются в списке dl:

    <dl>
        <div id="caption">Table Caption</div>
        <dt>term</dt>
        <dd>definition</dd>
    </dl>

В CSS вы можете применять к подписи различные стили:

    #caption {
        display: table-caption;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background: transparent;
        caption-side: top;
        text-align: center; }

Замечу, что table-captionвul/ol он рассматривается как элемент блока, и текст будет выровнен по вертикали, что вам, вероятно, не нужно.

Я тестировал это как в Firefox, так и в Chrome.


-2

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

4
Это неверно. В спецификации HTML указано, что forатрибут должен быть идентификатором помечаемого элемента , который UL(на момент написания) таковым не является .
daiscog
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.