自定义标记在HTML5中无效。但目前浏览器支持解析它们，你也可以使用css来使用它们。因此，如果你想为当前的浏览器使用自定义标记，那么你可以。但是，一旦浏览器实现了严格用于解析HTML内容的W3C标准，这种支持可能就会消失。

基本自定义元素和属性

自定义元素和属性在HTML中是有效的，前提是:

元素名称是小写的，以x-开头 属性名小写，以data-开头

例如，<x-foo data-bar="gaz"/>或<br data-bar="gaz"/>。

元素的通用约定是x-foo;推荐使用x厂商特性。

这可以处理大多数情况，因为开发人员很少需要注册他们的元素所带来的所有功能。语法也足够有效和稳定。下面是更详细的解释。

高级自定义元素和属性

到2014年，有了一种新的、经过很大改进的方法来注册自定义元素和属性。它不能在ie9或Chrome/Firefox 20等较老的浏览器中运行。但是它允许你使用标准的HTMLElement接口，防止冲突，使用非x-*和非data-*名称，并定义自定义的行为和语法。它需要一些奇特的JavaScript，详见下面的链接。

HTML5岩石-在HTML中定义新元素 WebComponents.org -自定义元素介绍 Web组件:自定义元素

关于基本语法的有效性

使用data-*自定义属性名已经完全有效了一段时间，甚至适用于旧版本的HTML。

W3C - HTML5:可扩展性

至于自定义的(未注册的)元素名称，W3C强烈建议不要使用它们，并认为它们不符合规范。但是浏览器需要支持它们，x-*标识符不会与未来的HTML规范冲突，x-vendor-feature标识符也不会与其他开发人员冲突。自定义DTD可用于绕过任何挑剔的浏览器。

以下是官方文件中的一些相关摘录:

"Applicable specifications MAY define new document content (e.g. a foobar element) [...]. If the syntax and semantics of a given conforming HTML5 document is unchanged by the use of applicable specification(s), then that document remains a conforming HTML5 document." "User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them." "User agents are not free to handle non-conformant documents as they please; the processing model described in this specification applies to implementations regardless of the conformity of the input documents." "The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification."

W3C - HTML5:一致性文档 HTML标准:DOM元素

自定义元素规范可以在Chrome和Opera中使用，也可以在其他浏览器中使用。它提供了一种以正式方式注册自定义元素的方法。

自定义元素是可以定义的DOM元素的新类型 作者。与无状态且短暂的装饰器不同，自定义 元素可以封装状态并提供脚本接口。

自定义元素是更大的W3规范Web组件的一部分，另外还有模板、HTML导入和影子DOM。

Web组件使Web应用程序作者能够使用 视觉的丰富程度和交互性是CSS无法实现的 单独使用，并且易于组合和重用，而不可能使用脚本 今天库。

但是，在谷歌开发人员的这篇关于自定义元素v1的优秀通览文章中:

自定义元素的名称必须包含破折号(-)。因此<x-tags>、<my-element>和<my-awesome-app>都是有效名称，而<tabs>和<foo_bar>则不是。这个需求是为了让HTML解析器能够区分自定义元素和常规元素。当新标签添加到HTML中时，它还可以确保向前兼容性。

一些资源

Web组件示例可从https://WebComponents.org获得 WebComponents.js充当了Web组件的填充，直到它们在任何地方都得到支持。参见WebComponents.js github页面和web浏览器支持表。

只需使用任何你想要的，而不需要任何dom声明

<container>content here</container>

添加您自己的样式(display:block)，它将适用于任何现代浏览器

这是可能的，也是允许的:

用户代理必须处理它们不处理的元素和属性 理解为语义中立的;将它们留在DOM中(用于DOM 处理器)，并根据CSS(对于CSS处理器)对它们进行样式化， 但并没有从中推断出任何意义。

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

但是，如果你想要增加交互性，你需要让你的文档无效(但仍然是完整的功能)，以适应IE的7和8。

见http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html(我的博客)

我知道这个问题很老了，但我一直在研究这个主题，尽管上面的一些陈述是正确的，但它们不是创建自定义元素的唯一方法。例如:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

将工作得非常好(在谷歌Chrome, IE, FireFox和移动Safari的新版本)。您所需要的只是一个alpha字符(a-z, a-z)来开始标记，然后您可以使用任何非alpha字符。如果在CSS中，你必须使用“\”(反斜杠)来查找元素，比如需要Query\^{…}。但在JS中，你只是用你看到的来称呼它。我希望这能帮到你。参见这里的例子

- 水貂CBOS