Каков наилучший способ для кодирования заголовка / заголовка для <ul>или <ol>, как у нас <caption>в <table>?

Question

Каков наилучший способ для кодирования заголовка / заголовка <ul> или <ol>? Как у нас есть <caption> в <table>, и мы не хотим, чтобы они были жирными.

Это нормально?

<p>heading</p>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Или всегда следует использовать заголовки?

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Answer 1

Всегда используйте заголовки тегов для заголовков. Подсказка в названии:)

Если вы не хотите, чтобы они были жирными, измените их стиль с помощью CSS. Например:

HTML:

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

В HTML5 вы можете более четко связать заголовок и список с помощью элемента <section>. (<section> не работает должным образом в IE 8 и более ранних версиях без JavaScript).

<section>
    <h1>heading</h1>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

Вы можете сделать что-то подобное в HTML 4:

<div class="list-with-heading">
    <h3>Heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</div>

Тогда стиль так:

.list-with-heading h3 {
    font-weight: normal;
}

Answer 2

Хотя это старая версия, я обновляю ее для тех, кто может найти этот вопрос при поиске позже.

@ Мэтт Келлихер:

Использование css : before и атрибута data- * для списка - отличная идея, но его можно немного изменить, чтобы сделать его более доступным:

HTML:

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS:

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

Это создаст список с псевдоэлементом "header" над ним с текстом, установленным в значение атрибута aria-label. Вы можете легко настроить его под свои нужды.

Преимущество этого по сравнению с использованием атрибута data- * заключается в том, что aria-label будет считываться программами чтения с экрана как «метка» для списка, что семантически правильно для предполагаемого использования этих данных.

Примечание: IE8 поддерживает: before атрибуты, но должен использовать версию с одним двоеточием (и должен иметь действительный определенный тип документа). IE7 не поддерживает: раньше, но Modernizer или Selectivizr должны решить эту проблему для вас. Все современные браузеры поддерживают синтаксис old: before, но предпочитают использовать синтаксис :: before. Как правило, лучший способ справиться с этим - иметь внешнюю таблицу стилей для IE7 / 8, которая использует старый формат, и общую таблицу стилей, использующую новый формат, но на практике большинство просто использует старый формат с одиночной двоеточием, так как он все еще на 100% пересекается браузер, даже если он технически недействителен для CSS3.

Answer 3

Мне нравится использовать атрибут css :before и data-* для списка

HTML:

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS:

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

Это создаст список с заголовком, который представляет собой любой текст, указанный в качестве атрибута data-header списка. Затем вы можете легко настроить его под свои нужды.

Answer 4

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

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

и CSS

ul .heading {font-weight: normal; list-style: none;}

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

Answer 5

Будет ли разрешено использование <caption>?

<ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>

Answer 6

h3 - абсолютно лучшее решение, чем h2, h1 или h6!

1. Вы должны использовать определенный уровень: если вы находитесь в h1, используйте h2, если вы в h5, используйте h6 (если вы в h6 ... гул, используйте сильный или для примера). Это не обязательство, а вопрос доступности ( Здесь, зеленая часть ).

2. Вам не нужно давать заголовок списку ... потому что этого элемента не существует. Поэтому программа чтения с экрана не будет использовать что-то особенное.

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