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

2068
Mr Shark 2008-09-16 23:08.

idHTML要素の属性を作成するとき、値にはどのようなルールがありますか?

22 answers

1738
dgvid 2008-09-17 15:42.

以下のために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>は有効です。CSS#first\.nameやjQueryでその要素を次のように選択できます。$('#first\\.name').ただし、バックスラッシュを忘れた場合$('#first.name')は、IDfirstを持つ要素を探し、クラスも持つ完全に有効なセレクターがありますname。これは見落としがちなバグです。長期的にはfirst-name、代わりにID (ピリオドではなくハイフン)を選択した方が幸せかもしれません。

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


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

225
Peter Hilton 2008-09-16 23:09.

HTML 4仕様:

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

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

159
Michael Thompson 2008-09-17 04:01.

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

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

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

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

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

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

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

68
Álvaro González 2009-01-11 10:40.

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

var name = 'O'Hara';

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

67
Mr Shark 2008-09-16 23:11.

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

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

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

63
Zaheer Ahmed 2013-01-18 21:09.

HTML5:

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

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

PRE-HTML5:

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

[A-Za-z][-A-Za-z0-9_:.]*
  1. AZまたはaz文字で開始する必要があります
  2. -(ハイフン)、_(アンダースコア)、:(コロン)、.(ピリオド)を含めることができます

しかし、避けるべきで:あり、.次の理由があります。

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

60
Michael Benjamin 2015-08-03 05:53.

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]とISO10646文字U + 00A0以上、およびハイフン(-)とアンダースコア( _); 数字、2つのハイフン、またはハイフンの後に数字を続けることはできません

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


W3Cリファレンス

HTML5

3.2.5.1id属性

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

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

注:IDが取ることができる形式に他の制限はありません。特に、IDは数字だけで構成され、数字で始まり、アンダースコアで始まり、句読点だけで構成されます。

3.2.5.7class属性

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

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

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

33
pdc 2008-09-17 00:04.

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

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

31
blacksun1 2010-07-08 00:09.

ハイフン、アンダースコア、ピリオド、コロン、数字、文字はすべて、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
Sergio 2013-08-27 11:54.

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(frånMDN)に関するW3仕様です。

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
Anthony 2013-11-14 10:14.

ピリオドが含まれるIDを参照するには、円記号を使用する必要があります。ハイフンとアンダースコアのどちらでも同じかどうかはわかりません。例:HTML

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}
16
Steve Morgan 2008-09-16 23:12.

HTML4仕様から...

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

編集:d'oh!もう一度、ボタンに殴られました!

16
Vordreller 2008-09-17 02:31.

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

多くのIDを持っているかもしれませんが、すべてが一意の値を持っている必要があります。

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

12
Bhavin Solanki 2016-07-16 03:02.

要素の一意の識別子。

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

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

  1. 少なくとも1文字の長さである必要があります
  2. スペース文字を含めることはできません。

    • U +0020スペース
    • U + 0009文字表(タブ)
    • U + 000Aラインフィード(LF)
    • U + 000Cフォームフィード(FF)
    • U + 000Dキャリッジリターン(CR)

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

11
lstg 2009-04-23 00:18.

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

10
Kanishka Panamaldeniya 2013-08-22 00:57.

ために HTML5

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

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

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

9
Web Designer cum Promoter 2013-05-02 20:28.
  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>.
9
Tazwar Utshas 2016-11-13 03:52.

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

6
Wembo Mulumba 2017-05-09 18:22.

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

5
Jyotirmoy Bhattacharyya 2019-07-07 22:21.

値は次のようになります:[az]、[AZ]、[0-9]、[* _:-]

HTML5に使用されます...

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

4
Dev pokhariya 2019-06-15 01:23.

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
NVRM 2019-09-08 11:36.

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

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

DropMixはNFC対応のカードゲームで、基本的にはリミックスアーティストになります。現在、Amazonでは$ 30まで下がっており、これまでで最高の価格に匹敵します。ロックバンドで有名なHarmonixによって開発されたDropMixは、おそらく少し野心的すぎるように思われます。結局のところ、ほとんどの人は素晴らしいリズムを持っていませんが、ゲームは驚くほどうまく実行されます。

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

写真:APメアリーJ.ブライジは、間もなくハリウッドウォークオブフェイムのスターを獲得します。これは、メアリーJよりもハリウッドウォークオブフェイムのほうが正直なところ恩恵です。

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

画像:グラズ工科大学/ NataschaEiblがデザインしたロゴ。MeltdownとSpectreは、攻撃者がシステムメモリに保存されているあらゆる種類の情報にアクセスできるようにする2つの脆弱性に付けられた名前です。

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

日本人に襲われたときに真珠湾にいた97歳の第二次世界大戦のベテランが、ニューヨークのブルックリンから追い出されています。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language