What is a practical maximum length for HTML id?

Ideal ID length

<h3>Striking the length balance</h3>

Aim to craft IDs that fall between 8-20 characters. This length usually delivers the perfect balance between uniqueness and usability. For instance:

<div id="nav"></div> <!-- I'm your friendly navigation bar. How can I assist? -->


is a more practical choice than:

<div id="main-navigation-container"></div> <!-- The grand poobah of navigation estates -->


<h3>Creating meaningful monikers</h3>

When your ID extends beyond the ideal length, ensure it imbues context or facilitates code readability. If it does neither, it's needless verbosity. If the expectant naming conventions of your project demand longer IDs, they still need to be meaningful to contribute to the maintainability:

<div id="header-user-notifications-icon"></div> <!-- Got mail? This icon will tell you! -->


<h3>Coding to cognitive comfort</h3>

Harmony is heaven! Consistent ID naming conventions help developers and software process IDs much more efficiently. Consider mixing hyphens, underscores, and lowercase letters to create easier-to-read IDs.

Balancing ID length with practicality

<h3>Mirroring structure</h3>

IDs might stretch when indicating a specific part within a complex hierarchy, such as:

<div id="section2-subsection3-article1-title"></div> <!-- Now, this is some Inception-level structuring! -->


This ID signifies the element's precise location within the hierarchy.

<h3>Scripting for interactivity</h3>

IDs targeted by JavaScript should be memorable and descriptive to make the coding experience more pleasant and debugging less of a nightmare:

<button id="play-video-button"></button> <!-- The only button you need for your daily cat video fix! -->


It is easily understood and thus easier to debug.

<h3>Navigating with frameworks</h3>

External CSS frameworks may dictate ID length based on their own conventions to guarantee uniformity and predictability within their ecosystem. For instance:

<div id="modal-login-form-container"></div> <!-- knock, knock! You got logged in. -->


This ID helps you navigate within the framework's documentation.

Going beyond length: More considerations

<h3>The character buffet</h3>

IDs can include a smorgasbord of characters: alphabets, digits, hyphens, underscores, colons, periods. So, you can get creative or go classic - your call.

<h3>Earning extra with `data-*` attributes</h3>

When required, employ data-* attributes to transport additional details and keep IDs terse. Example:

<div id="user" data-user-id="12345" data-role="admin"></div> <!-- VIP customer, handle with care! -->


<h3>Targeting tools and browsers</h3>

Keep the practical limitations of your target browsers and tools in sight. Remember: your ID isn't just for you. It's for everyone.