title: How to semantically add heading to a list
body: <p>This has been bothering me for a while, and I'm wondering if there's any consensus on how to do this properly. When I'm using an HTML list, how do I semantically include a header for the list?</p>
  
  <p>One option is this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h3&gt;Fruits I Like:&lt;/h3&gt;
  &lt;ul&gt;
      &lt;li&gt;Apples&lt;/li&gt;
      &lt;li&gt;Bananas&lt;/li&gt;
      &lt;li&gt;Oranges&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but semantically the <code>&lt;h3&gt;</code> heading is not explicitly associated with the <code>&lt;ul&gt;</code></p>
  
  <p>Another option is this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;&lt;h3&gt;Fruits I Like:&lt;/h3&gt;&lt;/li&gt;
      &lt;li&gt;Apples&lt;/li&gt;
      &lt;li&gt;Bananas&lt;/li&gt;
      &lt;li&gt;Oranges&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but this seems a bit dirty, as the heading is not really one of the list items.</p>
  
  <p>This option is not allowed by the W3C:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;h3&gt;Fruits I Like:&lt;/h3&gt;
      &lt;li&gt;Apples&lt;/li&gt;
      &lt;li&gt;Bananas&lt;/li&gt;
      &lt;li&gt;Oranges&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>as <code>&lt;ul&gt;</code>'s can only contain one or more <code>&lt;li&gt;</code>'s</p>
  
  <p>The old "list heading" <code>&lt;lh&gt;</code> makes the most sense</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;lh&gt;Fruits I Like:&lt;/lh&gt;
      &lt;li&gt;Apples&lt;/li&gt;
      &lt;li&gt;Bananas&lt;/li&gt;
      &lt;li&gt;Oranges&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but of course it's not officially part of HTML</p>
  
  <p>I've heard it suggested that we use <code>&lt;label&gt;</code> just like a form:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;label&gt;Fruits I Like:&lt;/label&gt;
      &lt;li&gt;Apples&lt;/li&gt;
      &lt;li&gt;Bananas&lt;/li&gt;
      &lt;li&gt;Oranges&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but this is a little strange and will not validate anyway.</p>
  
  <p>It's easy to see the semantical problems when trying to style my list headers, where I end up needing to put my <code>&lt;h3&gt;</code> tags within the first <code>&lt;li&gt;</code> and target them for styling with something like:</p>
  
  <pre class="lang-css prettyprint-override"><code>ul li:first-of-type {
      list-style: none;
      margin-left: -1em;
      /*some other header styles*/
  }
  </code></pre>
  
  <p>horrors! But at least this way I can control the entire <code>&lt;ul&gt;</code>, heading and all, by styling the <code>ul</code> tag.</p>
  
  <p>What is the correct way to do this? Any ideas?</p>