web-dev-qa-db-ja.com

カスタムHTMLタグの使用

私のhtmlでは、<toys>ではなく</toys><h2>などの一意の識別子を使用してイメージを保持することが意味的に正しいかどうか興味がありました。例えば：

<toys class="grid_4 Push_2">&nbsp</toys>を持つことが望ましいですか？

cSSで：

    toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
    }

代わりに：私は現在：<h1 class="grid_4 Push_2">&nbsp</h1>を持っています

cSSで：

    h1 {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
    }

<toys>のような一意の識別子の使用は意味的に正しいですか？

htmlcsssemantic-markup
43
Noob

これらのタグがいつ標準化され、将来特別な用途に使用されるかわからないため、カスタムタグの使用は避けることをお勧めします。

ヘッダータグの使用を避けたい場合の例として最適なことは、次のとおりです。

<div class="toys grid_4 Push_2">&nbsp</div>

.toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
}

さらに：

ページの設計時に標準のhtmlタグを使用しない場合、スタイルが無効になっていると、それらは整理された形で表示されません。これは今後の問題ではありませんが、何らかの理由でスタイルなしの「おもちゃ」のリストを表示する必要がある場合は、<ul>または<ol>を<li>タグ。

UPDATE：

Flimzyがコメントで指摘したように、カスタムHTML要素には独自のW3C仕様があります。ただし、まだ完全にはサポートされていません。

23
cwharris

これらの回答のほとんどは一般的なアドバイスですが、質問に対する適切な回答ではありません。これは完全に合法だと思います。

HTML5はすでに動いているターゲットです。ブラウザは仕様を実装し、さまざまなペースで革新します。 「有効なHTML」と呼ばれるものは1つもありません。少なくとも使用する価値はありません。地球上のすべての人とボット/クローラー用の公開ページを構築している場合は、A）クライアントを検出してそれに応じてカスタマイズし、複雑な/高度なページ用にカスタマイズするか、B）本当にシンプルでシンプルにする必要があります。一方、LANに配置したり、ログインウォールの後ろに隠したり、最新のエッジで開発したり、頻繁に更新を計画したりする場合は、慎重に少しでも自由に革新する必要があります。ブラウザ開発者と仕様作成者はそれぞれのニーズに応えますが、同じことができます。

したがって、カスタムタグが必要な場合は、慎重に選択し（ここで、ブラウザ実装の正式な仕様の一部となる可能性は完全に無視できることを指摘します）、そのままにします。ただし、CSSをIEで動作させるには、html5shimのようにして、javascriptでdocument.createElement（ 'toys'）を呼び出す必要があります。

また、カスタム要素は独自の標準とサポートを取得していることを追加する必要がありますが、現在のところ、すべての要素に名前に「-」が含まれている必要があります。したがって、「おもちゃ」だけではなく、「x-おもちゃ」や「私のおもちゃ」などをお勧めします。個人的には、私はコンベンションに興奮していませんが、その理由は理解しています。

41
Nathan Bubna

確かにcan;ただし、一般的には良いアイデアではありませんです。 HTML5は多くの点でそのようなものに移行していますが、汎用化されています。特定のタグを使用すると、サポートされている間、ブラウザによって結果が大きく異なる場合があります。

7
Tejs

更新（すべての回答が古いため）：

WebコンポーネントAPIがすべての主要なブラウザーに実装されるように、私の意見では、将来的にカスタムタグの使用を避けることはできません。 Webコンポーネントは簡単に主流になると思います。理論全体がそれに基づいて構築されています。カスタムタグ、カスタム属性、これらの要素に付加されたカスタムJS。

だから私が言うこと：それは最近、独自のタグを使用することは悪いことではありませんが、SEO関連の建物を検討する必要があります。

5
wintercounter

@superUntiledに同意します。CSSセレクター（クラスとID）を十分に活用する必要があります。したがって、「おもちゃ」タイプのオブジェクトがある場合は、そのオブジェクトのクラスを作成する必要があります。次に、セレクタ.toyを使用するだけで、CSSを使用してすべてのcarsを選択できます。

このようなもの：

<style>
.toy {
    color: red;
}
</style>

<p class="toy">My little car</p>
1
PachinSV

確かにタグを定義し、スタイルシート内で何をすべきかを定義する場合、それはそれを結び付けるべきですか？後で新しいタグが標準化された場合でも、スタイルシートは標準をオーバーライドします。これがスタイルシートの目的です。

たとえば、ページの改行を頻繁に制御する必要があります。不器用を使用するのではなく

<span style="white-space:nowrap">bla bla bla</span>

毎回、破損していないテキストを独自のタグで囲み、スタイルシートで定義します。

nbr {
  white-space:nowrap;
}

そう

<p> This is some text. <nbr>This is some more text.</nbr></p>

空きがある場合は1行に表示され、それ以外の場合は2行目が次の行に表示されます。または、正確には、IEの古いバージョンを除くすべてのブラウザーで。鋳鉄にするには、各ページの[head]セクションに次を追加しました（Wordpressでは、テーマのheader.phpに追加するだけです）：

<!--[if lt IE 9]> 
<script> document.createElement('nbr'); </script>
<![endif]-->

それとも何か不足していますか？

1
Steve GS

はい、それは意味的に正しいでしょう。

ただし、HTMLには一連のタグが定義されているため、無効な構文です。

一部のブラウザではこれを回避できます。

とはいえ、それを行うことの利点は何ですか？それは本当にソースコードを維持しなければならない人だけに利益をもたらすでしょう。

参考までに、あなたが提案しているのは、XMLとほとんど同じです。

1
DA.

また、カスタム要素はCSSクラスやIDよりも優れた方法である可能性があるという元のポスターにも同意します。たとえば、Googleスプレッドシートで自分のウェブサイトの在庫とコンテンツを管理している友人がいます。 Googleシート配列の出力は単なるテキストです。 （フロントエンドHTMLはJSを使用してGSheetsからコンテンツを取得します）。そのため、<sale>などのカスタムタグを設定してフォントの色とスタイルを変更し、コーディングを知らない友人がこれらのタグをGoogleシートに挿入してフォントをカスタマイズできるようにします。それは素晴らしいです。

1
nms553

DoctypeがXHTMLに設定されている場合は、問題ないはずです。ただし、通常はHTML Doctypeには無効です。

0
Shaz

独自のタグを作成する必要はありません。

HTMLタグはHTML仕様で定義されています。

の代わりに：

<h1 class="grid_4 Push_2">&nbsp</h1>

次のようなことを行う必要があります。

<h1 class="toys">&nbsp</h1>

ただし、XMLの場合は独自のタグを作成できます。

ただし、すべてのブラウザがタグをサポートしているわけではなく、CSSを使用してスタイルを設定することはできません。

新しい HTML5タグ でも同じことが起こります

0
PeeHaa