Categories
html

What are valid values for the id attribute in HTML?

2200

When creating the id attributes for HTML elements, what rules are there for the value?

7

  • 112

    This differs between HTML5 and previous versions of the spec. I explained it here: mathiasbynens.be/notes/html5-id-class

    Oct 24, 2011 at 8:41

  • 5

    I noticed SharePoint 2010 assigning a value like this – {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2}-{E60CE5E2-6E64-4350-A884-654B72DA5A53} for a dynamically generated table within a Web Part & a page containing an ID value of that sort did not break in any of the popular browsers. Dealing with such ID values through JavaScript is tricky though – mvark.blogspot.in/2012/07/…

    – mvark

    Jul 20, 2012 at 18:34

  • 4

    HTML4 and HTML5 requirements for ID values are very different. Here’s a quick and complete rundown of HTML5 ID rules: stackoverflow.com/a/31773673/3597276

    Aug 3, 2015 at 0:32

  • 6

    Please note: Doing as some of the answers have said and using a period (**.**) with jQuery will run you into quite a bit of trouble, for example, using <input id="me.name" /> and then $("#me.name").val() will cause jQuery to look for a <me> tag with the class .name, which no one wants really!

    Aug 26, 2015 at 15:20


  • 3

    @SamSwift웃 Nope, you just have to escape special characters as docs say. Please check this online demo.

    Nov 10, 2016 at 9:58

1832

For HTML 4, the answer is technically:

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 (“.”).

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

The id attribute is case sensitive in XHTML.

As a purely practical matter, you may want to avoid certain characters. Periods, colons and ‘#’ have special meaning in CSS selectors, so you will have to escape those characters using a backslash in CSS or a double backslash in a selector string passed to jQuery. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.

For example, the HTML declaration <div id="first.name"></div> is valid. You can select that element in CSS as #first\.name and in jQuery like so: $('#first\\.name'). But if you forget the backslash, $('#first.name'), you will have a perfectly valid selector looking for an element with id first and also having class name. This is a bug that is easy to overlook. You might be happier in the long run choosing the id first-name (a hyphen rather than a period), instead.

You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder “was it firstName or FirstName?” because you will always know that you should type first_name. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don’t mix them.


A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed id="firstName" in your HTML (lower-case ‘f’) and #FirstName { color: red } in your CSS (upper-case ‘F’), that buggy browser would have failed to set the element’s color to red. At the time of this edit, April 2015, I hope you aren’t being asked to support Netscape 6. Consider this a historical footnote.

4

  • 83

    Note that class and id attributes are case-sensitive in XHTML, all other attributes are not. Eric Meyer mentioned this in a CSS workshop I attended.

    Apr 22, 2009 at 10:35

  • 35

    Also note that if you try to write a CSS rule to target an element by ID, and the ID beings with a number, it won’t work. Bummer!

    Jan 20, 2010 at 0:53

  • 56

    As for ‘.’ or ‘:’ in an ID using jQuery, see the jQuery FAQ. It contains a small function that does the necessary escaping.

    – Wolfram

    May 6, 2010 at 10:18


  • The jquery FAQ answer that @Wolfram references is how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.

    – owengall

    Dec 29, 2021 at 0:28


234

From the HTML 4 specification:

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 (“.”).

A common mistake is to use an ID that starts with a digit.

1

170

+50

You can technically use colons and periods in id/name attributes, but I would strongly suggest avoiding both.

In CSS (and several JavaScript libraries like jQuery), both the period and the colon have special meaning and you will run into problems if you’re not careful. Periods are class selectors and colons are pseudo-selectors (eg., “:hover” for an element when the mouse is over it).

If you give an element the id “my.cool:thing”, your CSS selector will look like this:

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

Which is really saying, “the element with an id of ‘my’, a class of ‘cool’ and the ‘thing’ pseudo-selector” in CSS-speak.

Stick to A-Z of any case, numbers, underscores and hyphens. And as said above, make sure your ids are unique.

That should be your first concern.

2