HTML의 id 속성을 만들 때 규칙

질문 : HTML의 id 속성에 유효한 값은 무엇입니까?

---

id 속성을 만들 때 값에 어떤 규칙이 있습니까?

답변

---

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') first name 도있는 완벽하게 유효한 선택기를 갖게됩니다. 간과하기 쉬운 버그입니다. first-name (마침표가 아닌 하이픈)을 선택하는 것이 장기적으로 더 행복 할 수 있습니다.

명명 규칙을 엄격하게 고수하여 개발 작업을 단순화 할 수 있습니다. 예를 들어 자신을 소문자로만 제한하고 항상 하이픈이나 밑줄로 단어를 구분하는 경우 (둘 다 선택하지 않고 둘 중 하나를 선택하고 다른 하나는 사용하지 않음) 기억하기 쉬운 패턴을 갖게됩니다. firstName 또는 FirstName ?"이 궁금하지 않을 것입니다. first_name 을 입력해야한다는 것을 알고 있기 때문입니다. 카멜 케이스를 선호 하시나요? 그런 다음 하이픈이나 밑줄을 사용하지 말고 항상 첫 번째 문자에 대문자 또는 소문자를 일관되게 사용하고 혼합하지 마십시오.

이제 매우 모호한 문제는 하나 이상의 브라우저 인 Netscape 6이 id 속성 값을 대소 문자를 구분하는 것으로 잘못 처리 했다는 것입니다. 즉, HTML (소문자 'f')에 id="firstName" 을 입력하고 CSS (대문자 'F')에 #FirstName { color: red } 요소의 색상을 빨간색으로 설정합니다. 이 편집 시점 인 2015 년 4 월에는 Netscape 6을 지원하라는 요청을받지 않았기를 바랍니다. 이것은 역사적인 각주라고 생각하십시오.

출처 : https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html