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


120

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

Как правильно это сделать? Любые идеи?


5
Некоторые люди используют LH, но могут не осознавать, что на самом деле они не используют «настоящий» тег HTML, а просто создают случайное имя тега. Браузеры рассматривают такой тег как встроенный элемент. Некоторые позволят вам разместить на нем класс и CSS.
Glen Little

1
Возможный дубликат stackoverflow.com/questions/2417891/…
goodeye 06

Ответы:


81

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

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

6
В этом есть большой смысл; Спасибо. Конечно, если мы собираемся использовать HTML5, заголовок должен находиться <h1>внутри, так <section>как это заголовок верхнего уровня в этих тегах.
Tomas Mulder

6
Вы можете использовать <h1>там, конечно. Но <h3>тоже нормально. Если вы не используете заголовок более высокого уровня в одном разделе.
Alohci

4
Мы должны придерживаться заголовков h1..h6 (здесь h2 и h3), пока браузеры, программы чтения с экрана и другие вспомогательные технологии не выделяют заголовки правильно, как указано в HTML5 (см. Coding.smashingmagazine.com/2011/08/16/ … - поиск "брови" ...). Я не уверен, насколько он изменился за несколько месяцев, но, вероятно, не так быстро, что касается API доступности браузеров: /
FelipeAls

3
@davidjb - будьте осторожны, это не совсем то, о чем говорится в этом совете. В нем говорится, что h1-h6 следует использовать для определения уровней заголовка. т.е. элементы h1 должны использоваться только для верхнего уровня заголовка на странице. Это не говорит о том, что на этом высшем уровне может быть только один заголовок. Между прочим, производители браузеров дали понять, что не намерены внедрять алгоритм схемы, поэтому мало надежды на быстрое улучшение ситуации.
Alohci

2
@Michele - это зависит от того, имеете ли вы в виду визуально посередине или семантически посередине. Если визуально, то это проблема для CSS, и в идеале это не изменит вашу разметку. Если семантически, то я не уверен, какой у вас список. Может быть, у вас два списка, а не один.
Alohci

53

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

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

5
Для неупорядоченного списка вещей, описываемых меткой, как в примере выше, я думаю, что это лучший выбор. Семантика точно совпадает: вот термин или ярлык (Фрукты, которые мне нравятся), а вот элементы, которые соответствуют этому ярлыку (каждый фрукт).
Эндрю

1
Это буквально список описаний . Это лучшее решение imo.
Derek 朕 會 功夫

display: list-item ... CSS для отображения маркеров. Хороший ответ.
Mycah

9

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

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

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


1
Я согласен, другие решения вообще не имеют смысла

Правда, вроде как использовать заголовок над <p>. Но я все же хотел бы что-то более явное, что-то вроде forатрибута для <label>' or the <th> `для таблиц. Я думаю, что этот <lh>вариант имел бы наибольший смысл, если бы он действительно поддерживался W3C.
Tomas Mulder

5

<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...

Хороший выбор, по крайней мере, для стилизации.
Tomas Mulder

Семантически говорящий div ничего не значит, я не понимаю, почему это будет ваш первый выбор (из-за проблемы стилизации)? : x
Rambobafet

@Rambobafet, великая некромантия! Этот ответ был с 2012 года, до того, как в html5 были введены разделы и другие более семантически правильные параметры. Некоторые браузеры уже поддерживают раздел, а некоторые нет. «div» - это сокращение от «логического деления» в вашем контенте, поэтому в то время это был лучший способ разделить контент для стилизации.
Evert

Вы совершенно правы, не видел часть "12" :)
Rambobafet


0

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

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

-2

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

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

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

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

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

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

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

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


8
Голосование против, потому что эта ссылка «согласно» указывает на черновик спецификации 3.0 от 1995 года, который так и не вышел из черновика. Тег «lh» никогда не попадал в не-черновую спецификацию HTML.
Brooks Moses

HTML 3.0Ого, это действительно старый документ.
Derek 朕 會 功夫

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.