HTML IDの実際的な最大長はいくつですか?


88

HTMLの仕様は言います

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

また、HTML 4のSGML宣言ではNAMELENに値65536を使用していますが、「固定制限を回避する」と記載されています。

ただし、ブラウザ、CSS実装、JavaScriptツールキットは、サポートする長さにいくつかの制限があるはずです。HTML / CSS / JSアプリケーションで安全に使用できる最小の制限は何ですか?


3
IDは文字で始める必要があることを指摘していただきありがとうございます。過去に「1」、「2」、「3」、「4」、「5」などのIDを問題なく使用しました。私は調査に関連するウィジェットやインタラクティブな要素をたくさん使っており、このようなIDSを使用して、便利な「スコア」属性とID参照を作成しました。今日私は本当にうまくいくはずのCSSを動かそうとしていました。私はそれをW3Cバリデーターを超えて実行しましたが、この問題について私に警告しませんでした...しかし、この投稿はそうしました。そして、id = '5'を 'x5x'に変更すると、CSSは機能します...今度は、xを取り除くためにスコアリングサブルーチンを変更する必要があります!もう一度。
Ben A. Hilleli 2014年

回答:


216

テスト済み:100万文字がすべての最新のブラウザで動作します:Chrome1、FF3、IE7、Konqueror3、Opera9、Safari3。

IDを長くすると覚えにくくなるのではないかと思います。


15
この男は10ミリオンのキャラクターを作りました!stackoverflow.com/a/1496150/74585
マシューロック

1
申し訳ありません。100万?100万のように?
beliha

8
@phihagトロントでCSを勉強していて、インストラクターが「もちろん、1582年10月にグレゴリオ暦で10日欠けている理由は誰もが知っている」と言ったとき、同僚に尋ねたのです。グレゴリオ暦の採用により、小学校に通ったことはありませんか?」私はしていませんでした。カナダではありません。エジプトの小学校に行き、代わりにイスラム暦について学びました。SI接頭辞についても同じことが言えます。西洋教育のメリットがあるかもしれませんが、そうではありません。しかし、それにもかかわらず、下品な態度に感謝します。
beliha

2
@beliha少なくともここポルトガルでは、グレゴリオ暦が1582年10月に10日間欠落していると聞いたことはありません。私だけではないと思います。私が学校で覚えたことから、誰もがそれを知ることを期待するのは大胆だと、学校が教えたことはないと思います。
user7393973

1
@beliha私は西洋の学校に行って、グレゴリオ暦を使用していることを(少なくともこの名前ではなく)知っていませんでした。標準のカレンダー用語を使用しただけです。そして、この10日間の行方不明について、私はyoutubeからそれを学びました。
ティナイラ

15

しかし、私にとって実際的な制限は、HTML / CSSで作業している間、頭に保存できるIDが長いことです。

この制限は通常、8〜13文字です。これは、私が作業していた期間と、要素のコンテキストで名前が意味があるかどうかによって異なります。


5
必要に応じて、プレフィックスを使用して自分の「内部バッファ」を拡張できる可能性があることも付け加えておきます。:-)
ベンブランク

12
RIAではIDがコードによって生成されることが多く、一意になるために長くなる可能性があるため、この質問は依然として非常に重要です。例:window_2_panel_12_group_6_label_2 _...
Josh

3

非常に長いIDになることもありますが、正確な目的に合わせて一貫した名前を付けています。

例えば...

<div id="page">
    <div id="primary-content"></div>
    <div id="secondary-content"></div>
    <div id="search-form-and-primary-nav-wrapper">
        <form id="search-form"></form>
        <ul id="primary-nav">
            <li id="primary-nav-about-us"></li>
        </ul>
    </div>
    <a id="logo"><img /></a>
</div><!-- /#page -->

ご覧のとおり、セレクターがかなり長い場合があります。しかし、#doc、#bd、#yui-mainなどのIDで終わるYUI grids.cssのようなものを操作するよりも、IMHOの方がはるかに簡単です。


3
私がよくやっていることは、それらを相続的に命名することなので、div id = 'user'があり、その中に、id = 'user-stats'、id = 'user-inventory'、id = 'user-の3つのdivがあるかもしれません。 「spells」、user-stats内で「div = 5」のように言う、id = 'user-stats-strength'、id = 'user-stats-agility'、id = 'user-stats-defence'、id = 'user- stats-intellect '、id =' user-stats-heath 'など。名前付け規則、つまりスペースまたはキャメルケースの-または_を維持している限り、IDを覚えておくと非常に便利です。
Psytronic 2010

2

これが学術的な質問である場合、それはかなり興味深いです...しかし、ベストプラクティスに関する限り、これらを拡張する必要はありません。HTML要素に関するデータを格納する必要がある場合は、それをDOMオブジェクトの属性に配置することをお勧めします。

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