Как семантически добавлять заголовок в список
Это беспокоило меня какое-то время, и мне интересно, есть ли какой-либо консенсус относительно того, как это сделать должным образом. Когда я использую список HTML, как я семантически включаю заголовок для списка?
Один из вариантов:
<h3>Fruits I Like:</h3>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
но семантически заголовок <h3>
явно не связан с <ul>
Другой вариант:
<ul>
<li><h3>Fruits I Like:</h3></li>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
но это кажется немного грязным, поскольку заголовок на самом деле не является одним из элементов списка.
Этот параметр не разрешен W3C:
<ul>
<h3>Fruits I Like:</h3>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
как <ul>
может содержать только один или несколько <li>
's
Старый "заголовок списка" <lh>
имеет наибольшее значение
<ul>
<lh>Fruits I Like:</lh>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
но, конечно, это не официально часть HTML
Я слышал, что он предложил использовать <label>
как форму:
<ul>
<label>Fruits I Like:</label>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
но это немного странно и в любом случае не будет проверять.
Легко увидеть семантические проблемы при попытке стилизации заголовков своих списков, где мне нужно разместить теги <h3>
в пределах первого <li>
и настроить их для стилизации с помощью чего-то вроде:
ul li:first-of-type {
list-style: none;
margin-left: -1em;
/*some other header styles*/
}
ужас! Но, по крайней мере, таким образом я могу контролировать весь <ul>
, заголовок и все, путем создания тега ul
.
Каков правильный способ сделать это? Любые идеи?
Ответы
Ответ 1
Как уже сказал Felipe Alsacreations, первый вариант в порядке.
Если вы хотите убедиться, что ничто ниже списка не интерпретируется как принадлежащее к заголовку, это то, для чего предназначены элементы содержимого секции HTML5. Так, например, вы могли бы сделать
<h2>About Fruits</h2>
<section>
<h3>Fruits I Like:</h3>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not
belong to the "Fruits I Like" section. -->
Ответ 2
В этом случае я бы использовал список определений так:
<dl>
<dt>Fruits I like:</dt>
<dd>Apples</dd>
<dd>Bananas</dd>
<dd>Oranges</dd>
</dl>
Ответ 3
Ваш первый вариант - хороший. Это наименее проблематично, и вы уже нашли правильные причины, по которым вы не могли использовать другие параметры.
Кстати, ваш заголовок Явным образом связан с <ul>
: он прямо перед списком!;)
edit: Стив Фолкнер, один из редакторов W3C HTML5 и 5.1, набросал определение lt
element. Это неофициальный проект который он обсудит для HTML 5.2, еще ничего.
Ответ 4
a <div> является логическим делением в вашем контенте, семантически это было бы моим первым выбором, если бы я хотел сгруппировать заголовок со списком:
<div class="mydiv">
<h3>The heading</h3>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
то вы можете использовать следующий css, чтобы объединить все вместе как единое целое
.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...
Ответ 5
В соответствии с w3.org (обратите внимание, что эта ссылка находится в Долгосрочная версия HTML 3.0 3.0):
Неупорядоченный список обычно представляет собой маркированный список элементов. HTML 3.0 дает вам возможность настраивать патроны, обойтись без пуль и для переноса элементов списка по горизонтали или вертикали для многоколоночного списки.
Тег открытия списка должен быть <UL>
. Затем следует дополнительный список header (<LH>
caption </LH>
), а затем первым элементом списка (<LI>
). Для Пример:
<UL>
<LH>Table Fruit</LH>
<LI>apples
<LI>oranges
<LI>bananas
</UL>
который может отображаться как:
Плоды стола
Примечание. Некоторые устаревшие документы могут включать заголовки или обычный текст перед первый элемент LI. Разработчикам пользовательских агентов HTML 3.0 рекомендуется чтобы удовлетворить эту возможность, чтобы справиться с плохо сформированным наследием документы.
Ответ 6
Попробуйте определить новый класс, ulheader, в css. p.ulheader ~ ul выбирает все, что сразу следует за My Header
p.ulheader ~ ul {
margin-top:0;
{
p.ulheader {
margin-bottom;0;
}
Ответ 7
Я помещаю заголовок внутри ul. Нет правила, согласно которому UL должен содержать только элементы LI.