有没有办法在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重置） – 例子：
stack{display:block;margin:0;padding:0;border:0; ... }
第2步
通过将该脚本附加到头部（重要！），使其在旧版本的Internet Explorer中工作：
<!--[if lt IE 9]> <script> document.createElement("stack"); </script> <![endif]-->
然后，您可以自由使用自定义标签。
<stack>Overflow</stack>
随意设置属性以及…
<stack id="st2" class="nice"> hello </stack>
我不太确定这些答案。 正如我刚刚读到的：“定制标记一直在HTML中允许使用”。
http://www.crockford.com/html/
这里的意思是，HTML是基于SGML的。 与带有doctype和schema的XML不同，如果浏览器不知道一个或两个标签，HTML不会失效。 想想<marquee>。 这还不是官方的标准。 所以在使用它的时候，你的HTML页面“未经正式批准”，也没有破坏页面。
然后是<keygen>，它是Netscape专用的，在HTML4中被遗忘，并被重新发现，现在在HTML5中被指定。 而且我们现在还有自定义标签属性，比如data-XyZzz =“…”可以在所有HTML5标签上使用。
所以，虽然你不应该发明自己的一个完整的自定义标记沙拉，但是在HTML中定制标签并不是完全禁止的。 不过，除非你想用+ xml Content-Type发送它，或者嵌入其他XML命名空间，比如SVG或者MathML。 这仅适用于SGML限制的HTML。
在HTML中创建自己的标签名是不可能的/无效的。 这就是XML，SGML和其他一般标记语言的用途。
你可能想要的是
<div id="menu"> <div id="lunch"> <span class="dish">aaa</span> <span class="dish">bbb</span> </div> <div id="dinner"> <span class="dish">ccc</span> </div> </div>
或者而不是<div/>和<span/>像<ul/>和<li/> 。
为了使它看起来和功能正确，只需连接一些CSS和Javascript。
自定义标签可以在Safari，Chrome，Opera和Firefox中使用，至少可以使用它们来代替“class = …”。
绿色{颜色：绿色}在CSS中的作品
<green>This is some text.</green>
我只是想添加到以前的答案，有一个意义，使用自定义元素只有两个字的标签。 他们不应该被标准化。
例如，你要使用标签<icon> ，因为你不喜欢<img> ，而且你也不喜欢<i> …
好吧，请记住，你不是唯一的。 也许在将来，W3C和/或浏览器将指定/实现这个标签。
目前，浏览器可能会为此标签实现原生样式，您的网站设计可能会破坏。
所以我建议使用（根据这个例子） <img-icon> 。
事实上，标签<menu>是定义的; 不是那么习惯，而是定义。 它应该包含<menuitem> ，其行为与<li>类似。
正如Michael在评论中所说的那样，你想要做的事情是完全可能的，但是你的命名是错误的。 您不是“向HTML 5添加标签”，而是使用自己的标签创建新的XML文档类型。
我在上一份工作中为一些项目做了这个。 一些实用的建议：
-
当你说你想要“将这些添加到HTML 5”时，我假定你真正的意思是你希望页面在现代浏览器中正确显示，而不必在服务器端做很多工作。 这可以通过在xml文件的顶部插入一个“样式表处理指令”来实现，如<？xml-stylesheet type =“text / xsl”href =“menu.xsl”？>。 将“menu.xsl”替换为您创建的XSL样式表的路径，以将自定义标签转换为HTML。
-
注意事项：您的文件必须是格式正确的XML文档，并且必须使用XML标头<xml version =“1.0”>。 XML比HTML更挑剔，比如不匹配的标签。 而且，与HTML不同，标签区分大小写。 您还必须确保Web服务器正在使用适当的MIME类型“application / xml”发送文件。 如果文件扩展名是“.xml”，Web服务器通常会自动配置为自动执行此操作，但请检查。
-
Big Caveat：最后，正如我所描述的，使用浏览器的自动XSL转换实际上只适用于调试和对有限控制的应用程序。 我成功地在我的上一个雇主里设置了一个简单的内部网，最多只能由几十个人访问。 并非所有的浏览器都支持XSL，而那些没有完全兼容的实现。 所以如果你的页面被发布到“wild”，最好在服务器端把它们全部转换成HTML，这可以通过一个命令行工具来完成，或者用许多XML编辑器中的按钮来完成。
对于嵌入元数据，您可以尝试使用HTML微数据 ，但是比使用类名更加冗长。
<div itemscope> <p>My name is <span itemprop="name">Elizabeth</span>.</p> </div> <div itemscope> <p>My name is <span itemprop="name">Daniel</span>.</p> </div>
除了编写一个XSL样式表之外，还有另外一种方法，至少如果你确定使用Firefox或者其他完整的XML浏览器（即不是Internet Explorer）。 跳过XSL转换，写一个完整的CSS样式表，告诉浏览器如何直接格式化XML。 这里的好处是，你不必学习XSL，许多人认为这是一个困难的，反直觉的语言。 缺点是你的CSS将不得不完全指定样式，包括什么是块节点，什么是内联等等。通常，在编写CSS时，可以假设浏览器“知道”<em>，例如，是一个内联节点，但它不知道如何处理<dish>。
最后，我尝试了几年，但我的回忆是，IE（至少有几个版本）拒绝将CSS样式表直接应用于XML文档。
这不是任何HTML规范的选项:)
你也许可以用<div>元素和类来做你想要的东西，从我不确定你究竟在做什么之后，但不是，创建你自己的标签不是一个选项。
正如Nick所说，任何版本的HTML都不支持自定义标签。
但是，如果您在HTML中使用这种标记，则不会出现任何错误。
看来你想创建一个列表。 您可以使用无序列表<ul>来创建rool元素，并将<li>标记用于下方的项目。
如果这不是你想达到的目标，请指明你想要的。 那么我们可以拿出一个答案。
您可以通过HTML 5数据属性添加自定义属性。 例如：Message对HTML 5有效。请参阅http://ejohn.org/blog/html-5-data-attributes/以获取详细信息。;
HTML的要点是包含在语言中的标签具有一致的含义，世界上的每个人都可以使用和基于决定 – 像默认样式，或者使链接可点击，或者当你点击<input type="submit">时提交表单<input type="submit"> 。
像你这样的化妆标签对于人类来说是很好的（因为我们可以学习英语，因此知道或者至少猜测你的标签是什么意思），但是对于机器来说却不是那么好。
聚合物或X标签允许您建立自己的html标签。 它基于本机浏览器的“影子DOM”。
你可以做一些自定义的CSS样式，这将创建一个标签，使背景颜色为红色：
redback {background-color:red;}
<redback>This is red</redback>
<head> <lunch> <style type="text/css"> lunch{ color:blue; font-size:32px; } </style> </lunch> </head> <body> <lunch> This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote. </lunch> </body>
在某些情况下，它可能看起来像创建自己的标签名称一样正常工作。
但是，这只是您的浏览器在工作中的错误处理例程。 问题是，不同的浏览器有不同的错误处理例程！
看到这个例子。
第一行包含两个构成元素，它们会被不同的浏览器区别对待。 文本在IE11和Edge中显示为红色，而在其他浏览器中显示为黑色。
作为比较，第二行是相似的，除了它只包含有效的HTML元素，并且因此在所有浏览器中都是相同的。
body {color:black; background:white;} /* reset */ what, ever:nth-of-type(2) {color:red} code, span:nth-of-type(2) {color:red}
<p><what></what> <ever>test</ever></p> <p><code></code> <span>test</span></p>
我发现这篇文章创建自定义HTML标签并实例化它们。 它简化了过程，并将其分解成任何人都可以立即理解和使用的术语 – 但我不完全确定它包含的代码示例在所有浏览器中都是有效的，因此请注意空载和测试。 不过，这是一个很好的入门介绍。
自定义元素：定义HTML中的新元素
