When creating the id attributes for HTML elements, what rules are there for the value?
This question is related to
html
The answer is
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.
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';
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.
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.
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.
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';
In HTML
ID should start with {A-Z} or {a-z} you can Add Digits, period, hyphen, underscore, colons.
For example:
<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>
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.
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;}
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.
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.
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.
HTML5: Permitted Values for ID & 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:
<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 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:
<div id="9lions"> ... </div>
However, it is invalid in CSS:
From the CSS2.1 spec:
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
The
idattribute 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.
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.
No spaces, must begin with at least a char from a to z and 0 to 9.
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.
Any Alpha-numeric value and "-" and "_" is valid. But, you should start the id name with any character between A-Z or a-z.
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.
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>
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.
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:
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.
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.
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.
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!
- 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>.
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!
Any Alpha-numeric value and "-" and "_" is valid. But, you should start the id name with any character between A-Z or a-z.
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>
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.
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.
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;}
HTML5: Permitted Values for ID & 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:
<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 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:
<div id="9lions"> ... </div>
However, it is invalid in CSS:
From the CSS2.1 spec:
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
The
idattribute 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.
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.
- 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>.
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.
values can be : [a-z],[A-Z],[0-9],[* _ : -]
it is use for HTML5 ...
we can add id with any tag.
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!
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:
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.
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.
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';
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.
No spaces, must begin with at least a char from a to z and 0 to 9.
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.
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.
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.
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.
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.
const target = document.querySelector("div").id_x000D_
console.log(_x000D_
target_x000D_
)_x000D_
document.getElementById(target).style.backgroundColor = "black"div {_x000D_
border: 1px black solid;_x000D_
width: 100%;_x000D_
height: 200px_x000D_
}<div id="H???????????°?E?????~???????C?^?????????O????????????`??`?M??_????????????????????????????????????H???¯?">Should you use it? Probably not a good idea!
Read about: https://stackoverflow.com/a/52799593/2494754
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.
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.
const target = document.querySelector("div").id_x000D_
console.log(_x000D_
target_x000D_
)_x000D_
document.getElementById(target).style.backgroundColor = "black"div {_x000D_
border: 1px black solid;_x000D_
width: 100%;_x000D_
height: 200px_x000D_
}<div id="H???????????°?E?????~???????C?^?????????O????????????`??`?M??_????????????????????????????????????H???¯?">Should you use it? Probably not a good idea!
Read about: https://stackoverflow.com/a/52799593/2494754
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.
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';
values can be : [a-z],[A-Z],[0-9],[* _ : -]
it is use for HTML5 ...
we can add id with any tag.
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.
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.
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.
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.
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.
In HTML
ID should start with {A-Z} or {a-z} you can Add Digits, period, hyphen, underscore, colons.
For example:
<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>
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.
Source: Stackoverflow.com