使用自定义 HTML 标签答案

【问题标题】：Using custom HTML Tags使用自定义 HTML 标签
【发布时间】：2011-05-11 20:18:04
【问题描述】：

在我的 HTML 中，我很好奇使用 <toys> 等唯一标识符而不是 <h1> 在语义上是否正确。例如：

我想拥有：

<toys class="grid_4 push_2">&nbsp;</toys>

使用 CSS：

toys {
  background: url("toys.png") no-repeat scroll 0 0 transparent;
  width: 181px;
  height: 93px;
  margin-top: -8px;
}

我目前有：

<h1 class="grid_4 push_2">&nbsp;</h1>

使用 CSS：

h1.push_2 {
  background: url("toys.png") no-repeat scroll 0 0 transparent;
  width: 181px;
  height: 93px;
  margin-top: -8px;
}

使用像<toys> 这样的唯一标识符在语义上是否正确？

【问题讨论】：

抛开关于维护的更大问题，如果它为您的目标受众正确呈现，它就是有效且语义正确的 html。
使用组件方法，是的（以 React 和 AngularJs 组件为例）。但是，我不建议将其用于一般用途（即，只是在没有概念支持的情况下将新标签扔在风中）
您的自定义标签（元素）不得命名为“toys”，而以避免与未来标准命名冲突，您的自定义元素名称必须包含连字符（w3.org/TR/custom-elements/#custom-element-conformance）；

标签： html css semantic-markup

【解决方案1】：

这些回答大多是很好的一般性建议，但不是对问题的正确答案，我认为这是完全合理的。

HTML5 已经是一个移动的目标；浏览器以不同的速度实施规范和创新。没有单一的东西叫做“有效的 HTML”，至少不值得使用。如果您正在为地球上的每个人和机器人/爬虫构建一个公共页面，那么您已经必须 A）检测客户端并相应地针对复杂/高级页面进行定制，或者 B）让它变得非常非常简单和简单。另一方面，如果您将其放在 LAN 上或将其隐藏在登录墙后面或在最前沿进行开发并计划频繁更新，那么您应该随意进行一些创新，谨慎行事。浏览器开发者和规范编写者可以满足他们的需求，您也可以这样做。

所以，如果你想要一个自定义标签，请谨慎选择（在这里我要指出，成为浏览器实现正式规范的一部分的可能性完全可以忽略不计），然后去做。但是，要让你的 CSS 在 IE 中工作，你必须像 html5shim 一样在你的 javascript 中调用 document.createElement('toys')。

我还应该补充一点，自定义元素正在获得自己的标准和支持，但目前的共识是它们都应该在名称中包含一个“-”。所以我会推荐像“x-toys”或“my-toys”这样的东西，而不仅仅是“toys”。就个人而言，我对这次大会并不感到兴奋，但我理解其中的原因。

【讨论】：

很好的答案，尤其是关于 Internet Explorer 浏览器的 createElement() 调用。
引用：“标签包含标签名称，给出元素的名称。HTML 元素的名称都只使用 U+0030 DIGIT ZERO (0) 到 U+0039 DIGIT NINE (9 )、U+0061 拉丁小写字母 A 到 U+007A 拉丁小写字母 Z 和 U+0041 拉丁大写字母 A 到 U+005A 拉丁大写字母 Z。在 HTML 语法中，标签名称，甚至是外来元素的标签名称，可能可以用任何大小写字母组合编写，当转换为全小写时，匹配元素的标签名称；标签名称不区分大小写。" w3.org/TR/2011/WD-html5-20110525/syntax.html#elements-0
似乎官方不允许使用减号。不过，它可能在某些浏览器中有效。
只要toys- 就可以了，因为W3C 自己使用<c-> 来突出显示代码。

【解决方案2】：

最好避免使用自定义标签，因为您永远不知道这些标签何时会标准化，并在未来有特殊用途。

如果您想避免使用标题标签，则对您的示例最好的做法是：

<div class="toys grid_4 push_2">&nbsp</div>

.toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
}

另外：

如果您在设计页面时不使用标准的 html 标签，当样式被禁用时，它们将不会以任何有组织的方式出现。这不是问题，继续前进，但是如果出于任何原因您需要查看没有样式的“玩具”列表，除非您使用 <ul> 或 <ol> 和 <li> 标签，否则您将不走运。

更新：

正如 Flimzy 在 cmets 中指出的那样，自定义 HTML 元素现在拥有自己的 W3C 规范。但是，它们尚未得到完全支持。

规格：https://www.w3.org/TR/custom-elements/
支持：http://caniuse.com/#feat=custom-elements

【讨论】：

谢谢。您阐明了使用自定义 html 标签可能会出现的问题。
所以我问.. 有标签有什么意义？他们不应该提供语义吗？有趣的是，XHTML 代表可扩展的 HTML，但是当你扩展它并且你的标记没有验证时，每个人总是吓坏了。
我不知道有哪些优秀的 Web 开发人员认为 XHTML 比标准、格式正确、封闭标记的 HTML 更好。事实上，我确信很多新开发人员认为 XHTML 代表 XML-HTML，因为它比以前的 HTML 标准更接近 XML 标准。为了回答您的问题，标签实际上确实提供了语义含义。 HTML 文档是一些数据的视图。它不是数据本身。因此，标签为它们显示它们所代表的数据的方式提供了语义含义。 “div”表示分区，“p”表示段落，“section”表示节等。
按照同样的逻辑，我应该避免在 C 中使用函数和变量，因为我永远不知道这些符号将来何时会成为保留字。我怀疑“玩具”是否会成为 HTML 标准标签，如果是这样，我们可能希望积极主动且有能力的网站管理员会发现s/toys/my-toys/g 很容易。使用自定义标签并为其设置样式可以大大简化和明确标记。
It is best to avoid using custom tags, as you never know when those tags may become standardized... this（以及此答案的其余大部分内容）现在已过时，因为明确允许自定义标签，并且在名称中使用“-”可以保证它们永远不会标准化.

【解决方案3】：

你当然可以；但是，这样做通常不是一个好主意。在许多方面，HTML5 正在向类似的方向发展，但已通用化；具有特定标签，虽然受支持，但在不同浏览器之间可能会产生非常不同的结果。

【讨论】：

【解决方案4】：

更新（因为所有答案都是旧的）：

在每个主流浏览器中都实现了 Web 组件 API，在我看来，你不能避免在未来使用自定义标签。我认为 Web Components 很容易成为主流。整个理论都建立在它之上：自定义标签、自定义属性、自定义 JS 附加到这些元素上。

所以我要说的是：现在使用自己的标签并不是一件坏事，但您仍然需要考虑与 SEO 相关的构建。

【讨论】：

【解决方案5】：

当然，如果你定义了一个标签，并在你的样式表中定义了它应该做什么，那应该把它捆绑起来吗？即使您的新标签稍后变得标准化，您的样式表也会覆盖标准 - 毕竟这就是样式表的用途。

例如，我经常需要控制页面上的换行符。而不是使用笨拙的

<span style="white-space:nowrap">bla bla bla</span>

每次，我都会将完整的文本包含在我自己的标签中并在我的样式表中定义：

nbr {
  white-space:nowrap;
}

所以

<p> This is some text. <nbr>This is some more text.</nbr></p>

如果有空位将出现在一行，否则第二句将出现在下一行。或者，准确地说，在除旧版本 IE 之外的所有浏览器中。作为铸铁，我在每个页面的 [head] 部分添加了以下内容（在 Wordpress 中，只需添加到主题的 header.php 中）：-

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

还是我错过了什么？

【讨论】：

是的，你错过了一些东西。 “即使你的新标签以后标准化，你的样式表也会覆盖标准”是非常幼稚的。作为一个真实的例子，让我们以<picture> 元素为例。如果您的样式表中只有white-space:nowrap 之类的内容，您将不会覆盖此元素的所有默认样式，并且您的文档将在支持它的新浏览器中严重损坏。所以不要这样做。对您自己设计的元素使用推荐的命名协议（即使用破折号，<n-br>），或者将它们放在您自己选择的命名空间中（<my:nbr>）。
我同意我这样做是为了一个我喜欢具有特定属性的“布局”标签。

【解决方案6】：

是的，这在语义上是正确的。

但是，它是无效的语法，因为 HTML 有一组已定义的标签。

您可以在某些浏览器中解决这个问题。

也就是说，这样做有什么好处？它真的只会使必须维护源代码的人受益。

仅供参考，您所提议的几乎就是 XML。

【讨论】：

【解决方案7】：

我同意@superUntiled，您应该充分利用 CSS 选择器（类和 ID）。因此，如果您有一个“玩具”类型的对象，您应该为该对象创建一个类。然后，您可以使用 CSS 选择所有 cars，只需使用选择器 .toy。

类似这样的：

<style>
.toy {
    color: red;
}
</style>

<p class="toy">My little car</p>

【讨论】：

【解决方案8】：

我也同意原始发帖人的观点，即自定义元素可能是比 CSS 类和 ID 更好的方式。例如，我有一个朋友在 Google 表格中管理他的网站的库存和内容。 google sheet 数组输出只是纯文本。（前端 HTML 使用 JS 从 GSheets 中检索内容）。因此，我设置了自定义标签，例如<sale>，来更改字体颜色和样式，这样我不懂编码的朋友就可以简单地将这些标签插入到google sheet中来自定义字体。太棒了。

【讨论】：

【解决方案9】：

如果您的 doctype 设置为 XHTML，您应该没问题。但它通常对 HTML 文档类型无效。

【讨论】：

XHTML 是旧风格。检查 HTML5 规范。
@BerggreenDK：我明白这一点，但从不推荐使用它。

【解决方案10】：

您不想编造自己的标签。

HTML 标记在 HTML 规范中定义。

代替：

<h1 class="grid_4 push_2">&nbsp</h1>

你应该这样做：

<h1 class="toys">&nbsp</h1>

但是，如果是 XML，您可以自己制作标签。

但请注意，并非所有浏览器都支持您的标签，您将无法使用 CSS 设置它们的样式。

同样的事情发生在新的HTML5 tags

【讨论】：