27

我找到了一个网站，其中包含向 html 添加自定义标签的指南，就像人们使用新的 HTML5 标签一样。我必须承认，我认为添加自己的标签会很棒，可以更轻松地“扫描”代码并找到您要查找的内容。但是我发现的每个网站，人们都说它不好....但是为什么它不好呢？

带有类的示例 html：

<ul class="commentlist">
    <li class="comment odd">
    <div class="1">
        <div class="avatar">
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </div>
        <div class="metadata">
            <div class="name">Name</div>
            <p>response1</p>
        </div>
    </div>
    <ul class="children">
        <li class="comment even">
            <div class="2">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1a</p>
                </div>
            </div>
        </li>
        <li class="comment odd">
            <div class="3">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1b</p>
                </div>
            </div>
        </li>
    </ul>
</li>

在这里我可以用自定义标签做什么，我认为这会更容易找到我的方式，所以为什么不：

<clist>
<ccommentbox class="odd">
    <ccomment class="1">
        <cavatar>
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </cavatar>
        <cdata>
            <cname>Name</cname>
            <ctext>response1</ctext>
        </cdata>
    </ccomment>
    <cchildren>
        <ccommentbox class="even">
            <ccomment class="2">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1a</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
        <ccommentbox class="odd">
            <ccomment class="3">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1b</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
    </cchildren>
</ccommentbox>

4

5 回答 5

33

自定义标签并不邪恶

考虑一下：

  • 默认情况下，它们在 IE 6-8 中无法识别 -> 您必须使用 JavaScript 来介绍您在页面上使用的每个自定义标签，例如：document.createElement('custom-tag')这意味着您的网站只有在打开 JavaScript 的情况下才能正确呈现
  • 在大多数浏览器中，您的自定义标签将被视为内联元素<span>，这意味着您必须编写 CSS 将它们声明为custom-tag { display: block }
  • 我发现没有任何资源可以证明自定义标签对搜索引擎有任何负面影响。事实上，Google 发布了Angular.js ，它在首页的示例中推广了自定义标签（<pane>和<tab>）。
  • 大多数 HTML 编辑器会将您的自定义标签标记为无效 HTML，因为它们不在官方规范中。

总结一下：

  • 当重要元素的意义大于<div>并且没有现有的 HTML 4/5 等效项时，请使用自定义标记。对于为特殊标签/属性/类解析 DOM 以创建组件（如 Angular.js）的 Web 应用程序尤其如此。
  • 如果您构建的只是一个具有正常内容的简单网站，请坚持使用标准 HTML。您将希望您的网站在没有打开 JavaScript 的情况下也能正常工作。
  • 如果您构建一个Web 应用程序，其中自定义标记确实有助于使源代码更清晰并表达特殊语义，请使用它们。上面提到的所有负面影响（必须打开 JavaScript / CSS 声明）对于这些情况都无关紧要。相同的规则适用于自定义属性。

有关此主题的更多详细信息：Angular.js 的 IE 兼容性

于 2012-09-26T22:27:00.560 回答
9

您不应该这样做的原因有很多。

  1. 第一：通过创建你自己的标签，你失去了标签的功能，比如ul and li. 您的自定义标签将只是通用 div，不会为您提供您正在寻找的结果。是的，您可以设置标签的样式以复制这些功能，但为什么要花所有时间做浏览器已经做的事情。

  2. 第二：残障人士将无法使用您的网站，因为它不符合任何标准 HTML。盲人将使用阅读 html 并口头呈现内容的辅助技术。

另一个原因是浏览器和 javascript 并不总是能很好地处理这些自定义标签。您可能会遇到比您想象的更多的问题。如果你这样做，让你的应用程序跨平台变得更加困难。

于 2012-01-18T07:16:21.720 回答
5

HTML 中定义的元素具有已知的语义。这些可以被浏览器（如果它们不支持 CSS）、屏幕阅读器、搜索引擎和任何其他用户代理理解，然后表达给用户。

你自己的元素是没有意义的。

于 2012-01-18T07:14:07.567 回答
1

我认为您希望使用 XSLT 将您的 XML 转换为有效的 HTML。如果您引入自己的自定义标签，您将不再编写 HTML，而可能是 XML 或 SGML。

于 2012-01-18T07:31:50.693 回答
-2

好吧，一方面，您必须为所有这些自定义元素定义 CSS 以使其表现得像您希望的那样（例如，使它们<ccommentbox>看起来像一个列表），这会导致不必要的 CSS。这也使搜索机器人更难理解您的网站。

于 2012-01-18T07:13:41.613 回答