Как правильно предоставить семантическую подпись для списка HTML? Например, в следующем списке есть «заголовок» / «заголовок».
Фрукты
- яблоко
- Груша
- апельсин
Как следует обращаться со словом «фрукт» таким образом, чтобы оно было семантически связано с самим списком?
html
html-lists
semantic-markup
Джон П
источник
источник
Ответы:
Несмотря на отсутствие заголовка или элемента заголовка, эффективная структурирование разметки может иметь тот же эффект. Вот несколько предложений:
Вложенный список
<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>
источник
<ul>
(или любого другого элемента уровня блока) в качестве дочернего для a<p>
недопустимо в соответствии со спецификацией HTML , которая гласит, что в<p>
качестве дочерних узлов может быть только «фразовое содержимое».Опция 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); }
).источник
figure
можно использовать с контентом, отличным от изображений?Насколько мне известно, в текущих спецификациях HTML нет положений о предоставлении заголовка для списка, как это есть в таблицах. Я бы пока использовал либо классифицированный абзац, либо тег заголовка.
<h3>Fruit</h3> <ul> <li>Apple</li> <li>Pear</li> <li>Orange</li> </ul>
В будущем, когда HTML5 получит более широкое распространение, вы сможете использовать
<legend>
и<figure>
тег для достижения этой цели немного более семантический.Видеть Этот пост в списке рассылки W3C для получения дополнительной информации.
источник
Чтобы программы чтения с экрана подключили список к соответствующему заголовку, вы можете использовать
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>
Как отмечалось в предыдущем ответе, убедитесь, что уровень заголовка соответствует порядку заголовков в документе.
источник
Для списка, такого как таблица, нет тега, похожего на заголовок. Поэтому я бы просто поставил ему
<Hx>
(x в зависимости от ваших ранее использованных заголовков).источник
Я знаю, что это устарело, но хотел добавить ответ, который нашел для будущих людей: 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>
источник
Поскольку я пытался найти решение с поддержкой старых браузеров, у меня есть то, что может быть слишком упрощенным решением. Использование стилей отображения таблиц и идентификаторов / классов:
<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.
источник
Вы всегда можете использовать
<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>
источник
for
атрибут должен быть идентификатором помечаемого элемента , которыйUL
(на момент написания) таковым не является .