How do I semantically group a header with a UL in HTML?

I have an HTML document where I would like to semantically group text to the head of a UL as a "header." The initial attempt looks like this:

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

The W3C va开发者_C百科lidator points out that there's no text allowed inside a UL, but outside a LI. I could put the text inside an LI, then use the pseudo-class :first-child to find the "header" in my CSS, but this is clearly not the semantically correct way.

How do I handle this properly?

It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc

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

Swap out the h2 for a h(n) depending on the hierarchy in relation to the other headers on the page. To target the header in css just give it a class if there are other headers that will share the same style e.g.

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

Otherwise give it an id

Just for reference, HTML 3.0 had <lh>:

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

You could try the "Definition List" tag for your listing purposes. You get a much cleaner code.

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

More information on Definition List here http://www.w3schools.com/tags/tag_dl.asp

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

or even better

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

Note the h1 is confined to the section, so it's not ambiguous as to whether the content following the list belongs to the heading Databases. In other words, the heading is scoped within the section.

here's an alternate answer:

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

the advantage of this is that you can use several of these "headers" within your UL without breaking them up into separate UL's and the default white space that causes (or using CSS to eliminate the white space...)

Or nest your lists like so

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

As per my answer to this question, I find the HTML5 figure and figcaption elements most appropriate:

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

Or alternatively CSS3's ::before pseudo-element can be a nice solution:

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

Maybe something like this:

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