使用自定义HTML标记

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

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

我还应该补充说，自定义元素正在获得自己的标准和支持，但目前的共识是它们都应该在名称中加上“ - ”。 所以我会推荐像'x-toys'或'my-toys'而不仅仅是'玩具'。 就个人而言，我对会议并不感到兴奋，但我理解其中的原因。

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>标签一起使用，否则你将失去运气。

更新：

正如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

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

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

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

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

Answer 7

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

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

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

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

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

Answer 8

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

像这样的东西：

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

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

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标签也发生了同样的事情