How do I semantically group a header with a UL in HTML?
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>