Как семантически группировать заголовок с UL в HTML?

У меня есть документ HTML, в котором я хотел бы семантически группировать текст в заголовке UL в качестве "заголовка". Первоначальная попытка выглядит следующим образом:

    <ul id="databases">
        Databases:
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>

Валидатор W3C указывает, что внутри UL нет текста, но вне LI. Я мог бы поместить текст внутри LI, а затем использовать псевдокласс: first-child, чтобы найти "заголовок" в моем CSS, но это явно не семантически правильный путь.

Как я могу справиться с этим правильно?

Ответ 1

Он не должен быть установлен в первом ли, потому что это предполагает отношение родственников к предыдущим элементам li, тогда как заголовок более важен в иерархии. Представьте себе скрин-ридеры и т.д.

<h2>Databases:</h2>
<ul id="databases">        
    <li>Microsoft SQL Server - 10+ years</li>
    <li>Sybase SQL Server - 5 years</li>
    <li>Oracle - 5 years</li>
</ul>

Поменяйте h2 на h (n) в зависимости от иерархии по отношению к другим заголовкам на странице. Чтобы настроить заголовок в css, просто дайте ему класс, если есть другие заголовки, которые будут использовать один и тот же стиль, например.

<h2 class="subHeader">Languages:</h2>
<ul id="languages">        
    <li>English</li>
    <li>Chinese</li>
    <li>French</li>
</ul>

В противном случае укажите id

Ответ 2

Для справки HTML 3.0 был <lh>:

<ul>
    <lh>This is a list header!
    <li>Item A
    <li>Item B
    <li>Item C
</ul>

Ответ 3

Вы можете попробовать тег "Список определений" для своих целей листинга. Вы получаете гораздо более чистый код.

<dl>
  <dt>Databases</dt>
   <dd>Microsoft SQL Server - 10+ years</dd>
   <dd>Sybase SQL Server - 5 years</dd>
   <dd>Oracle - 5 years</dd>
  <dt>Second heading</dt>
   <dd>Item 1</dd>
   <dd>Item 2</dd>
   <dd>Item 3</dd>
</dl>

Дополнительная информация о списке определений здесь http://www.w3schools.com/tags/tag_dl.asp

Ответ 4

<section>
    <h1>Databases:<h1>
    <ul>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>
</section>

или даже лучше

<section>
    <h1>Databases:</h1>
    <dl>
        <dt>Microsoft SQL Server</dt> <dd>10+ years</dd>
        <dt>Sybase SQL Server</dt>    <dd>5 years</dd>
        <dt>Oracle</dt>               <dd>5 years</dd>
    </dl>
</section>

Обратите внимание, что h1 ограничивается section, поэтому он не является двусмысленным относительно того, принадлежит ли содержимое, следующее за списком, к заголовкам Базы данных. Другими словами, заголовок с областью в этом разделе.

Ответ 5

здесь альтернативный ответ:

<ul id="databases">
        <li style="list-style:none"><strong>Databases:</strong></li>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>

Преимущество этого заключается в том, что вы можете использовать несколько этих "заголовков" в своем UL, не разбивая их на отдельные UL и пустое пространство по умолчанию, которое вызывает (или использование CSS для устранения пробела...)

Ответ 6

Или вставьте свои списки так:

<ul>
    <li>Databases</li>
    <li>
        <ul>
            <li>Microsoft SQL Server - 10+ years</li>
            <li>Sybase SQL Server - 5 years</li>
            <li>Oracle - 5 years</li>
        </ul>
    </li>
</ul>

Ответ 7

В соответствии с моим ответом на этот вопрос, я нахожу HTML5 figure и figcaption элементы наиболее подходящие:

<figure>
    <figcaption>Databases</figcaption>
    <ul>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>
</figure>

Ответ 8

Возможно, что-то вроде этого:

<div>
 <span>Databases:<span>
 <ul id="databases">
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
 </ul>
 </div>