HTML에서 id 속성에 유효한 값은 무엇입니까?

idHTML 요소 의 속성을 만들 때 값에 어떤 규칙이 있습니까?

들어 HTML 4 , 대답은 기술적으로 :

ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 뒤에 문자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_")이 올 수 있습니다. , 콜론 ( ":") 및 마침표 ( ".")

HTML 5 는 ID가 적어도 하나의 문자를 포함해야하며 공백 문자를 포함해서는 안된다고 말하는 것이 더 관대합니다.

id 속성은 XHTML 에서 대소 문자를 구분 합니다.

순전히 실질적인 문제로 특정 문자를 피할 수 있습니다. 마침표, 콜론 및 '#'은 CSS 선택기에서 특별한 의미를 가지므로 CSS 의 백 슬래시 또는 jQuery에 전달 된 선택기 문자열 의 이중 백 슬래시를 사용하여 해당 문자를 이스케이프해야합니다 . ID에 마침표와 콜론이 생기기 전에 스타일 시트 나 코드에서 캐릭터를 이스케이프해야하는 빈도를 생각하십시오.

예를 들어 HTML 선언 <div id="first.name"></div>이 유효합니다. CSS #first\.name와 jQuery 에서 해당 요소를 다음 과 같이 선택할 수 있습니다 . $('#first\\.name').그러나 백 슬래시를 잊어 버린 경우 $('#first.name')id가 first있고 class가 있는 요소를 찾는 완벽하게 유효한 선택기가 있습니다 name. 이것은 간과하기 쉬운 버그입니다. first-name대신 id (마침표 대신 하이픈)를 선택하면 장기적으로 더 행복 할 수 있습니다 .

명명 규칙을 엄격히 준수하여 개발 작업을 단순화 할 수 있습니다. 예를 들어, 자신을 소문자로 제한하고 항상 하이픈이나 밑줄로 단어를 구분하면 (두 가지가 아닌 하나를 선택하고 다른 단어는 사용하지 마십시오) 기억하기 쉬운 패턴이 있습니다. " firstName그렇지 FirstName않습니까?" 항상 입력해야한다는 것을 알기 때문 first_name입니다. 낙타를 선호하십니까? 그런 다음 하이픈이나 밑줄을 사용하지 말고 항상 첫 문자에 대문자 또는 소문자를 사용하십시오. 혼합하지 마십시오.

현재 매우 모호한 문제는 적어도 하나의 브라우저 인 Netscape 6이 id 속성 값을 대소 문자를 구분하는 것으로 잘못 취급 했다는 것 입니다. 즉 id="firstName", HTML (소문자 'f')과 #FirstName { color: red }CSS (대문자 'F')로 입력 한 경우 버그가있는 브라우저는 요소의 색상을 빨간색으로 설정하지 못했을 것입니다. 2015 년 4 월이 편집 당시에는 Netscape 6을 지원하라는 메시지가 표시되지 않기를 바랍니다.이 내용을 역사적 각주로 간주하십시오.

로부터 HTML 4 규격 :

ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 뒤에 문자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_")이 올 수 있습니다. , 콜론 ( ":") 및 마침표 ( ".")

일반적인 실수는 숫자로 시작하는 ID를 사용하는 것입니다.

기술적으로 id / name 속성에 콜론과 마침표를 사용할 수 있지만 둘 다 피하는 것이 좋습니다.

CSS (및 jQuery와 같은 여러 JavaScript 라이브러리)에서 마침표와 콜론은 모두 특별한 의미가 있으므로주의하지 않으면 문제가 발생할 수 있습니다. 마침표는 클래스 선택기이며 콜론은 의사 선택기입니다 (예 : 마우스가 위에있을 때 요소의 ": 호버").

요소에 id "my.cool:thing"을 지정하면 CSS 선택기는 다음과 같습니다.

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

CSS-speak에서 "id가 ​​'my'인 클래스, 'cool'클래스 및 'thing'pseudo-selector '라는 요소입니다.

모든 경우, 숫자, 밑줄 및 하이픈을 AZ에 충실하십시오. 위에서 말했듯이 ID가 고유해야합니다.

그것이 첫 번째 관심사입니다.

jQuery 는 유효한 ID 이름을 처리합니다. 메타 문자 (예 : 점, 세미콜론, 대괄호 등)를 이스케이프하면됩니다. JavaScript는 쓸 수 없기 때문에 따옴표에만 문제가 있다고 말하는 것과 같습니다.

var name = 'O'Hara';

jQuery API의 선택기 (아래 참고 참조)

엄밀히 일치해야합니다

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

그러나 jquery는 콜론에 문제가있는 것으로 보이므로 피하는 것이 좋습니다.

HTML5 :

id 속성에 대한 추가 제한을 제거 하려면 here을 참조하십시오 . 문서에서 고유하지 않은 나머지 요구 사항은 다음과 같습니다.

1. 값은 하나 이상의 문자를 포함해야합니다 (비워 둘 수 없음)
2. 공백 문자를 포함 할 수 없습니다.

PRE-HTML5 :

아이디는 다음과 같아야합니다.

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

1. AZ 또는 az 문자로 시작해야합니다
2. 포함 할 수 있습니다 -(하이픈), _(밑줄), :(콜론)과 .(기간)

그러나 사람은 피해야 :하고 .beacause를 :

예를 들어, ID는 "ab : c"로 레이블이 지정되고 스타일 시트에서 #ab : c로 참조 될 수 있지만 요소의 id 일뿐만 아니라 id "a", 클래스 "b", 의사- 선택기 "c". 혼동을 피하고 사용하지 않는 것이 가장 좋습니다. 그리고 : 모두.

HTML5 : ID 및 클래스 속성에 허용되는 값

HTML5 기준으로, ID 값에 대한 유일한 제한 사항은 다음과 같습니다.

1. 문서에서 고유해야합니다
2. 공백 문자를 포함해서는 안됩니다
3. 하나 이상의 문자를 포함해야합니다

비슷한 규칙이 수업에 적용됩니다 (물론 고유성을 제외하고).

따라서 값은 모든 숫자, 한 자릿수, 문장 부호 문자 일 수 있으며 특수 문자를 포함 할 수 있습니다. 공백이 없습니다. 이것은 HTML4와는 매우 다릅니다.

HTML 4에서 ID 값은 문자로 시작해야하며 문자, 숫자, 하이픈, 밑줄, 콜론 및 마침표 만 뒤에 올 수 있습니다.

HTML5에서는 유효합니다 :

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

ID 값에 숫자, 문장 부호 또는 특수 문자를 사용하면 다른 컨텍스트 (예 : CSS, JavaScript, 정규식)에서 문제가 발생할 수 있습니다.

예를 들어 다음 ID는 HTML5에서 유효합니다.

<div id="9lions"> ... </div>

그러나 CSS에서는 유효하지 않습니다.

CSS2.1 스펙에서 :

4.1.3 문자와 대소 문자

CSS에서 식별자 (선택자에 요소 이름, 클래스 및 ID 포함)는 [a-zA-Z0-9] 및 ISO 10646 문자 U + 00A0 이상 문자와 하이픈 (-) 및 밑줄 ( _); 숫자, 하이픈 2 개 또는 하이픈 다음에 숫자로 시작할 수 없습니다 .

대부분의 경우 제한이나 특별한 의미가있는 상황에서 문자를 이스케이프 처리 할 수 ​​있습니다.

W3C 참조

HTML5

3.2.5.1 id 속성

이 id속성은 요소의 고유 식별자 (ID)를 지정합니다.

값은 요소의 홈 서브 트리에있는 모든 ID 중에서 고유해야하며 하나 이상의 문자를 포함해야합니다. 값은 공백 문자를 포함하지 않아야합니다.

참고 : ID가 취할 수있는 양식에는 다른 제한이 없습니다. 특히 ID는 숫자로만 구성되고, 숫자로 시작하고, 밑줄로 시작하고, 구두점만으로 구성 될 수 있습니다.

3.2.5.7 class 속성

지정된 경우 속성에는 요소가 속하는 다양한 클래스를 나타내는 공백으로 구분 된 토큰 세트 값이 있어야합니다.

HTML 요소가 할당 한 클래스는 class 속성 값이 공백으로 분할 될 때 반환 된 모든 클래스로 구성됩니다. 중복은 무시됩니다.

작성자가 클래스 속성에 사용할 수있는 토큰에 대한 추가 제한은 없지만 저자는 원하는 컨텐츠 표현을 설명하는 값보다는 컨텐츠의 특성을 설명하는 값을 사용하도록 권장됩니다.

실제로 많은 사이트 id는 기술적으로 유효한 HTML이 아니지만 숫자로 시작 하는 속성을 사용 합니다.

HTML 5 초안 사양은 에 대한 규칙을 느슨하게 id하고 name속성 : 그들은 공백을 포함 할 수 없습니다 지금은 단지 불투명 한 문자열입니다.

하이픈, 밑줄, 마침표, 콜론, 숫자 및 문자는 모두 CSS 및 JQuery와 함께 사용할 수 있습니다. 다음은 작동하지만 페이지 전체에서 고유해야하며 문자 [A-Za-z]로 시작해야합니다.

콜론과 마침표로 작업하려면 약간의 작업이 더 필요하지만 다음 예제와 같이 수행 할 수 있습니다.

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

HTML5

ID는 고유해야합니다. 동일한 id 값을 가진 문서에 여러 요소가 없어야합니다.

HTML5의 ID 내용에 대한 규칙은 다음과 같습니다 (고유 한 것 제외).

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.

이것은 ID에 대한 W3 사양입니다 (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).

더 많은 정보:

• W3- 전역 속성 (id)
• MDN 속성 (id)

마침표가있는 ID를 참조하려면 백 슬래시를 사용해야합니다. 하이픈이나 밑줄이 같은지 확실하지 않습니다. 예를 들어 : HTML

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

CSS

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

HTML 4 사양에서 ...

ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 뒤에 문자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_")이 올 수 있습니다. , 콜론 ( ":") 및 마침표 ( ".")

편집 : 아! 버튼에 다시 맞았다!

또한 ID가 고유하다는 것을 잊지 마십시오. 사용한 후에는 ID 값이 문서의 어느 곳에도 다시 나타나지 않을 수 있습니다.

ID가 많을 수 있지만 모두 고유 한 값을 가져야합니다.

반면에 클래스 요소가 있습니다. ID와 마찬가지로 여러 번 나타날 수 있지만 값은 계속해서 사용될 수 있습니다.

요소의 고유 식별자입니다.

문서에 동일한 id 값을 갖는 여러 요소가 없어야합니다.

다음 제한이있는 모든 문자열 :

1. 1 자 이상이어야합니다

2. 공백 문자를 포함하지 않아야합니다.

   • U + 0020 공간
   • U + 0009 문자 탭 (탭)
   • U + 000A 라인 피드 (LF)
   • U + 000C 양식 공급 (FF)
   • U + 000D 캐리지 리턴 (CR)

이외의 문자를 사용하면 ASCII letters and digits, '_', '-' and '.'에서 허용되지 않는 호환성 문제가 발생할 수 있습니다 HTML 4. 이 제한이 해제되었지만 HTML 5ID는 호환성을 위해 문자로 시작해야합니다.

콜론 (:)과 마침표 (.)는 HTML 스펙에서 유효하지만 CSS 에서 ID 선택 자로 유효하지 않으므로 해당 목적으로 사용하려는 경우 피하는 것이 가장 좋습니다.

...에 대한 HTML5

값은 요소의 홈 서브 트리에있는 모든 ID 중에서 고유해야하며 하나 이상의 문자를 포함해야합니다. 값은 공백 문자를 포함하지 않아야합니다.

공백이없는 하나 이상의 문자.

악센트 문자 사용과 같은 유효한 사용 사례를위한 문이 열립니다. 또한 실제로주의를 기울이지 않으면 CSS와 JavaScript 모두에 문제를 일으킬 수있는 id 값을 사용할 수 있기 때문에 많은 양의 탄약을 얻을 수 있습니다.

1. ID는 레이아웃의 일부를 명명하는 데 가장 적합하므로 ID와 클래스에 동일한 이름을 지정해서는 안됩니다
2. ID는 영숫자와 특수 문자를 허용합니다
3. 그러나 # : . * !기호 사용을 피하십시오
4. 허용되지 않는 공백
5. 숫자 나 하이픈으로 시작하지 않고 숫자
6. 대소 문자 구분
7. 클래스 선택기를 사용하는 것보다 ID 선택기를 사용하는 것이 더 빠름
8. 긴 CSS 클래스 또는 ID 규칙 이름에 하이픈 "-"(밑줄 "_"은 seo를 사용할 수 있지만 seo에는 적합하지 않음)을 사용하십시오.
9. 규칙에 ID 선택기가 키 선택기로 있으면 태그 이름을 규칙에 추가하지 마십시오. ID는 고유하기 때문에 태그 이름을 추가하면 일치 프로세스가 불필요하게 느려집니다.
10. HTML5에서는 id 속성을 모든 HTML 요소에서 사용할 수 있으며 HTML 4.01에서는 id 속성을 다음과 함께 사용할 수 없습니다. <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

모든 알파 숫자 값 과 " - "와 " _는 "유효합니다. 그러나 AZ 또는 az 사이의 문자로 id 이름 을 시작 해야합니다 .

공백이 없으며 a부터 z까지, 0에서 9까지의 문자로 시작해야합니다.

HTML에서

ID 는 {AZ} 또는 {az}로 시작해야하며 숫자, 마침표, 하이픈, 밑줄, 콜론을 추가 할 수 있습니다 .

예를 들면 다음과 같습니다.

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

그러나 콜론 (:) 또는 마침표 (.)로 ID를 만들 수 있지만 CSS 에서 이러한 ID를 선택기로 사용하기 는 어렵습니다 . 주로 의사 요소 (: before, : after)를 사용하려는 경우

또한 JS 에서는 이러한 ID를 선택하기가 어렵습니다. 따라서 많은 개발자가 선호하는 것처럼 처음 네 개의 ID를 사용해야하며 필요한 경우 마지막 두 개의 ID도 사용할 수 있습니다.

값은 다음과 같습니다. [az], [AZ], [0-9], [* _ :-]

그것은 HTML5에 사용됩니다 ...

모든 태그로 id를 추가 할 수 있습니다.

ES2015 이후 로 문서 문자셋이 UTF8로 설정되면 ID에 거의 모든 유니 코드 문자 를 사용할 수 있습니다 .

여기에서 테스트하십시오 : https://mothereff.in/js-variables

https://mathiasbynens.be/notes/javascript-identifiers-es6 에 대해 읽어보십시오.

ES2015에서 식별자는 $, _ 또는 유니 코드 파생 핵심 속성 ID_Start가있는 기호로 시작해야합니다.

식별자의 나머지 부분에는 $, _, U + 200C 제로 폭 비조 인너, U + 200D 제로 폭 조인 또는 유니 코드에서 파생 된 핵심 속성 ID_Continue가있는 기호가 포함될 수 있습니다.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"

div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}

<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">

사용해야합니까? 아마 좋은 생각이 아닙니다!

https://stackoverflow.com/a/52799593/2494754 에 대해 읽어보십시오.

알파벳-> 대문자 및 작은
숫자-> 0-9
특수 문자-> ':', '-', '_', '.'

형식은 '.'에서 시작해야합니다. 또는 알파벳 다음에 더 많은 알파벳 또는 숫자의 특수 문자 중 하나가옵니다. id 필드의 값은 '_'로 끝나서는 안됩니다.
또한 공백은 제공되는 경우 허용되지 않으며 다른 값으로 취급되므로 id 속성의 경우 유효하지 않습니다.