自定义标签...为什么不呢？

Question

我找到了一个网站，其中包含向 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>

Answer 1

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

Answer 2

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

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

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

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

Answer 3

自定义标签并不邪恶

考虑一下：

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

总结一下：

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

有关此主题的更多详细信息：IE compatibility for Angular.js

Answer 4

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

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

Answer 5

嗯，一方面，您必须为所有这些自定义元素定义 CSS，使其行为符合您的要求（例如，使 <ccommentbox> 看起来像一个列表），这会导致不必要的 CSS。这也使搜索机器人更难理解您的网站。