web-dev-qa-db-ja.com

カスタムタグ...なぜですか？

人々が作るのと同じ方法、つまり新しいHTML5タグを使用して、カスタムタグをhtmlに追加するためのガイドがあるサイトを見つけました。自分のタグを追加して、コードを「スキャン」し、探しているものを見つけやすくするのは素晴らしいことだと私は認めなければなりません。しかし、私がそれについて見つけたすべてのサイトは、人々はそれが良くないと言います....しかし、なぜそれは良くないのですか？

クラス付きの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>
csshtmlcustom-tag
25
martindilling

カスタムタグは悪ではありません

これを考慮してください：

  • IEデフォルトでは6-8）では認識されません->ページで使用する各カスタムタグを導入するにはJavaScriptを使用する必要があります。例：document.createElement('custom-tag')これはあなたのウェブサイトはJavaScriptがオンになっている場合にのみ正しくレンダリングされます
  • ほとんどのブラウザでは、カスタムタグは<span>のようなインライン要素として扱われます。つまり、CSSを記述してcustom-tag { display: block }として宣言する必要があります。
  • カスタムタグが検索エンジンに悪影響を与えることを証明できるリソースは見つかりませんでした。実際、Googleはの例でカスタムタグ（<pane>および<tab>）を宣伝する Angular.js をリリースしました。 フロントページ。
  • ほとんどのHTMLエディターは、カスタムタグが公式の仕様に含まれていないため、無効なHTMLとしてマークします。

要約する：

  • <div>よりも意味のある重要な要素があり、既存のHTML 4/5に相当するものがない場合は、カスタムタグを使用します。これは、特別なタグ/属性/クラスのDOMを解析してコンポーネント（Angular.jsなど）を作成するWebアプリケーションに特に当てはまります。
  • 構築するのが通常のコンテンツを含む単純なWebサイトだけである場合は、標準のHTMLに固執します。 JavaScriptをオンにしなくてもWebサイトを機能させることができます。
  • カスタムタグがソースをよりクリーンにし、特別なセマンティクスを表現するのに本当に役立つWebアプリケーションを構築する場合は、それらを使用してください。上記のすべての否定的な影響（JavaScriptをオンにする必要がある/ CSS宣言）は、これらの場合には問題になりません。同じルールがカスタム属性に適用されます。

このトピックの詳細： Angular.jsのIE互換性

31
DominikGuzei

これを行うべきではない理由はいくつかあります。

  1. First：このような独自のタグを作成すると、ul and liのようなタグの機能が失われます。カスタムタグは単なる汎用divであり、探している結果は得られません。はい、タグのスタイルを設定してこれらの関数を複製することはできますが、ブラウザがすでに行っていることを行うためにその時間を費やすのはなぜですか。

  2. Second：障害を持つ人々は、標準のHTMLに準拠していないため、サイトを利用できません。目の不自由な人は、htmlを読み、内容を口頭で提示する支援技術を使用します。

もう1つの理由は、ブラウザとJavaScriptがこれらのカスタムタグで常にうまく機能するとは限らないことです。想像以上に多くの問題が発生する可能性があります。これを行うと、アプリをクロスプラットフォームにするのが難しくなります。

9
Erik Funkenbusch

HTMLで定義された要素には、既知のセマンティクスがあります。これらは、ブラウザー（CSSをサポートしていない場合に特に便利です）、スクリーンリーダー、検索エンジン、およびその他のユーザーエージェントによって理解され、ユーザーに表現されます。

あなた自身の要素は無意味です。

5
Quentin

XSLTを使用してXMLを有効なHTMLに変換したいと思います。独自のカスタムタグを導入すると、HTMLではなく、おそらくXMLまたはSGMLを記述します。

1
Lie Ryan