current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 48 down vote favorite
2

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?

share|improve this question
    
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
up vote 117 down vote accepted

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.

share|improve this answer
73  
"I suspect even longer IDs could become hard to remember." -- LOL! – Josh Oct 30 '09 at 13:10
6  
This guy has done 10 "million" characters! stackoverflow.com/a/1496150/74585 – Matthew Lock Apr 27 '12 at 9:00
    
LOL, and wow that seems to be a wee bit overkill. – rectangletangle Apr 22 '14 at 2:54
up vote 10 down vote

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.

share|improve this answer
1  
I would add that it may be possible to extend one's "internal buffer" using prefixes, if necessary. :-) – Ben Blank Feb 25 '09 at 0:30
    
It is certainly possible. :) – Nick Presta Feb 25 '09 at 0:33
5  
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  
Btw @Josh that's exactly the scenario that got me to wondering... – system PAUSE May 6 '11 at 16:47
up vote 1 down vote

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.

share|improve this answer
2  
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 9:44
up vote 0 down vote

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.

share|improve this answer

protected by bummi 2 days ago

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.