有没有办法在 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？ https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5 and HTML5 规范 http://dev.w3.org/html5/spec/elements.html#elements).

假设您想使用名为的自定义标签元素<stack>。这是你应该做的...

STEP 1

在 CSS 样式表中标准化其属性（想想 css 重置）- 例子：

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

STEP 2

要让它在旧版本的 Internet Explorer 中工作，您需要将此脚本附加到头部（如果您需要它在旧版本的 IE 中工作，这一点很重要！）：

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

然后您就可以自由地使用您的自定义标签。

<stack>Overflow</stack>

也可以随意设置属性...

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