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

Каким будет лучший способ кодирования заголовка/заголовка <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>

Ответ 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;
}

Ответ 2

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

@Matt Kelliher:

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

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

Ответ 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;
}

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

Ответ 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 reset для установки полей и прокладок прямо на ul и li. вот хороший CSS reset. после того, как у вас есть reset поля и paddings, вы можете применить некоторое поле для элементов списка, отличных от полей класса заголовка, для их отступов.

Ответ 5

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

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

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