[解決済み] HTML5で独自のhtmlタグを作成する方法はありますか？

質問

以下のようなものを作りたいのですが

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

HTML5でできるのでしょうか？ でできることは知っています。

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

のようなものですが、これではとても読みにくいです :(

どのように解決するのですか？

HTML5 ではないが、ブラウザでカスタムタグを使用することができる ( カスタム要素は HTML5 として有効ですか？ と HTML5 の仕様 ).

というカスタムタグ要素を使いたい場合を考えてみましょう。 <stack> . こうすればいいんだ...。

ステップ1

CSSスタイルシートでその属性を正規化する（css resetと考える）-。 例

 stack{display:block;margin:0;padding:0;border:0; ... }

ステップ2

古いバージョンのInternet Explorerで動作させるためには、このスクリプトをheadに追加する必要があります（古いバージョンのIEで動作させる必要がある場合は重要です！）。

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

そうすれば、カスタムタグを自由に使うことができます。

<stack>Overflow</stack>

属性も自由に設定できる...

<stack id="st2" class="nice"> hello </stack>