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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

alphabets-  caps  amp  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

User · Answer

No spaces  must begin with at least a char from a to z and 0 to 9

User · Answer

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

User · Answer

alphabets-  caps  amp  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

User · Answer

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

User · Answer

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  lt div id  first name  gt  lt  div gt  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

User · Answer

HTML5  Permitted Values for ID  amp  Class Attributes  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    lt div id  999  gt       lt  div gt   lt div id    LV-    gt       lt  div gt   lt div id      V  gt       lt  div gt   lt div id      gt       lt  div gt   lt div id     gt       lt  div gt   lt div id      gt       lt  div gt   lt div id      gt       lt  div gt   lt div id               gt       lt  div gt    Just bear in mind that using numbers  punctuation or special characters in the value of an ID may cause trouble in other contexts  e g   CSS  JavaScript  regex    For example  the following ID is valid in HTML5    lt div id  9lions  gt       lt  div gt    However  it is invalid in CSS   From the CSS2 1 spec      4 1 3 Characters and case      In CSS  identifiers  including element names  classes  and IDs in   selectors  can contain only the characters  a-zA-Z0-9  and ISO 10646   characters U 00A0 and higher  plus the hyphen  -  and the underscore        they cannot start with a digit  two hyphens  or a hyphen   followed by a digit    In most cases you may be able to escape characters in contexts where they have restrictions or special meaning     W3C References  HTML5     3 2 5 1 The id   attribute      The id attribute specifies its element s unique identifier  ID         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       Note  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       3 2 5 7 The class   attribute      The attribute  if specified  must have a value that is a set of   space-separated tokens representing the various classes that the   element belongs to       The classes that an HTML element has assigned to it consists of all   the classes returned when the value of the class attribute is split on   spaces   Duplicates are ignored        There are no additional restrictions on the tokens authors can use in   the class attribute  but authors are encouraged to use values that   describe the nature of the content  rather than values that describe   the desired presentation of the content

User · Answer

A unique identifier for the element   There must not be multiple elements in a document that have the same id value   Any string  with the following restrictions    must be at least one character long must not contain any space characters    U 0020 SPACE U 0009 CHARACTER TABULATION  tab  U 000A LINE FEED  LF  U 000C FORM FEED  FF  U 000D CARRIAGE RETURN  CR     Using characters except ASCII letters and digits        -  and     may cause compatibility problems  as they weren t allowed in HTML 4  Though this restriction has been lifted in HTML 5  an ID should start with a letter for compatibility

User · Answer

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  lt div id  first name  gt  lt  div gt  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

User · Answer

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

User · Answer

Any Alpha-numeric value and  -  and     is valid  But  you should start the id name with any character between A-Z or a-z

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

values can be    a-z   A-Z   0-9         -   it is use for HTML5      we can add id with any tag

User · Answer

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

User · Answer

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  lt div id  first name  gt  lt  div gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   lt div id  maintenance instrumentNumber  gt             0218 lt  div gt    CSS   maintenance  instrumentNumber word-wrap break-word

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  quot a b c quot  and referenced in the style sheet as  a b c but as well as being the id for the element  it could mean id  quot a quot   class  quot b quot   pseudo-selector  quot c quot   Best to avoid the confusion and stay away from using   and   altogether

User · Answer

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  quot a b c quot  and referenced in the style sheet as  a b c but as well as being the id for the element  it could mean id  quot a quot   class  quot b quot   pseudo-selector  quot c quot   Best to avoid the confusion and stay away from using   and   altogether

User · Answer

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

User · Answer

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.

User · Answer

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   lt base gt    lt head gt    lt html gt    lt meta gt    lt param gt    lt script gt    lt style gt   and  lt title gt

User · Answer

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    lt html gt   lt head gt   lt title gt Cake lt  title gt   lt style type  text css  gt       i  Really  Like  Cake           color  green             i  Really  Like  Cake           color  blue         lt  style gt   lt  head gt   lt body gt       lt div id  i Really Like Cake  gt Cake lt  div gt       lt div id  testResultPeriod  gt  lt  div gt        lt div id  i Really Like Cake  gt Cake lt  div gt       lt div id  testResultColon  gt  lt  div gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js  gt  lt  script gt       lt script type  text javascript  gt            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                      lt  script gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

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.

User · Answer

Since ES2015 we can as well use -almost- all unicode characters for ID s  if the document charset is set to UTF8   Test out here  https   mothereff in js-variables    Read about  https   mathiasbynens be notes javascript-identifiers-es6     In ES2015  identifiers must start with       or any symbol with the   Unicode derived core property ID Start       The rest of the identifier can contain       U 200C zero width   non-joiner  U 200D zero width joiner  or any symbol with the Unicode   derived core property ID Continue     x000D   x000D  const target   document querySelector  div   id x000D  console log  x000D     target x000D    x000D  document getElementById target  style backgroundColor    black  x000D  div   x000D    border  1px black solid  x000D    width  100   x000D    height  200px x000D    x000D   lt div id  H              E             C           O                 M                                       H        gt  x000D   x000D   x000D      Should you use it  Probably not a good idea   Read about  https   stackoverflow com a 52799593 2494754

User · Answer

In HTML  ID should start with  A-Z  or  a-z  you can Add Digits  period  hyphen  underscore  colons   For example    lt span id  testID2  gt  lt  span gt   lt span id  test-ID2  gt  lt  span gt   lt span id  test ID2  gt  lt  span gt   lt span id  test ID2  gt  lt  span gt   lt span id  test ID2  gt  lt  span gt    But Even Though You can Make ID with Colons    or period    It is hard for CSS to use these ID as Selector  Mainly when you want to Use Pseudo elements   before  after    Also in JS it is Hard to select these ID s  So you should use first four ID s As preferred by many developer around and if it s necessary than you can use last two also

User · Answer

No spaces  must begin with at least a char from a to z and 0 to 9

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Any Alpha-numeric value and  -  and     is valid  But  you should start the id name with any character between A-Z or a-z

User · Answer

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    lt html gt   lt head gt   lt title gt Cake lt  title gt   lt style type  text css  gt       i  Really  Like  Cake           color  green             i  Really  Like  Cake           color  blue         lt  style gt   lt  head gt   lt body gt       lt div id  i Really Like Cake  gt Cake lt  div gt       lt div id  testResultPeriod  gt  lt  div gt        lt div id  i Really Like Cake  gt Cake lt  div gt       lt div id  testResultColon  gt  lt  div gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js  gt  lt  script gt       lt script type  text javascript  gt            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                      lt  script gt   lt  body gt   lt  html gt

User · Answer

In HTML  ID should start with  A-Z  or  a-z  you can Add Digits  period  hyphen  underscore  colons   For example    lt span id  testID2  gt  lt  span gt   lt span id  test-ID2  gt  lt  span gt   lt span id  test ID2  gt  lt  span gt   lt span id  test ID2  gt  lt  span gt   lt span id  test ID2  gt  lt  span gt    But Even Though You can Make ID with Colons    or period    It is hard for CSS to use these ID as Selector  Mainly when you want to Use Pseudo elements   before  after    Also in JS it is Hard to select these ID s  So you should use first four ID s As preferred by many developer around and if it s necessary than you can use last two also

User · Answer

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

User · Answer

Since ES2015 we can as well use -almost- all unicode characters for ID s  if the document charset is set to UTF8   Test out here  https   mothereff in js-variables    Read about  https   mathiasbynens be notes javascript-identifiers-es6     In ES2015  identifiers must start with       or any symbol with the   Unicode derived core property ID Start       The rest of the identifier can contain       U 200C zero width   non-joiner  U 200D zero width joiner  or any symbol with the Unicode   derived core property ID Continue     x000D   x000D  const target   document querySelector  div   id x000D  console log  x000D     target x000D    x000D  document getElementById target  style backgroundColor    black  x000D  div   x000D    border  1px black solid  x000D    width  100   x000D    height  200px x000D    x000D   lt div id  H              E             C           O                 M                                       H        gt  x000D   x000D   x000D      Should you use it  Probably not a good idea   Read about  https   stackoverflow com a 52799593 2494754

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

values can be    a-z   A-Z   0-9         -   it is use for HTML5      we can add id with any tag

User · Answer

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  lt div id  first name  gt  lt  div gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

A unique identifier for the element   There must not be multiple elements in a document that have the same id value   Any string  with the following restrictions    must be at least one character long must not contain any space characters    U 0020 SPACE U 0009 CHARACTER TABULATION  tab  U 000A LINE FEED  LF  U 000C FORM FEED  FF  U 000D CARRIAGE RETURN  CR     Using characters except ASCII letters and digits        -  and     may cause compatibility problems  as they weren t allowed in HTML 4  Though this restriction has been lifted in HTML 5  an ID should start with a letter for compatibility

User · Answer

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   lt base gt    lt head gt    lt html gt    lt meta gt    lt param gt    lt script gt    lt style gt   and  lt title gt

User · Answer

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   lt div id  maintenance instrumentNumber  gt             0218 lt  div gt    CSS   maintenance  instrumentNumber word-wrap break-word

User · Answer

HTML5  Permitted Values for ID  amp  Class Attributes  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    lt div id  999  gt       lt  div gt   lt div id    LV-    gt       lt  div gt   lt div id      V  gt       lt  div gt   lt div id      gt       lt  div gt   lt div id     gt       lt  div gt   lt div id      gt       lt  div gt   lt div id      gt       lt  div gt   lt div id               gt       lt  div gt    Just bear in mind that using numbers  punctuation or special characters in the value of an ID may cause trouble in other contexts  e g   CSS  JavaScript  regex    For example  the following ID is valid in HTML5    lt div id  9lions  gt       lt  div gt    However  it is invalid in CSS   From the CSS2 1 spec      4 1 3 Characters and case      In CSS  identifiers  including element names  classes  and IDs in   selectors  can contain only the characters  a-zA-Z0-9  and ISO 10646   characters U 00A0 and higher  plus the hyphen  -  and the underscore        they cannot start with a digit  two hyphens  or a hyphen   followed by a digit    In most cases you may be able to escape characters in contexts where they have restrictions or special meaning     W3C References  HTML5     3 2 5 1 The id   attribute      The id attribute specifies its element s unique identifier  ID         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       Note  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       3 2 5 7 The class   attribute      The attribute  if specified  must have a value that is a set of   space-separated tokens representing the various classes that the   element belongs to       The classes that an HTML element has assigned to it consists of all   the classes returned when the value of the class attribute is split on   spaces   Duplicates are ignored        There are no additional restrictions on the tokens authors can use in   the class attribute  but authors are encouraged to use values that   describe the nature of the content  rather than values that describe   the desired presentation of the content

[html] What are valid values for the id attribute in HTML?

Examples related to html