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

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

自定义标签不是邪恶的

考虑一下:

• 默认情况下,它们在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兼容性

Answer 2

你不应该这样做有很多原因.

1. 第一:通过创建自己的标签,你会失去像这样的标签的功能ul and li.你的自定义标签只是通用的div,而且它不会给你你想要的结果.是的,你可以设置标签的样式来复制这些功能,但为什么要花这么长时间做一些浏览器已经做过的事情.

2. 第二:残疾人将无法使用您的网站,因为它不符合任何标准HTML.那些盲人将使用阅读HTML的辅助技术并口头呈现内容.

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

Answer 3

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

你自己的元素毫无意义.