What are valid values for the id attribute in HTML?

Question

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

This differs between HTML5 and previous versions of the spec. I explained it here: mathiasbynens.be/notes/html5-id-class — Mathias Bynens, Oct 24 '11 at 8:41
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 '12 at 18:34
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 — Michael_B, Aug 3 '15 at 0:32
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! — Sam Swift 웃, Aug 26 '15 at 15:20

dgvid · Accepted Answer · 2015-04-02 16:06:09Z

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 [citation needed].

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.

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. — John Topley, Apr 22 '09 at 10: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! — Zack The Human, Jan 20 '10 at 0:53
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 '10 at 10:18
Note that HTML5 allows much more then HTML4, see for example 456bereastreet.com/archive/201011/… and w3.org/TR/html5/elements.html#the-id-attribute — Mr Shark, Nov 30 '10 at 8:36
The id attribute is [w3.org/TR/html4/struct/global.html#adef-id](case sensitive in HTML4) and has to begin with a letter (limited to A to Z). Also note that your example should not make your element's text color red since your CSS refers to an element with class FirstName not to your id. — Augustus Kling, Sep 30 '11 at 7:55

Peter Hilton · Answer 2 · 2008-09-16 09:09:57Z

up vote 143 down vote

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.

answered Sep 16 '08 at 9:09

Peter Hilton

12.2k43671

13

Note that HTML5 allows much more then HTML4 see for example 456bereastreet.com/archive/201011/… and w3.org/TR/html5/elements.html#the-id-attribute – Mr Shark Nov 30 '10 at 8:33

IE6 didn't support ID starting with underscores, but it's dead anyway. – rahmanisback Mar 3 '12 at 12:00

1

@rahmanisback regarding IE6, one would have thought so, but I'm finishing up a proposal right now for a bank and they insist that any application a vendor develops runs in IE6. This is for 30,000 users. Heck, if we could just get them to update their browsers on all those desktops, it might just help the unemployment rate. – Karl Sep 13 '12 at 13:50

1

@Karl I'm sorry to hear this. Do all of your efforts to warn about IE6 security issues. However IE7 will soon be the new IE6, so yeah it appears to be our fate in this industry to remedy MS past mistakes. – rahmanisback Sep 14 '12 at 6:25

@MrShark The second link is broken; New link – SWdV Jun 14 '15 at 14:34

add a comment |

Michael Thompson · Answer 3 · 2013-12-30 15:03:14Z

up vote 76 down vote

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

edited Dec 30 '13 at 15:03

answered Sep 16 '08 at 14:01

Michael Thompson

1,6181214

11

You can use colons and periods - but you'll need to escape them using double backslashes, eg: $('#my\\.cool\\:thing') or escaping a variable: $('#'+id.replace(/\./,’\\.’).replace(/\:/,’\\:’)) groups.google.com/group/jquery-en/browse_thread/thread/… – joeformd Dec 3 '09 at 10:41

Why not numerals; why just A-Z? Numbers are very useful IDs when referring to elements that are related to data that's keyed with a number, as long as you don't start with the number. – cori May 2 '11 at 16:35

3

Just FYI, dashes are technically hyphens. Minus sign isn't in ASCII character set. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes – Anton Strogonoff Jul 8 '11 at 18:31

@jowformd: interesting idea using replace in the selector, instead of using the function twice, why not just improve the regex id.replace(/([\.:])/g,"\\$1") – vol7ron Oct 18 '11 at 16:57

1

If you have these characters (., :) in ids, and cannot remove them (cough ... Sharepoint), you can get around this in CSS with attribute selectors instead of id selectors, e.g. [id='my.cool:thing'], however this selector will have a lower specificity than an id selector, which might cause other problems. – Faust Jun 7 '13 at 7:36

| show 1 more comment

Álvaro González · Answer 4 · 2009-01-10 20:40:31Z

jQuery does handle any valid ID name. You just need to escape metacharacters (i.e., dots, semicolons, square brackets...). It's like saying that JavaScript has a problem with quotes only because you can't write

var name = 'O'Hara';

Selectors in jQuery API (see bottom note)

nasmorn · Answer 5 · 2011-12-09 10:19:35Z

up vote 28 down vote

Strictly it should match

[A-Za-z][-A-Za-z0-9_:.]*

But jquery seems to have problems with colons so it might be better to avoid them.

edited Dec 9 '11 at 10:19

nasmorn

1,67411324

answered Sep 16 '08 at 9:11

Mr Shark

7,24441829

1

shouldn't that be [A-Za-z][-A-Za-z0-9_:.]* instead, since everything after the first letter is optional ("any number" includes zero, "may" implies "does not have to"). – foo Jan 7 '11 at 5:09

Yepp, updated the pattern. – Mr Shark Jan 12 '11 at 9:26

add a comment |

pdc · Answer 6 · 2008-09-16 10:04:28Z

In practice many sites use id attributes starting with numbers, even though this is technically not valid HTML.

The HTML 5 draft specification loosens up the rules for the id and name attributes: they are now just opaque strings which cannot contain spaces.

vsync · Answer 7 · 2015-03-12 11:49:34Z

HTML5:

gets rid of the additional restrictions on the id attribute see here. The only requirements left (apart from being unique in the document) are:

the value must contain at least one character (can’t be empty)
it can’t contain any space characters.

PRE-HTML5:

ID should match:

[A-Za-z][-A-Za-z0-9_:.]*

Must Start with A-Z or a-z characters
May contain - (hyphen), _ (underscore), : (colon) and . (period)

but one should avoid : and . beacause:

For example, an ID could be labelled "a.b:c" and referenced in the style sheet as #a.b:c but as well as being the id for the element, it could mean id "a", class "b", pseudo-selector "c". Best to avoid the confusion and stay away from using . and : altogether.

blacksun1 · Answer 8 · 2010-07-07 10:09:22Z

Hyphens, underscores, periods, colons, numbers and letters are all valid for use with CSS and JQuery. The following should work but it must be unique throughout the page and also must start with a letter [A-Za-z].

Working with colons and periods needs a bit more work but you can do it as the following example shows.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

Sergio · Answer 9 · 2013-10-09 06:31:00Z

HTML5

Keeping in mind that ID must be unique, ie. there must not be multiple elements in a document that have the same id value.

The rules about ID content in HTML5 are (apart from being unique):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

This is the W3 spec about ID (från MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

More info:

W3 - global attributes (id)
MDN atribute (id)

Anthony · Answer 10 · 2013-11-13 20:14:15Z

up vote 6 down vote

To reference an id with a period in it you need to use a backslash. Not sure if its the same for hyphens or underscores. For example: HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

answered Nov 13 '13 at 20:14

Anthony

48011023

2

Hyphens and underscores don't normally need to be escaped. However, the exception to this is if the hyphen appears at the start of the identifier and is followed by another hyphen (eg. \--abc) or a digit (eg. \-123). – w3dk Nov 14 '13 at 1:25

add a comment |

Steve Morgan · Answer 11 · 2008-09-16 09:12:19Z

up vote 4 down vote

From the HTML 4 spec...

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 (".").

EDIT: d'oh! Beaten to the button, again!

answered Sep 16 '08 at 9:12

Steve Morgan

10.2k12738

15

So why not to delete this answer... there are so many to be read!.. O_o" – bluish Mar 15 '11 at 9:18

add a comment |

lstg · Answer 12 · 2009-04-22 10:18:43Z

up vote 3 down vote

It appears that although colons (:) and periods (.) are valid in the HTML spec, they are invalid as id selectors in CSS so probably best avoided if you intend to use them for that purpose.

answered Apr 22 '09 at 10:18

lstg

473

@MathiasBynens The link is broken. Now it's mothereff.in/css-escapes#0foo%23bar.baz%3Aqux – Oriol Nov 8 '14 at 19:52

They aren’t invalid if you escape them correctly. See mothereff.in/css-escapes#0foo%23bar.baz%3Aqux – Mathias Bynens Nov 10 '14 at 7:09

add a comment |

pimvdb · Answer 13 · 2011-05-31 06:33:40Z

up vote 3 down vote

Also, never forget that an ID is unique. Once used, the ID value may not appear again anywhere in the document.

You may have many ID's, but all must have a unique value.

On the other hand, there is the class-element. Just like ID, it can appear many times, but the value may be used over and over again.

edited May 31 '11 at 6:33

pimvdb

82k32190286

answered Sep 16 '08 at 12:31

Vordreller

1,20682643

add a comment |

Michael_B · Answer 14 · 2015-09-02 03:22:06Z

HTML5 ID Attribute Values

As of HTML5, the only restrictions on the value of an ID are:

must be unique in the document
must not contain any space characters
must contain at least one character

Similar rules apply to classes (except for the uniqueness, of course).

So the value can be all digits, just one digit, just punctuation characters, include special characters, whatever. Just no whitespace. This is very different from HTML4.

In HTML 4, id values must begin with a letter, which can then be followed only by letters, digits, hyphens, underscores, colons and periods.

In HTML5 these are valid:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

Just bear in mind that using punctuation and special characters in the value of an id may cause trouble in other contexts (e.g., CSS, JavaScript, regex). So make sure to escape all characters in other code where they may have special meaning.

HTML Developer · Answer 15 · 2013-05-02 06:51:33Z

IDs are best suited for naming parts of your layout so should not give same name for ID and class
ID allows alphanumeric and special characters
but avoid using of # : . * ! symbols
not allowed spaces
not started with numbers or a hyphen followed by a digit
case sensitive
using ID selectors is faster than using class selectors
use hyphen "-" (underscore "_" can also use but not good for seo) for long CSS class or Id rule names
If a rule has an ID selector as its key selector, don’t add the tag name to the rule. Since IDs are unique, adding a tag name would slow down the matching process needlessly.
In HTML5, the id attribute can be used on any HTML element and In HTML 4.01, the id attribute cannot be used with: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Kanishka Panamaldeniya · Answer 16 · 2013-08-21 10:57:06Z

for HTML5

The value must be unique amongst all the IDs in the element’s home subtree and must contain at least one character. The value must not contain any space characters.

At least one character, no spaces.

This opens the door for valid use cases such as using accented characters. It also gives us plenty of more ammo to shoot ourselves in the foot with, since you can now use id values that will cause problems with both CSS and JavaScript unless you’re really careful.

Mr Shark · Answer 17 · 2012-09-27 07:03:56Z

up vote -1 down vote

Older versions of Netscape had problems with _ in names/elements, so I've stuck to A-Z, a-z, 0-9 and "-" in my IDs out of habit. I'd stretch to _:s, but I haven't had any real reason to use them. Shrugs

edited Sep 27 '12 at 7:03

Mr Shark

7,24441829

answered Sep 16 '08 at 23:58

Rob Howard

add a comment |

Shashank N. Pandey · Answer 18 · 2012-09-22 18:27:51Z

alphabets-> caps & small
digits-> 0-9
special chars-> ':', '-', '_', '.'

the format should be either starting from '.' or an alphabet, followed by either of the special chars of more alphabets or numbers. the value of the id field must not end at an '_'.
Also, spaces are not allowed, if provided, they are treated as different values, which is not valid in case of the id attributes.

Sébastien · Answer 19 · 2014-09-14 03:40:33Z

up vote -3 down vote

In HTML5, an id can't start with a number, e.g. id-"1kid" and they can't have spaces (id="Some kind")

edited Sep 14 '14 at 3:40

Sébastien

3,46272344

answered Sep 13 '14 at 20:17

user3968801

5

This is wrong. See here: "There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc." – Andrew Barber Sep 16 '14 at 19:22

add a comment |

Luka Anđelković · Answer 20 · 2015-04-06 15:21:11Z

up vote -3 down vote

You can use big and small english alphabet letters (A-Z & a-z), numbers (0-9), you can't start with numbers, no space, everything else is not allowed.

answered Apr 6 '15 at 15:21

Luka Anđelković

138

add a comment |

asked	7 years ago
viewed	232807 times
active	4 months ago

current community

your communities

more stack exchange communities

What are valid values for the id attribute in HTML?

20 Answers 20

HTML5:

PRE-HTML5:

HTML5

More info:

HTML5 ID Attribute Values

protected by Bill the Lizard Sep 12 '12 at 12:43

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

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

What are valid values for the id attribute in HTML?

20 Answers 20

HTML5:

PRE-HTML5:

HTML5

More info:

HTML5 ID Attribute Values

protected by Bill the Lizard Sep 12 '12 at 12:43

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

Linked

Related

Hot Network Questions