博士TL;

自定义标记在HTML中无效。这可能会导致渲染问题。 使将来的开发更加困难，因为代码不可移植。 有效的HTML提供了很多好处，比如SEO、速度和专业性。

长回答

有一些争论认为带有自定义标记的代码更有用。

但是，这会导致无效的HTML。这对你的网站不好。

有效的CSS/HTML | StackOverflow的要点

谷歌更喜欢它，所以它对SEO有好处。 它使你的网页更有可能在你没有测试过的浏览器上运行。 它让你看起来更专业(至少对一些开发人员来说) 兼容的浏览器可以更快地呈现[有效的HTML] 它指出了一堆你可能忽略的、影响你可能没有测试的东西的模糊错误，例如代码页或页面的语言集。

为什么验证| W3C

作为调试工具的验证 验证作为一种面向未来的质量检查 验证简化了维护 验证有助于教授好的实践 认可是专业的标志

这对于html5来说是可行的，但是你需要考虑到旧的浏览器。

如果你决定使用它们，一定要注释你的html!!有些人可能很难弄清楚它是什么，所以注释可以节省他们大量的时间。

就像这样，

<!-- Custom tags in use, refer to their CSS for aid -->

当你创建自己的自定义标签/元素时，旧的浏览器将不知道这是什么，就像html5的元素如nav/section一样。

如果你对这个概念感兴趣，那么我建议你用正确的方法去做。

开始 自定义元素允许web开发人员定义新的HTML类型 元素。该规范是几个新的API原语之一 Web组件的保护伞，但它很可能是最 重要的。如果没有通过解锁的特性，Web组件就不存在 自定义元素: 定义新的HTML/DOM元素创建从其他元素扩展的元素 元素从逻辑上将自定义功能捆绑在一起 扩展现有DOM元素的API

您可以使用它做很多事情，并且它确实可以使您的脚本更漂亮，就像本文想说的那样。自定义元素在HTML中定义新元素。

让我们回顾一下，

Pros

非常优雅，易于阅读。 很高兴没有看到那么多的潜水者。: p 让代码有一种独特的感觉

Cons

较老的浏览器支持是需要考虑的重要因素。 如果不了解自定义标记，其他开发人员可能不知道该做什么。(向他们解释或添加评论告知他们) 最后要考虑的一件事，但我不确定，是块和内联元素。通过使用自定义标签，你最终会写更多的css，因为自定义标签不会有默认的一面。

选择完全取决于您，您应该根据项目的要求来选择。

更新1/2/2014

这里有一篇非常有用的文章，我发现并打算分享，自定义元素。

为什么要自定义元素?自定义元素让作者进行定义 他们自己的元素。作者将JavaScript代码与自定义标记相关联 名称，然后像使用任何标准一样使用这些自定义标记名称 标签。 例如，注册后的一种特殊按钮叫做 超级按钮，像这样使用超级按钮: 自定义元素仍然是元素。我们 能像其他的一样轻松地创建、使用、操纵和组合它们吗 今天的标准。

这似乎是一个非常好用的库，但我注意到它没有通过windows的构建状态。我相信这也是一个预alpha版本，所以我会密切关注它的发展。

根据规格:

CSS

类型选择器是使用CSS限定名称语法编写的文档语言元素类型的名称

我以为这是元素选择器，但显然它实际上是类型选择器。规范继续讨论了CSS限定名称，它对名称的实际内容没有任何限制。也就是说，只要类型选择器匹配CSS限定名称语法，它就是技术上正确的CSS，并将匹配文档中的元素。对于特定规范(HTML或其他规范)中不存在的元素，没有特定于css的限制。

HTML

在文档中包含您想要的任何标签没有官方限制。但是，文档确实说了

作者不能将元素、属性或属性值用于其适当的预期语义目的以外的目的，因为这样做会妨碍软件正确处理页面。

然后它说

作者不能使用本规范或其他适用规范不允许的元素、属性或属性值，因为这样做会大大增加将来扩展该语言的难度。

我不确定具体在哪里或者规范是否说未知元素是允许的，但它确实谈到了HTMLUnknownElement接口的未知元素。有些浏览器甚至不能识别当前规范中的元素(我想到了IE8)。

虽然有一个自定义元素的草案，但我怀疑它还没有在任何地方实现。

其他人提出了很好的观点，但值得注意的是，如果你看看像AngularJS这样的框架，自定义元素和属性是非常有效的。它们不仅向xml传递更好的语义含义，而且还可以为web页面提供行为、外观和感觉。

令人惊讶的是，没有人(包括我过去的自己)提到可访问性。使用有效标记而不是自定义标记的另一个原因是为了与最大数量的软件兼容，包括屏幕阅读器和人们出于可访问性目的所需的其他工具。此外，像WAI这样的可访问性法律要求建立可访问的网站，这通常意味着要求他们使用有效的标记。

显然没人提过，所以我来。

这是浏览器大战的副产品。

回到20世纪90年代，当互联网刚开始成为主流时，浏览器市场的竞争加剧了。为了保持竞争力和吸引用户，一些浏览器(最著名的Internet Explorer)试图通过试图弄清楚页面设计者的意思来提供帮助和“用户友好”，从而允许不正确的标记(例如，<b><i>foobar</b></i>将正确地呈现为粗体-斜体)。

这在某种程度上是有道理的，因为如果一个浏览器不断抱怨语法错误，而另一个浏览器接受你扔给它的任何东西，并吐出一个(或多或少)正确的结果，那么人们自然会涌向后者。

While many thought the browser wars were over, a new war between browser vendors has reignited in the past few years since Chrome was released, Apple started growing again and pushing Safari, and IE lost its dominance. (You could call it a “cold war” due to the perceived cooperation and support of standards by browser vendors.) Therefore, it is not a surprise that even contemporary browsers which supposedly conform strictly to web standards actually try to be “clever” and allow standard-breaking behavior such as this in order to try to gain an advantage as before.

不幸的是，这种放任行为导致了大量(有些人甚至认为是恶性的)标记不良的网页的增长。因为IE是最宽容、最受欢迎的浏览器，而且由于微软对标准的持续蔑视，IE因鼓励和推广糟糕的设计、传播和延续坏页面而臭名昭著。

现在你可能可以在一些浏览器上使用这样的怪癖和漏洞，但除了偶尔的谜题或游戏或其他东西，在创建网页和网站时，你应该始终坚持网页标准，以确保它们正确显示，并避免它们在浏览器更新时被破坏(可能完全被忽略)。

虽然浏览器通常会将CSS与HTML标记关联起来，不管它们是否有效，但你绝对不应该这样做。

从CSS的角度来看，这在技术上没有什么问题。然而，在HTML中绝对不应该使用编造的标签。

HTML是一种标记语言，这意味着每个标记对应于特定类型的信息。

您创建的标记不对应于任何类型的信息。这将产生来自网络爬虫的问题，如谷歌。

阅读有关正确标记重要性的更多信息。

Edit

div指的是多个相关元素的组，意味着以块形式显示，并可以这样操作。

span指的是与它们当前所在的上下文样式不同的元素，它们应该内联显示，而不是作为块显示。一个例子是句子中的几个单词需要全部大写。

自定义标记与任何标准都不相关，因此span/div应该与class/ID属性一起使用。

有一些非常特殊的例外情况，比如Angular JS