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


2015

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


96
これは、仕様のHTML5と以前のバージョンの間で異なります。私はそれをここで説明しました:mathiasbynens.be/notes/html5-id-class
Mathias Bynens

5
SharePoint 2010がこのような値を割り当てていることに気付きました-Webパーツ内の動的に生成されたテーブルとID値を含むページに{8CC7EF38-31D8-4786-8C20-7E6D56E49AE2}-{E60CE5E2-6E64-4350-A884-654B72DA5A53}そのような種類は、人気のあるブラウザのいずれでも壊れませんでした。JavaScriptを介してこのようなID値を処理するのは難しいですが、mvark.blogspot.in
2012/07

3
ID値に対するHTML4とHTML5の要件は大きく異なります。HTML5 IDルールの概要を以下に示します。stackoverflow.com/ a / 31773673/3597276
Michael Benjamin

5
注:一部の回答で述べたようにしてピリオドを使用すると(**.**)jQuery を使用するとかなりの問題が発生します。たとえば、jQueryを使用する<input id="me.name" />と、$("#me.name").val()jQuery <me>がクラスのタグを検索しますが、.name誰も望んでいません。本当に!
2015

3
@SamSwift웃いいえ、ドキュメントが言うように、特殊文字をエスケープする必要があります。このオンラインデモを確認してください。
アルバロ・ゴンサレス

回答:


1702

以下のために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 (ピリオドではなくハイフン)を選択する方が幸せかもしれません。

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


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


78
XHTMLではclass属性とid属性大文字と小文字を区別しますが、他のすべての属性は区別しません。Eric Meyerは、私が参加したCSSワークショップでこれについて述べました。
John Topley、

31
また、IDで要素をターゲットに設定するCSSルールを作成しようとしても、IDが数字を含んでいる場合は機能しません。残念!
ザックザヒューマン

55
はどうかと言うと '。' またはjQueryを使用してIDに「:」を付けます。jQueryFAQを参照してください。必要なエスケープを行う小さな関数が含まれています。
Wolfram

7
id属性は、[さw3.org/TR/html4/struct/global.html#adef-id](case HTML4に敏感)とZにAに限定文字()で開始しなければなりません。また、CSSはのクラスでFirstNameはない要素を参照するため、例では要素のテキストの色を赤にしないでくださいid
Augustus Kling 2011

5
アウグストゥスが指摘したエラーはまだ存在しています。あなたの例でid="firstName"は、HTML 4またはHTML 5のいずれかと#FirstName { color: red }CSSを使用している場合、バグのあるブラウザのみが要素の色を赤に設定します。
Stephen Booher 2012年

221

HTML 4仕様

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

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


20
HTML5ではHTML4よりもはるかに多くのことができることに注意してください。たとえば、456bereastreet.com / archive
Mr Shark

IE6はアンダースコアで始まるIDをサポートしていませんでしたが、いずれにせよ死んでいます。
doc_id 2012

2
IE6に関する@rahmanisbackは、そうだと思っていたかもしれませんが、私は現在銀行のための提案を完成させており、ベンダーが開発するすべてのアプリケーションがIE6で実行されると主張しています。これは30,000ユーザー向けです。それらのすべてのデスクトップでブラウザーを更新するように彼らに依頼することができれば、それは失業率を助けるだけかもしれません。
Karl、

2
@カールこれを聞いてごめんなさい IE6のセキュリティ問題について警告するために、あらゆる努力をしてください。ただし、IE7は間もなく新しいIE6になるため、MSの過去の間違いを修正することは、この業界での運命のようです。
doc_id 2012

@MrShark 2番目のリンクは壊れています。新しいリンク
SWdV 2015年

155

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

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

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

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

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

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

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


21
コロンとピリオドを使用できますが、二重のバックスラッシュを使用してエスケープする必要があります。例:$( '#my \\。cool \\:thing')または変数をエスケープします:$( '#' + id.replace 。( '\\' / \ ./、)を交換(/ \:/、 '\\')) groups.google.com/group/jquery-en/browse_thread/thread/...
joeformd

2
なぜ数字ではないのですか。なぜAZなのか 数字は、数字で始まっていない限り、数字をキーとするデータに関連する要素を参照するときに非常に役立つIDです。
cori

4
参考までに、ダッシュ技術的にハイフンです。マイナス記号はASCII文字セットではありません。en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
アントンストロゴノフ

4
これらの文字(.:)がIDにあり、それらを削除できない場合(咳... Sharepoint)、CSSでこれを回避するには、IDセレクターの代わりに属性セレクターを使用します。たとえば[id='my.cool:thing']、このセレクターは、 idセレクター。他の問題を引き起こす可能性があります。
ファウスト

2
古い、私は知っているが、数字とハイフンのバックペダルを含むように更新
Michael Thompson


66

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

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

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


2
または、「jqueryを避けた方がいいかもしれません」。;)
domsson

59

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」。混乱を避け、の使用を避けてください。と:完全に。


57

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

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


34

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

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


32

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

25

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

18

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

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

CSS

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

3
ハイフンとアンダースコアは通常、エスケープする必要はありません。ただし、これの例外は、ハイフンが識別子の先頭に表示され、その後に別のハイフン(例:)\--abcまたは数字(例:)が続く場合\-123です。
MrWhite 2013年

16

HTML 4仕様から...

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

編集:d'oh!ボタンに負けた!


16

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

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

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


12

要素の一意の識別子。

同じ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は互換性のために文字で始める必要があります。


11

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


@MathiasBynensリンクが壊れています。これがmothereff.in/css-escapes#0foo%23bar.baz%3Aquxです
Oriol

正しくエスケープすれば無効にはなりません。mothereff.in/css-escapes#0foo%23bar.baz%3Aquxを
Mathias Bynens 2014年

10

ために HTML5

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

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

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


9
  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>.

「アンダースコアも使用できますが、seoには適していません」:検索エンジンがCSSクラスまたはID名に関心を示したのはいつからですか。
Nick Rice



4

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つも使用できます。



2

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


-4

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.