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

Issue

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

Solution

It should not be set in the first li because this would assume a sibling relationship to the succeeding 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

Answered By - Nick Allen