人々が作るのと同じ方法、つまり新しい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>
これを考慮してください:
document.createElement('custom-tag')
これはあなたのウェブサイトはJavaScriptがオンになっている場合にのみ正しくレンダリングされます<span>
のようなインライン要素として扱われます。つまり、CSSを記述してcustom-tag { display: block }
として宣言する必要があります。<pane>
および<tab>
)を宣伝する Angular.js をリリースしました。 フロントページ。<div>
よりも意味のある重要な要素があり、既存のHTML 4/5に相当するものがない場合は、カスタムタグを使用します。これは、特別なタグ/属性/クラスのDOMを解析してコンポーネント(Angular.jsなど)を作成するWebアプリケーションに特に当てはまります。このトピックの詳細: Angular.jsのIE互換性
これを行うべきではない理由はいくつかあります。
First:このような独自のタグを作成すると、ul and li
のようなタグの機能が失われます。カスタムタグは単なる汎用divであり、探している結果は得られません。はい、タグのスタイルを設定してこれらの関数を複製することはできますが、ブラウザがすでに行っていることを行うためにその時間を費やすのはなぜですか。
Second:障害を持つ人々は、標準のHTMLに準拠していないため、サイトを利用できません。目の不自由な人は、htmlを読み、内容を口頭で提示する支援技術を使用します。
もう1つの理由は、ブラウザとJavaScriptがこれらのカスタムタグで常にうまく機能するとは限らないことです。想像以上に多くの問題が発生する可能性があります。これを行うと、アプリをクロスプラットフォームにするのが難しくなります。
HTMLで定義された要素には、既知のセマンティクスがあります。これらは、ブラウザー(CSSをサポートしていない場合に特に便利です)、スクリーンリーダー、検索エンジン、およびその他のユーザーエージェントによって理解され、ユーザーに表現されます。
あなた自身の要素は無意味です。
XSLTを使用してXMLを有効なHTMLに変換したいと思います。独自のカスタムタグを導入すると、HTMLではなく、おそらくXMLまたはSGMLを記述します。