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

idHTML要素の属性を作成する場合、値にはどのような規則がありますか？

以下のためにHTML 4、答えは技術的には次のとおりです。

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

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

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

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

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

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

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

HTML 4仕様：

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

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

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

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

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

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

これは、CSSで言うと、「IDが「my」で、クラスが「cool」で、「thing」の疑似セレクターを持つ要素」ということです。

大文字、小文字、数字、アンダースコア、ハイフンはAZのままにします。上記のように、IDが一意であることを確認してください。

それはあなたの最初の懸念であるべきです。

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

var name = 'O'Hara';

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

厳密に一致する必要があります

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

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

HTML5：

id属性に対する追加の制限を取り除きます。ここを参照してください。（ドキュメント内で一意であることを除いて）残っている要件は次のとおりです。

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

HTML5以前：

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

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

1. AZまたはazの文字で始まる必要があります
2. -（ハイフン）、_（アンダースコア）、:（コロン）、.（ピリオド）を含めることができます

しかし、1つは避け:て.次のようにすべきです。

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

HTML5：IDおよびクラス属性に許可される値

HTML5の時点で、IDの値に対する唯一の制限は次のとおりです。

1. ドキュメント内で一意である必要があります
2. スペース文字を含めることはできません
3. 少なくとも1つの文字を含む必要があります

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

したがって、値はすべて数字、1桁だけ、句読点文字、特殊文字を含むことができます。空白はありません。これはHTML4とは大きく異なります。

HTML 4では、ID値は文字で始まる必要があり、その後に文字、数字、ハイフン、アンダースコア、コロン、ピリオドのみを続けることができます。

HTML5では、これらは有効です。

<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はHTML5で有効です。

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

ただし、CSSでは無効です。

CSS2.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属性の値がスペースで分割されたときに返されるすべてのクラスで構成されます。（重複は無視されます。）

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

実際にidは、これは技術的に有効なHTMLではないにもかかわらず、多くのサイトは数字で始まる属性を使用します。

HTML 5のドラフト仕様では用のルールを緩めるidとname属性：彼らはスペースを含めることはできません、今ちょうど不透明な文字列です。

ハイフン、アンダースコア、ピリオド、コロン、数字、および文字はすべて、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>

HTML5

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

HTML5の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).

より詳しい情報：

• W3-グローバル属性（id）
• MDN属性（id）

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

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

HTML 4仕様から...

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

編集：d'oh！ボタンに負けた！

また、IDが一意であることを忘れないでください。一度使用すると、ID値はドキュメントのどこにも表示されない場合があります。

多くのIDを持つことができますが、すべて一意の値を持つ必要があります。

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

要素の一意の識別子。

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

次の制限がある任意の文字列：

1. 1文字以上である必要があります

2. スペース文字を含めることはできません：

   • U + 0020スペース
   • U + 0009 CHARACTER TABULATION（タブ）
   • U + 000Aラインフィード（LF）
   • U + 000Cフォームフィード（FF）
   • U + 000Dキャリッジリターン（CR）

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

コロン（:)とピリオド（。）はHTML仕様では有効ですが、CSSの IDセレクターとしては無効であるため、それらをその目的で使用する場合はおそらく避けるのが最善です。

ために HTML5

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

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

これは、アクセント付き文字の使用などの有効な使用例への扉を開きます。また、本当に注意しない限り、CSSとJavaScriptの両方で問題を引き起こすid値を使用できるようになったので、足元を撃つための弾薬がたくさんあります。

1. IDはレイアウトのパーツの命名に最適であるため、IDとクラスに同じ名前を付けないでください
2. IDでは、英数字と特殊文字を使用できます
3. # : . * !シンボルの使用は避けてください
4. スペースは許可されていません
5. 数字またはハイフンの後に数字が続いていない
6. 大文字と小文字を区別
7. IDセレクターの使用は、クラスセレクターの使用よりも高速です。
8. 長いCSSクラスまたはIDルール名にはハイフン「-」を使用します（アンダースコア「_」も使用できますが、seoには適していません）。
9. ルールのキーセレクターとしてIDセレクターがある場合は、ルールにタグ名を追加しないでください。IDは一意であるため、タグ名を追加すると、マッチングプロセスが不必要に遅くなります。
10. HTML5では、id属性は任意のHTML要素で使用できます。HTML4.01では、id属性は次のものでは使用できません。 <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

任意の英数字値と「-」と「_」は有効です。ただし、ID名はAZまたはazの間の任意の文字で始める必要があります。

スペースなし。少なくともaからzおよび0から9の文字で始まる必要があります。

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を作成することはできますが、CSSがこれらのIDをセレクターとして使用することは困難です。主に、疑似要素（：before、：after）を使用する場合。

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

値は次のとおりです。[az]、[AZ]、[0-9]、[* _：-]

HTML5で使用されています...

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

ES2015以降、ドキュメントの文字セットがUTF8に設定されている場合は、IDにほとんどすべてのUnicode文字を使用することもできます。

ここでテストしてください：https：//mothereff.in/js-variables

について読む：https : //mathiasbynens.be/notes/javascript-identifiers-es6

ES2015では、識別子は$、_、またはUnicode派生コアプロパティID_Startを持つ任意の記号で始まる必要があります。

識別子の残りの部分には、$、_、U + 200Cゼロ幅非結合子、U + 200Dゼロ幅結合子、またはUnicode派生コアプロパティID_Continueを持つ任意のシンボルを含めることができます。

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"

div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}

<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">

あなたはそれを使うべきですか？おそらく良い考えではありません！

について読む：https : //stackoverflow.com/a/52799593/2494754

アルファベット->大文字と
小文字-> 0-9
特殊文字-> '：'、 '-'、 '_'、 '。'

形式は「。」で始まる必要があります。またはアルファベットの後に、さらに多くのアルファベットまたは数字の特殊文字が続きます。idフィールドの値は「_」で終わってはなりません。
また、スペースは使用できません。スペースが指定されている場合、それらは異なる値として扱われます。これは、id属性の場合は無効です。