Как семантически добавить заголовок в список

это беспокоило меня некоторое время, и мне интересно, есть ли консенсус о том, как это сделать правильно. Когда я использую список 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>'S может содержать только один или несколько <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 тег.

Как правильно это сделать? Есть идеи?

8 96
html html-lists

8 ответов:

Как уже сказал Фелипе Эльзасский, первый вариант-это нормально.

Если вы хотите убедиться, что ничто ниже списка не интерпретируется как принадлежащее заголовку, это именно то, для чего предназначены элементы содержимого секционирования 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. -->
66

в этом случае я бы использовал список определений так:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>
42

ваш первый вариант является хорошим. Это наименее проблематично, и вы уже нашли правильные причины, по которым вы не могли использовать другие варианты.

кстати, ваш заголовок явно связан с <ul>: это прямо перед списком! ;)

edit: Стив Фолкнер, один из редакторов W3C HTML5 и 5.1 имеет набросал определение на lt элемент. Это же неофициальный проект что он будет обсуждать HTML 5.2, пока ничего больше.

8

a

- это логическое разделение вашего контента, семантически это было бы моим первым выбором, если бы я хотел сгруппировать заголовок со списком: 
<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

вы также можете использовать <figure> элемент для привязки заголовка к вашему списку следующим образом:

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

Источник:https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (пример 162)

1

попробуйте определить новый класс, ulheader, в css. p. ulheader ~ ul выбирает все, что сразу следует за моим заголовком

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}
0

согласно w3.org (обратите внимание, что эта ссылка находится в давно истекший проект HTML 3.0 spec):

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

тег списка открытия должен быть <UL>. За ним следует дополнительный список заголовок (<LH>заголовок</LH>), а затем по первому пункту списка (<LI>). Для пример:

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

который может быть представлен как:

Таблица Фруктов

  • яблоки
  • апельсины
  • бананы

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

-1

Я поместил заголовок внутри ul. Нет правила, которое говорит, что UL должен содержать только элементы LI.

-9