Question

我找到了一个网站，其中包含向html添加自定义标签的指南，与人们制作的方式相同，即使用新的HTML5标签。我必须承认，我认为添加自己的标签会更好，可以更容易“扫描”代码，并找到您要查找的内容。但是我找到的每个网站都有人说这不好......但为什么不好呢？

示例html with class：

<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

自定义标签不是邪恶的

考虑一下：

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

总结：

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

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

Answer 2

为什么不这样做会有很多原因。

首先：通过创建自己的代码，您将失去ul and li等代码的功能。你的自定义标签只是通用的div，而且不会给你你想要的结果。是的，你可以设置标签的样式来复制这些功能，但为什么要花这么多时间去做浏览器已经做过的事情。
第二：残障人士无法使用您的网站，因为它不符合任何标准HTML。那些盲人将使用阅读html并以口头方式呈现内容的辅助技术。

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

Answer 3

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

你自己的元素毫无意义。

Answer 4

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

Answer 5

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

定制标签......为什么不呢？

5 个答案:

自定义标签不是邪恶的

总结：