title: Proper way to make HTML nested list?
body: <p>The W3 docs have a <a href="http://www.w3.org/TR/html401/struct/lists.html#h-10.2" rel="noreferrer">nested list example</a> prefixed by <code>DEPRECATED EXAMPLE:</code>, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.</p>
  
  <p>So which of these ways is the correct way to write an HTML list?</p>
  
  <p><strong>Option 1</strong>: the nested <code>&lt;ul&gt;</code> is a child of the parent <code>&lt;ul&gt;</code></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;List item one&lt;/li&gt;
      &lt;li&gt;List item two with subitems:&lt;/li&gt;
      &lt;ul&gt;
          &lt;li&gt;Subitem 1&lt;/li&gt;
          &lt;li&gt;Subitem 2&lt;/li&gt;
      &lt;/ul&gt;
      &lt;li&gt;Final list item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Option 2</strong>: the nested <code>&lt;ul&gt;</code> is a child of the <code>&lt;li&gt;</code> it belongs in</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;List item one&lt;/li&gt;
      &lt;li&gt;List item two with subitems:
          &lt;ul&gt;
              &lt;li&gt;Subitem 1&lt;/li&gt;
              &lt;li&gt;Subitem 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Final list item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>