103

The HTML spec says

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

And even though the SGML declaration of HTML 4 uses the value 65536 for NAMELEN, it notes "Avoid fixed limits."

But surely browsers, CSS implementations, and JavaScript toolkits must have some limits on the length they support. What is the smallest such limit that is safe to use in a HTML/CSS/JS application?

system PAUSE
  • 37,082
  • 20
  • 62
  • 59
  • 3
    Thank-you and +1 for pointing out that IDs must start with a letter. I've used IDs such as '1','2','3','4','5' in past without issue. I do alot of survey related widgets and interactive elements and using the IDS like this made for a convenient 'score' attribute as well as ID reference. Today I was trying to get some CSS working that really should have worked. I even ran it past the W3C validator and it didn't alert me to this issue... But this post did. And now when I changed id='5' to 'x5x' the css works... Now I just have to change the scoring subroutine to strip the x's! Thx again. – Ben A. Hilleli Nov 14 '14 at 18:42

4 Answers4

245

Just tested: 1M characters works on every modern browser: Chrome1, FF3, IE7, Konqueror3, Opera9, Safari3.

I suspect even longer IDs could become hard to remember.

phihag
  • 278,196
  • 72
  • 453
  • 469
  • 16
    This guy has done 10 "million" characters! http://stackoverflow.com/a/1496150/74585 – Matthew Lock Apr 27 '12 at 09:00
  • 4
    I'm sorry. 1M? As in 1 Million? – beliha Nov 20 '18 at 07:19
  • @beliha Yes, `M` stands for `Mega`, an [SI prefix](https://en.wikipedia.org/wiki/Metric_prefix). As SI prefixes are extremely common and learned in elementary school, I did not expand it. – phihag Nov 20 '18 at 09:24
  • 19
    @phihag When I studied CS in Toronto, and the instructor quipped that "everyone of course knows why there are 10 days missing in the gregorian calendar in October of 1582", I had to ask a colleague, who looked at me condescendingly and said "Because of the adoption of the Gregorian Calendar, what, you never went to elementary school?" I hadn't. Not in Canada. I went to elementary school in Egypt, and learned about the Islamic Calendar instead. Same thing with the SI prefixes: you may have the benefit of western education, I didn't. But thanks for the condescending attitude nevertheless. – beliha Mar 12 '19 at 07:32
  • 3
    @beliha Pretty sure that at least here in Portugal I have never heard that the gregorian calendar has 10 days missing in October of 1582, and I'm guessing that I'm not the only one. I don't think school has ever taught that from what I can remember so it would be bold for anyone to expect everyone to know it. – user7393973 Feb 17 '20 at 12:05
  • 3
    @beliha I went to western school and didn't even learn that we use the gregorian calendar (not at least by this name), we just used the standart calendar term. and about this 10 missing days, I learned it from youtube. – Tinaira Apr 10 '20 at 07:29
  • @phihag the english word for mega is million. the human mind reads 1M as 1 million, since we are talking about characters, we assume it is the number of characters – Tinaira Apr 10 '20 at 07:32
  • @phihag With your attitude and way of reasoning since `atto` with the symbol of `a` is an SI prefix (added in 1964) for 10^-18, everyone with an elementary education should be able to read 1a as 10^-18! – Mehdi Abbassi Jan 03 '23 at 12:55
13

A practical limit, for me, is however long an ID I can store in my head during the time I'm working with the HTML/CSS.

This limit is usually between 8 and 13 characters, depending on how long I've been working and if the names make sense in the context of the element.

Nick Presta
  • 28,134
  • 6
  • 57
  • 76
  • 5
    I would add that it may be possible to extend one's "internal buffer" using prefixes, if necessary. :-) – Ben Blank Feb 25 '09 at 00:30
  • 14
    This question is still very important, because with RIAs, often times IDs are generated by code, and in order to be unique, can be long; as an example: window_2_panel_12_group_6_label_2_... – Josh Oct 30 '09 at 13:12
  • 2
    It's nice to give this piece of wisdom, but ironically Google picks this up as an "official" answer for some reason and prominently displays "8 to 13 characters" as the limit. – MattTreichel Mar 15 '22 at 20:09
6

Sometimes I will end up with very long IDs, but I name them consistently to match their exact purpose.

For example...

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

As you can see, the selectors are occasionally pretty long. But it's so much easier IMHO than working with something like the YUI grids.css where you end up with IDs like #doc, #bd, #yui-main, etc.

Mark Hurd
  • 13,010
  • 2
  • 27
  • 28
  • 3
    What I do a lot is name them heirachically, so have a div id='user', then within that I may have three divs, id='user-stats', id='user-inventory', id='user-spells', then say within user-stats I might have 5 divs, id='user-stats-strength', id='user-stats-agility', id='user-stats-defence', id='user-stats-intellect', id='user-stats-heath' etc etc, which I find to be very useful to remember their ids, aslong as I maintain naming conventions, ie, -'s or _'s for spaces or camelCase. – Psytronic Feb 12 '10 at 09:44
2

If this is an academic question, it's pretty interesting... but as far as best practices are concerned, you shouldn't need to -- or want to -- stretch these out. If you need to store data about an HTML element, it's better to put it into an attribute on the DOM object.

Matt Howell
  • 15,750
  • 7
  • 49
  • 56