1777

作成時idHTML要素の属性、その値にはどんな規則がありますか?


  • これはHTML 5と以前のバージョンの仕様とでは異なります。私はここでそれを説明しました:mathiasbynens.be/notes/html5-id-class - Mathias Bynens
  • SharePoint 2010がWebパーツ内で動的に生成されたテーブルに対して{8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53}というような値を割り当てていることに気付きました。その種類のID値を含むページは、どの人気ブラウザでも壊れませんでした。 JavaScriptを介してそのようなID値を扱うことはトリッキーですが - mvark.blogspot.in/2012/07/… - mvark
  • HTML4およびHTML5の要件ID値は非常に異なります。これはHTML5の簡単で完全な概要です。ID規則:stackoverflow.com/a/31773673/3597276 - Michael_B
  • 注意してください:答えのいくつかが言ったようにしてピリオドを使用して(**.**)jQueryを使用すると、たとえば次のように使用すると、かなりの問題が発生します。<input id="me.name" />その後$("#me.name").val()jQueryに<me>クラスのタグ.name、誰も本当に望んでいません! - Sam Swift 웃
  • @SamSwift웃いいえ、特殊文字をエスケープするだけでいいのです。docsは言う。これをチェックしてくださいオンラインデモ。 - Álvaro González

22 답변


1535

にとってHTML 4、答えは技術的には:

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

HTML 5IDは少なくとも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属性値。それはあなたがタイプしたならid="firstName"あなたのHTML(小文字の 'f')で#FirstName { color: red }あなたのCSS(大文字の 'F')では、そのバグのあるブラウザは要素の色を赤に設定することに失敗するでしょう。 2015年4月の編集時点では、Netscape 6をサポートするよう求められていないことを願っています。これを歴史的な脚注と考えてください。


  • classおよびid属性ありますXHTMLでは大文字と小文字が区別されますが、他のすべての属性は区別されません。 Eric Meyerは私が参加したCSSワークショップでこれについて述べました。 - John Topley
  • また、IDで要素をターゲットとするCSSルールを作成しようとしても、IDに数字が付いている場合はうまくいきません。残念! - Zack The Human
  • 'についてまたは':' jQueryを使用してIDを取得するには、jQueryを参照してください。よくある質問。それは必要なエスケープをする小さな機能を含みます。 - Wolfram
  • id属性は[w3.org/TR/html4/struct/global.html#adef-id](caseHTML 4では機密であり、文字で始める必要があります(AからZまで)。また、CSSはクラスを持つ要素を参照しているため、この例では要素のテキストの色を赤にしないでください。FirstNameあなたにではないid。 - Augustus Kling
  • アウグストゥスが指摘した誤りはまだ存在しています。あなたの例では、id="firstName"HTML 4またはHTML 5で#FirstName { color: red }CSSでは、バグのあるブラウザのみ要素の色を赤に設定します。 - Stephen Booher

201

からHTML 4の仕様

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

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


  • HTML 5はHTML 4よりもはるかに多くのものを許可していることに注意してください。例えば456bereastreet.com/archive/201011/…そしてw3.org/TR/html5/elements.html#the-id-attribute - Mr Shark
  • IE6はアンダースコアで始まるIDをサポートしていませんでしたが、とにかく死んでいます。 - doc_id
  • IE6に関して@rahmanisbackは、そう思うかもしれません、しかし私は銀行のために今提案を完成しています、そして彼らはベンダーが開発するどんなアプリケーションでもIE6で動くと主張します。これは30,000ユーザー用です。一体、これらすべてのデスクトップで自分のブラウザをアップデートさせることができれば、失業率が向上する可能性があります。 - Karl
  • @カール私はこれを聞いてすみません。 IE6のセキュリティ問題について警告するためにあなたのすべての努力をしてください。しかし、IE7はまもなく新しいIE6になるでしょう。そのため、MSの過去の過ちを修正することは、この業界の運命のようです。 - doc_id
  • @MrShark 2番目のリンクが壊れています。新しいリンク - SWdV

137

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

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

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

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

これは、CSSで言うと、「idが「my」、クラスが「cool」、および「thing」疑似セレクターの要素」ということです。

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

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


  • コロンとピリオドを使用できますが、二重のバックスラッシュを使用してエスケープする必要があります。例:$(' #my \\。cool \\:thing')または変数のエスケープ:$( '#' + id.replace(/ \ ./、 '\\。')。置換(/ \:/、 '\\:'))groups.google.com/group/jquery-en/browse_thread/thread/… - joeformd
  • なぜ数字ではありません。なぜA-Zだけなのか数字で始まらない限り、数字は、数字でキー入力されているデータに関連する要素を参照する場合に非常に便利なIDです。 - cori
  • ちなみに、ダッシュあります技術的にハイフンマイナス記号はASCII文字セットでは使用できません。en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes - Tony
  • これらのキャラクターが.:)IDで、それらを削除することはできません(せき... Sharepoint)、あなたはCSSでIDセレクタの代わりに属性セレクタを使用してこれを回避することができます。[id='my.cool:thing']しかしながら、このセレクターはidセレクターよりも低い特異性を持ち、それは他の問題を引き起こすかもしれません。 - Faust
  • 古い、私は知っているが、数字とハイフンの裏書きを含めるように更新した - Michael Thompson

61

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

var name = 'O'Hara';

jQuery APIのセレクター(下の注を参照)


53

厳密に一致するはずです

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

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


  • 代わりに[A-Za-z] [ - A-Za-z0-9 _ :.] *としてください。最初の文字の後のすべてはオプションです(「任意の数字」にゼロが含まれる場合があります)。 「する必要はない」という意味です。 - foo

43

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"混乱を避け、使用しないようにしてください。そして完全に。


39

HTML5:IDの許容値クラス属性

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

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

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

そのため、値はすべて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.1id属性

idattributeはその要素の一意の識別子(ID)を指定します。

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

注:IDがとることができる形式に他の制限はありません。に   特に、IDは数字だけで構成することも、数字で始めること、開始することもできます。   下線付き、句読点だけで構成される、など

3.2.5.7class属性

属性が指定されている場合、その属性は以下の値の集合でなければなりません。   さまざまなクラスを表すスペース区切りのトークン   要素はに属します。

HTML要素がそれに割り当てたクラスはすべてから成ります   class属性の値が分割されたときに返されるクラス   スペース(重複は無視されます。)

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


29

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

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


26

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


19

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.

これはW3IDに関するスペック(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


17

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

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

CSS

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


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

14

HTML 4の仕様から...

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

編集:ああ!もう一度ボタンに殴られて!


14

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

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

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


10

要素の一意の識別子。

ドキュメント内に同じ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は文字で始める必要があります。


9

コロン(:)とピリオド(。)はHTML仕様では有効ですが、これらはidセレクタとしては無効です。CSSあなたがその目的のためにそれらを使用するつもりならば、おそらくおそらく最も避けられるべきです。



8

にとってHTML5

値は、要素の家のすべてのIDの中で一意でなければなりません   サブツリーで、少なくとも1文字を含む必要があります。値はいけません   スペース文字を含める。

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

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


7

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


  • "アンダースコアも使用できますが、seoには向いていません":検索エンジンはいつCSSクラスやID名に興味を持ったのでしょうか。 - Nick Rice

7

どれか英数字と」 - 「と」_「有効です。しかし、あなたはID名を始める間に任意の文字を含む-ZまたはそしてZ


5

スペースを入れないでください。少なくともaからz、0から9までの文字で始める必要があります。


-1

私はこれがこの質問に答えるのに非常に遅れていることを知っています、しかし私は同じ問題を抱えていたので私はこの答えをもっと完全に見つけるので、私は答えることにします。

a、b、c ... x、y、z、A、B、C ... X、Y、Z、0、1、2 ... 7、8、9、 - 、_のすべてに使用できます。ただし、最初の文字として数字と - を使用しないでください。

これらは間違っています:

1adfsvsdf   // use number in first
-adfasdf    // use - in first
afd'ksdf    // use ' in characters
asdf;asdf   // use ; in characters


-2

アルファベット - >大文字& A小さい

数字 - > 0-9

特殊文字 - > ':'、 ' - '、 '_'、 '。



フォーマットは '。'から始まる必要があります。またはアルファベットの後に、より多くのアルファベットまたは数字のいずれかの特殊文字を続けたものです。 idフィールドの値は '_'で終わってはいけません。

また、スペースは、指定されている場合は許可されず、異なる値として扱われます。id属性の場合は無効です。


-4

HTML 5では、idは数字で始めることはできません。 id-"1kid"スペースは使えません(id ="Some kind"


  • これは間違っています。こちらをご覧ください:" IDがとることができる形式に他の制限はありません。特に、IDは数字だけで構成することも、数字で始めること、アンダースコアで始めること、句読点だけで構成することなどができます。 - Andrew Barber

リンクされた質問


関連する質問

最近の質問