title: How do I semantically group a header with a UL in HTML?
body: <p>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:</p>
  
  <pre><code>    &lt;ul id="databases"&gt;
          Databases:
          &lt;li&gt;Microsoft SQL Server - 10+ years&lt;/li&gt;
          &lt;li&gt;Sybase SQL Server - 5 years&lt;/li&gt;
          &lt;li&gt;Oracle - 5 years&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>How do I handle this properly?</p>