Question

在我的HTML中，我很好奇，如果使用<toys> </toys>等唯一标识符来保存图像而不是<h2>，则语义上是正确的。例如：

是否首选： <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 {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
    }

使用<toys>等唯一标识符在语义上是否正确？

Answer 1

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

HTML5已经成为移动目标;浏览器实施规范并以不同的速度进行创新。没有一件事叫做＆＃34;有效的HTML＆＃34;，至少不值得使用。如果你正在为这个星球上的每个人和机器人/爬虫建立一个公共页面，那么你已经要么必须A）检测客户端并相应地进行自定义，对于复杂/高级页面或B）使其真正，非常简单和简单。另一方面，如果您将其放在局域网上或隐藏在登录墙后面或在最前沿开发并计划频繁更新，那么您应该随意进行创新。浏览器开发人员和规范编写者可以满足他们的需求，您也可以这样做。

所以，如果你想要一个自定义标签，请谨慎选择（在这里我将指出，将成为浏览器实现的正式规范的一部分的几率完全可以忽略不计），然后去做。但是，要使你的CSS在IE中运行，你必须像html5shim那样做，并在你的javascript中调用document.createElement（＆＃39; toys＆＃39;）。

我还应该补充说，自定义元素正在获得自己的标准和支持，但目前的共识是它们都应该有一个＆＃39; - ＆＃39;在名字里。所以我会推荐类似于＆x; x-toys＆＃39;或者我的玩具＆＃39;而不仅仅是玩具＆＃39;。就个人而言，我对这个大会并不感到兴奋，但我理解其中的原因。

Answer 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>，否则你运气不好1}}标签。

<强> 更新：

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

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

Answer 3

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

Answer 4

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

从Web组件开始，API在每个主要浏览器中实现，在我看来，您无法避免将来使用自定义标记。我认为Web Components很容易成为主流。整个理论建立在它上面：自定义标签，自定义属性自定义JS附加到这些元素。

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

Answer 5

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

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

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

那说，做到这一点有什么好处？它真的只会让那些必须维护源代码的人受益。

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

Answer 6

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

这样的事情：

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

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

Answer 7

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

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

<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]-->

或者我错过了什么？

Answer 8

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

Answer 9

如果您的doctype设置为XHTML，那么您应该没问题。但它通常对HTML doctypes无效。

Answer 10

您不想构成自己的标签。

HTML标记在HTML规范中定义。

代替：

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

您应该执行以下操作：

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

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

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

新的HTML5 tags

也发生了同样的事情

使用自定义HTML标记

10 个答案: