title: Is there a way to create your own html tag in HTML5?
body: <p>I want to create something like</p>
  
  <pre><code>&lt;menu&gt;
      &lt;lunch&gt;
          &lt;dish&gt;aaa&lt;/dish&gt;
          &lt;dish&gt;bbb&lt;/dish&gt;
      &lt;/lunch&gt;
      &lt;dinner&gt;
          &lt;dish&gt;ccc&lt;/dish&gt;
      &lt;/dinner&gt;
  &lt;/menu&gt;
  </code></pre>
  
  <p>Can it be done in HTML5?
  I know I can do it with</p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li&gt;
          &lt;ul id="lunch"&gt;
              &lt;li class="dish"&gt;aaa&lt;/li&gt;
              &lt;li class="dish"&gt;bbb&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;ul id="dinner"&gt;
              &lt;li class="dish"&gt;ccc&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;    
  &lt;/ul&gt;
  </code></pre>
  
  <p>but it is so much less readable :(</p>