web-dev-qa-db-ja.com

HTMLのid属性に有効な値は何ですか？

HTML要素のid属性を作成するとき、その値に対してどのような規則がありますか？

html
1854
Mr Shark

HTML 4 の場合、答えは技術的には次のとおりです。

IDおよびNAMEトークンは文字（[A-Za-z]）で始める必要があり、その後に任意の数の文字、数字（[0-9]）、ハイフン（ " - "）、下線（ "_"）を続けることができます。 、コロン（ "："）、およびピリオド（ "。"）。

HTML 5 はさらに寛容であり、idには少なくとも1文字を含める必要があり、スペース文字を含めることはできません。

Id属性は XHTML で大文字と小文字を区別します。

純粋に実用的な問題として、特定の文字を避けたいと思うかもしれません。ピリオド、コロン、 '＃'はCSSセレクターでは特別な意味を持つため、 CSSではバックスラッシュ 、または jQueryに渡されるセレクターストリング ではダブルバックスラッシュを使用してそれらの文字をエスケープする必要があります。 IDのピリオドやコロンに夢中になる前に、スタイルシートやコードの文字をエスケープする頻度を考えてください。

たとえば、HTML宣言<div id="first.name"></div>は有効です。 CSSではその要素を#first\.nameとして、jQueryでは次のように選択できます。$('#first\\.name').バックスラッシュ$('#first.name')を忘れた場合は、idがfirstでクラスがnameの要素を検索するための完全に有効なセレクタがあります。これは見落としがちなバグです。長い目で見れば、代わりにid first-name（ピリオドではなくハイフン）を選択するほうが幸せかもしれません。

命名規則に厳密に従うことで、開発作業を簡素化できます。たとえば、完全に小文字に限定し、常にハイフンまたはアンダースコアで単語を区切る（ただし、両方ではなく、一方を選択し、もう一方を使用しない）場合は、覚えやすいパターンがあります。あなたは「それはfirstNameまたはFirstNameですか？」と不思議に思うことは決してないでしょう。なぜなら、あなたはfirst_nameをタイプするべきだということを常に知っているからです。ラクダケースを好みますか？ハイフンやアンダースコアは使用しないでください。また、常に最初の文字に大文字または小文字を使用し、混在させないでください。

今は非常にあいまいな問題は、少なくとも1つのブラウザ、Netscape 6、 大文字と小文字を区別するとして誤ってid属性値を扱った でした。つまり、HTMLにid="firstName"（小文字の 'f'）、CSSに#FirstName { color: red }（大文字の 'F'）を入力した場合、そのバグのあるブラウザは要素の色を赤に設定できませんでした。 2015年4月の編集時点では、Netscape 6のサポートを求められていないことを願います。これを歴史的な脚注と考えてください。

1584
dgvid

HTML 4仕様から ：

IDおよびNAMEトークンは文字（[A-Za-z]）で始める必要があり、その後に任意の数の文字、数字（[0-9]）、ハイフン（ " - "）、下線（ "_"）を続けることができます。 、コロン（ "："）、およびピリオド（ "。"）。

よくある間違いは、数字で始まるIDを使用することです。

211
Peter Hilton

技術的にはid/name属性にコロンとピリオドを使用することができますが、両方を避けることを強くお勧めします。

CSS（およびjQueryのようないくつかのJavaScriptライブラリ）では、ピリオドとコロンの両方に特別な意味があり、注意しないと問題に遭遇します。ピリオドはクラスセレクタで、コロンは疑似セレクタです（たとえば、マウスが上にあるときの要素の "：hover"）。

要素に "my.cool:thing"というIDを付けると、CSSセレクタは次のようになります。

#my.cool:thing { ... /* some rules */ ... }

これは、実際には、CSSで言うところの「idが 'my'、クラスが 'cool'、そして 'thing'疑似セレクターを持つ要素」と言っています。

大文字と小文字、数字、アンダースコア、ハイフンはすべてA〜Zにしてください。そして上記のように、あなたのIDがユニークであることを確認してください。

それがあなたの最初の関心事です。

145
Michael Thompson

jQuery doesは有効なID名を処理します。あなたはただメタ文字（すなわち、ドット、セミコロン、角括弧...）をエスケープする必要があります。それはあなたが書くことができないという理由だけでJavaScriptが引用符の問題を抱えていると言うようなものです

var name = 'O'Hara';

jQuery APIのセレクタ（下の注を参照）

63
Álvaro González

厳密に一致するはずです

[A-Za-z][-A-Za-z0-9_:.]*

しかし、jqueryはコロンに問題があるように思われるので、それらを避ける方が良いかもしれません。

60
Mr Shark

HTML5：

id属性の追加の制限を取り除きます ここを見てください 。 （文書内で一意であることを除けば）残っている唯一の要件は以下のとおりです。

  1. 値には少なくとも1文字が含まれている必要があります（空にはできません）
  2. スペースを含めることはできません。

PRE-HTML5：

IDは一致する必要があります。

[A-Za-z][-A-Za-z0-9_:.]*
  1. A〜Zまたはa〜zの文字で始める必要があります
  2. -（ハイフン）、_（アンダースコア）、:（コロン）、および.（ピリオド）が含まれる場合があります

しかし、:と.は避けるべきです：

たとえば、IDに "ab：c"というラベルを付けて#ab：cとしてスタイルシート内で参照することができますが、要素のIDであると同時に、ID "a"、クラス "b"、擬似セレクタ "c"混乱を避け、使用しないようにしてください。そして完全に。

52
Zaheer Ahmed

HTML5：IDとクラス属性の許容値

HTML 5では、IDの値に対する唯一の制限は次のとおりです。

  1. 文書内で一意である必要があります
  2. スペースを含んではいけません
  3. 少なくとも1文字含まれている必要があります

同様の規則がクラスにも適用されます（もちろん、一意性を除く）。

そのため、値はすべて数字、1桁だけ、句読文字だけ、特殊文字を含むことができます。空白はありません。これはHTML4とは非常に異なります。

HTML 4では、ID値は文字で始まらなければならず、その後に続くことができるのは文字、数字、ハイフン、アンダースコア、コロン、ピリオドだけです。

HTML 5ではこれらは有効です：

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

IDの値に数字、句読点、または特殊文字を使用すると、他のコンテキスト（CSS、JavaScript、正規表現など）では問題が生じる可能性があることに注意してください。

たとえば、次のIDはHTML 5では有効です。

<div id="9lions"> ... </div>

ただしCSSでは無効です：

CSS 2.1仕様から：

4.1.3文字とケース

CSSでは、識別子（セレクタ内の要素名、クラス、およびIDを含む）に含めることができるのは、[a-zA-Z0-9]およびISO 10646のU + 00A0以降の文字とハイフン（ - ）のみです。アンダースコア（_）; 数字、2つのハイフン、またはハイフンとそれに続く数字で始めることはできません。

ほとんどの場合、制限や特別な意味があるコンテキストでは、文字をエスケープすることができます。

W3Cの参考文献

HTML5

3.2.5.1 id属性

id属性は、その要素の一意の識別子（ID）を指定します。

値は、要素のホームサブツリー内のすべてのIDの中でユニークでなければならず、少なくとも1文字を含まなければなりません。値にスペース文字を含めることはできません。

注：IDがとることができる形式に他の制限はありません。特に、IDは数字だけで構成することも、数字で始めること、アンダースコアで始めること、句読点だけで構成することなども可能です。

3.2.5.7 class属性

属性を指定する場合は、その要素が属するさまざまなクラスを表すスペース区切りのトークンのセットである値を指定する必要があります。

HTML要素が割り当てたクラスは、class属性の値がスペースで区切られたときに返されるすべてのクラスで構成されています。 （重複は無視されます。）

作成者がclass属性で使用できるトークンに追加の制限はありませんが、作成者は、コンテンツの望ましい表示方法を説明する値ではなく、コンテンツの性質を説明する値を使用することをお勧めします。

47
Michael_B

実際には、これは技術的に有効なHTMLではありませんが、多くのサイトでは数字で始まるid属性を使用しています。

HTML 5ドラフト仕様idとname属性の規則を緩めます。これらはスペースを含めることができない単なる不透明な文字列です。

32
pdc

ハイフン、アンダースコア、ピリオド、コロン、数字、および文字はすべて、CSSおよびJQueryでの使用に有効です。以下は動作するはずですが、ページ全体で一意でなければならず、また[A-Za-z]の文字で始める必要があります。

コロンとピリオドで作業するにはもう少し作業が必要ですが、次の例に示すように実行できます。

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>
29
blacksun1

HTML5

IDは一意でなければならないことに留意してください。同じid値を持つドキュメント内に複数の要素があってはいけません。

HTML 5のIDコンテンツに関する規則は次のとおりです（一意であることは別として）。

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

これはIDに関する W3 の仕様です（MDNから）：

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

より詳しい情報：

23
Sergio

ピリオドを含むIDを参照するには、バックスラッシュを使用する必要があります。ハイフンやアンダースコアについても同じかどうかわからない。例：HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{Word-wrap:break-Word;}
17
Anthony

また、IDが一意であることを忘れないでください。いったん使用されると、ID値は文書内のどこにも現れないかもしれません。

あなたは多くのIDを持っているかもしれませんが、すべてユニークな値を持たなければなりません。

一方、class-elementがあります。 IDと同じように、何度も出現する可能性がありますが、値は何度も使用される可能性があります。

14
Vordreller

HTML 4の仕様から...

IDおよびNAMEトークンは文字（[A-Za-z]）で始める必要があり、その後に任意の数の文字、数字（[0-9]）、ハイフン（ " - "）、下線（ "_"）を続けることができます。 、コロン（ "："）、およびピリオド（ "。"）。

編集：ああ！もう一度ボタンに殴られて！

14
Steve Morgan

要素の一意の識別子。

ドキュメント内に同じid値を持つ要素が複数あってはいけません。

以下の制限付きの任意のストリング。

  1. 1文字以上でなければなりません

  2. 空白文字を含めることはできません。

    • U + 0020 SPACE
    • U + 0009文字数表（タブ）
    • U + 000Aラインフィード（LF）
    • U + 000Cフォームフィード（FF）
    • U + 000Dキャリッジリターン（CR）

ASCII letters and digits, '_', '-' and '.'以外の文字を使用すると、HTML 4では許可されていなかったため、互換性の問題が生じる可能性があります。この制限はHTML 5で解除されましたが、互換性のためにIDは文字で始める必要があります。

11
Bhavin Solanki

コロン（:)とピリオド（。）はHTML仕様では有効ですが、 _ css _ のidセレクターとしては無効であるため、それらをその目的に使用する場合はおそらく避けた方がよいでしょう。

9
lstg

HTML5の場合

値は、要素のホームサブツリー内のすべてのIDの中で一意でなければならず、少なくとも1文字を含まなければなりません。値にスペース文字を含めることはできません。

少なくとも1文字、スペースなし。

これにより、アクセント付き文字の使用などの有効な使用例への扉が開かれます。 CSSとJavaScriptの両方で問題を起こす可能性があるid値を使用することができるようになったため、注意を払う必要がない場合もあります。

8
Kanishka Panamaldeniya

英数字の および " - "および " _ "が有効です。しかし、 id名 を A-Z または a-z の間の任意の文字で始める必要があります。

7
Tazwar Utshas
  1. IDはレイアウトの一部の命名に最も適しているため、IDとクラスに同じ名前を付けないでください。
  2. IDには英数字と特殊文字を使用できます
  3. しかし# : . * !シンボルの使用は避けてください
  4. スペースを入れないでください
  5. 数字またはハイフンとそれに続く数字で始まっていない
  6. 大文字と小文字を区別
  7. iDセレクターを使うほうがクラスセレクターを使うより速い
  8. 長いCSSクラス名やIdルール名にはハイフン " - "（アンダースコア "_"も使用できますが、seoには適していません）を使用します。
  9. ルールにキーセレクタとしてIDセレクタがある場合は、タグ名をルールに追加しないでください。 IDは一意であるため、タグ名を追加すると、一致プロセスが不必要に遅くなります。
  10. HTML 5では、id属性はどのHTML要素でも使用できます。HTML4.01では、id属性を次のものと一緒に使用することはできません。<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
7
Web Designer cum Promoter

スペースは使用できません。少なくともaからz、0から9までの文字で始める必要があります。

5
Wembo Mulumba

値は次のとおりです：[a-z]、[A-Z]、[0-9]、[* _：-]

それはHTML5に使用されています...

任意のタグでidを追加できます。

2
Jyotirmoy Bhattacharyya

HTMLで

IDで始まる必要があります{AZ}または{az}を追加できます数字、ピリオド、ハイフン、アンダースコア、コロン。

例えば：

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

ただし、コロン（:)またはピリオド（。）でIDを作成できますが、これらのIDをセレクターとして使用するのは困難ですCSS主に疑似要素（：before、：after）を使用する場合。

また、JSでは、これらのIDを選択することは困難です。したがって、多くの開発者が好むように、最初の4つのIDを使用する必要があります。必要であれば、最後の2つのIDも使用できます。

1
Dev pokhariya