有没有办法在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中运行，您需要将此脚本附加到头部（如果需要在旧版本的IE中运行，则很重要！）：

 <!--[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。与具有文档类型和架构的XML不同，如果浏览器不知道一个或两个标签，HTML不会无效。想想<marquee>。尚未在官方标准中。因此，尽管使用它使您的HTML页面“未经正式批准”，但它也不会破坏页面。

然后是<keygen>，它是Netscape特有的，在HTML4中被遗忘，并已重新发现，现在在HTML5中指定。而且，我们现在拥有自定义标签属性，例如所有HTML5标签都允许使用data-XyZzz =“ ...”。

因此，尽管您不应该发明自己的整个自定义未指定标记沙拉，但也不完全禁止在HTML中包含自定义标签。但是，除非您要使用+ xml Content-Type发送它或嵌入其他XML名称空间（例如SVG或MathML），否则就是这样。这仅适用于SGML限制的HTML。

正如Michael在评论中建议的那样，您想做的事情很可能，但是您的命名法是错误的。您并不是在“向HTML 5添加标签”，而是使用自己的标签创建新的XML文档类型。

我上一份工作是针对某些项目进行的。一些实用建议：

1. 当您说要“将它们添加到HTML 5”时，我假设您真正的意思是您希望页面在现代浏览器中正确显示，而无需在服务器端进行大量工作。这可以通过在xml文件的顶部插入“样式表处理指令”来完成，例如<？xml-stylesheet type =“ text / xsl” href =“ menu.xsl”？>。将“ menu.xsl”替换为您创建的XSL样式表的路径，该样式表将您的自定义标签转换为HTML。

2. 注意事项：您的文件必须是格式正确的XML文档，并带有XML标头<xml version =“ 1.0”>。对于不匹配的标记，XML比HTML更具挑剔性。另外，与HTML不同，标记区分大小写。您还必须确保Web服务器正在发送具有适当的MIME类型“ application / xml”的文件。通常，如果文件扩展名为“ .xml”，则将Web服务器配置为自动执行此操作，但请检查。

3. 大警告：最后，正如我所描述的，使用浏览器的自动XSL转换实际上仅对调试和具有很多控制权的有限应用程序才是最佳选择。我成功地使用它在我的上一个雇主处建立了一个简单的Intranet，最多只能有几十个人访问。并非所有的浏览器都支持XSL，而那些浏览器并不具有完全兼容的实现。因此，如果要将页面发布为“狂野”，最好在服务器端将它们全部转换为HTML，这可以通过命令行工具或许多XML编辑器中的按钮来完成。

无法/无法在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。

我只想在前面的答案中添加一个含义，即仅将两个单词的标记用于自定义元素。绝对不要将它们标准化。

例如，您要使用标记<icon>，因为您不喜欢<img>，而且您都不喜欢<i>...

好吧，请记住，您不是唯一的一个。也许将来，w3c和/或浏览器将指定/实现此标记。

目前，浏览器可能会为此标签实现本机样式，并且您网站的设计可能会中断。

因此，我建议使用（根据此示例）<img-icon>。

实际上，标签<menu>定义良好，即不是这样使用而是定义了。它应包含<menuitem>行为类似<li>。

自定义标签可以在Safari，Chrome，Opera和Firefox中使用，至少可以代替“ class = ...”使用它们。

CSS中的绿色{color：green}适用于

<green>This is some text.</green>

对于嵌入元数据，您可以尝试使用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，许多人认为XSL是一种困难且违反直觉的语言。缺点是CSS必须非常完整地指定样式，包括什么是块节点，什么是内联等。通常，在编写CSS时，您可以假设浏览器“知道” <em>，例如，是一个内联节点，但不知道如何处理<dish>。

最后，距我尝试此方法已有好几年了，但我的回忆是IE（至少返回了几个版本）拒绝将CSS样式表直接应用于XML文档。

HTML的重点是该语言中包含的标记具有一致的含义，世界上的每个人都可以使用和制定决策，例如默认样式，使链接可单击或在单击时提交表单<input type="submit">。

像您这样的虚构标签对人类非常有用（因为我们可以学习英语，因此知道或至少猜测您的标签是什么意思），但对机器却不太好。

这不是任何HTML规范中的选项：)

您可能可以使用<div>元素和类来做您想做的事情，因为我不确定您到底要做什么，但不可以，创建自己的标签不是一个选择。

正如尼克所说，任何版本的HTML都不支持自定义标签。

但是，如果您在HTML中使用此类标记，则不会出现任何错误。

似乎您想创建一个列表。您可以使用无序列表<ul>创建rool元素，并将<li>标签用于下面的项目。

如果这不是您想要实现的，请准确指定您想要的。然后我们可以提出一个答案。

您可以通过HTML 5数据属性添加自定义属性。例如：适用于HTML 5的消息。有关详细信息，请参见http://ejohn.org/blog/html-5-data-attributes/。

聚合物或X标签可让您构建自己的html标签。它基于本机浏览器的“影子DOM”。

您可以只做一些自定义的CSS样式，这将创建一个标记，使背景颜色变为红色：

redback {background-color:red;}

 

<redback>This is red</redback>

在某些情况下，创建您自己的标签名称似乎可以正常工作。
但是，这只是浏览器的错误处理例程在起作用。问题是，不同的浏览器具有不同的错误处理例程！

请参阅此示例。
第一行包含两个组成元素what和ever，不同的浏览器对它们的处理方式有所不同。文本在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>

虚构元素的另一个问题是，您将不知道未来会怎样。如果你创建了一个网站，几年前与像标签名称picture，dialog，details，slot，template等，期待他们表现得像跨度，你有麻烦了！

您可以使用此：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>

我找到了有关创建自定义HTML标记并实例化它们的文章。它简化了流程，并将其分解为任何人都可以立即理解和利用的术语-但是我不确定它包含的代码示例在所有浏览器中均有效，因此请谨慎并进行全面测试。不过，这是一个很好的入门入门。

自定义元素：在HTML中定义新元素