Как семантически добавить заголовок в список - PullRequest
Новая
       23

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

104 голосов
/ 20 января 2012

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

Старый "список заголовков" <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 ]

71 голосов
/ 20 января 2012

Как уже сказал Фелипе Алсакреас, первый вариант вполне подойдет.

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

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

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>
9 голосов
/ 20 января 2012

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

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

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

5 голосов
/ 20 января 2012

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...
1 голос
/ 28 февраля 2018

Вы также можете использовать элемент <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)

0 голосов
/ 14 апреля 2017

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

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}
0 голосов
/ 02 ноября 2015

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

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

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

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

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

Столовые фрукты

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

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

0 голосов
/ 09 декабря 2013

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

...