What Are Valid Values For the Id Attribute in Html

What are valid values for the id attribute in HTML?

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.

What are legal characters for an HTML element id?

In HTML5, the only restrictions are that the ID must be unique within the document, contain at least one character and contain no spaces. See http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-id-attribute

As other answers have pointed out, HTML 4 is more restrictive and specifies that

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

What characters are allowed in DOM IDs?

Actually there is a difference between HTML and XHTML.
As XHTML is XML the rules for XML IDs apply:

Values of type ID MUST match the Name production.

NameStartChar ::=   ":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] |
                          [#xD8-#xF6] | [#xF8-#x2FF] |
                          [#x370-#x37D] | [#x37F-#x1FFF] |
                          [#x200C-#x200D] | [#x2070-#x218F] |
                          [#x2C00-#x2FEF] | [#x3001-#xD7FF] |
                          [#xF900-#xFDCF] | [#xFDF0-#xFFFD] |
                          [#x10000-#xEFFFF]

NameChar     ::=      NameStartChar | "-" | "." | [0-9] | #xB7 |
                        [#x0300-#x036F] | [#x203F-#x2040]

Source: Extensible Markup Language (XML) 1.0 (Fifth Edition) 2.3

For HTML the following applies:

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.
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
(".").

Source: HTML 4 Specification, Chapter 6, ID Token

Valid values for ID attribute while using JQuery selectors?

Please Goto link ,i think it will help you

http://www.456bereastreet.com/archive/201011/html5_allows_almost_any_value_for_the_id_attribute_use_wisely/

Is 111 a valid HTML id attribute or are document.querySelector() and document.querySelectorAll() correctly throwing syntax errors?

According to MDN about the HTML id attribute:

This attribute's value must not contain whitespace (spaces, tabs etc.).

That seems to be the only restriction. They have a note that HTML4 was more strict, but that's it.

According to the spec:

The value must not contain any ASCII whitespace.

That means that 111 is a valid value for the HTML id attribute.

querySelector and querySelectorAll however use CSS selectors, which are more strict:

An ID selector consists of a #, followed by a valid identifier.

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. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

That means that #111 is not a valid CSS selector. Instead, use:

document.querySelector('[id="111"]')

To answer your question directly:

Is "111" a valid HTML id attribute or are document.querySelector() and document.querySelectorAll() correctly throwing syntax errors?

"111" is a valid attribute, and the syntax error are thrown correctly.

Should we always specify an ID attribute in HTML?

Only put required elements or attributes in HTML.

You do not need to put ID attribute if it is not required, and you can always add ID attribute whenever required.

Keeping only required elements in html will make it easy to read, clean, low on size and hence improves performance and speed.

What are valid CSS id selector value in HTML5?

let me grab it for you. if there might some people stuck on this issue

That’s because even though HTML5 is quite happy for an ID to start with a number, CSS is not. CSS simply doesn’t allow selectors to begin with a number. The relevant part of the specification states:

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. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).

W3C Specification.

But, you can easily work around this by using an attribute selector:

[id="123123c"] {
  color: red;
}

<div id="123123c"> Hello DEVELOPERS solve this problem </div>

HTML: Can always the same identifier be used for name and id attributes?

Is there any reason to choose different identifiers for the name and id attributes?

Yes. IDs must be unique, names don't have to be. Names must be the same for members of a radio group, so they can't all have the same id—well, they can in practice but accessing the elements by ID will be problematic. And if you don't access them by ID, why have it?

Are there any use-cases for which different identifiers are required?

Yes, radio buttons. Only one can have an id that is the same as its name. But otherwise, there are few restrictions, such as than never give form controls the name or id of a method or property of the form itself, like "submit", as it will mask the same–named property of the form.

Also, names "_charset_" and "isindex" are special.

Are there any differences in syntax? (for example you can use "myarray[123]" for the name attribute and PHP will understand that correctly and create an array, can that also be used in a similar manner for id-attributes in Javascript or CSS - and if not, is that a syntax-error or is it simply a valid identifier with brackets in it?)

Yes. The rules for name and id attribute values are similar but an ID must not contain spaces (and some values for name are special, see above). There were more restrictions on id attributes in HTML4 (e.g. ids couldn't start with a number), but in practice they weren't implemented in browsers.

Some characters that are valid in names and ids must be quoted to use as CSS selectors, e.g. for:

<div id="d[]">

the CSS selector is:

#d\[\]

and for use with the Selectors API:

#d\\[\\]

(e.g. document.querySelector('#d\\[\\]').

Are both case-sensitive?

Yes.

What Are Valid Values For the Id Attribute in Html