it-swarm-ko.com

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

HTML 요소에 대해 id 속성을 만들 때 값에 어떤 규칙이 있습니까?

html
1854
Mr Shark

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 및 클래스 name도 있습니다. 이것은 간과하기 쉬운 버그입니다. 대신 id first-name (마침표 대신 하이픈)을 선택하면 장기적으로 더 행복 할 것입니다.

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

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

1621
dgvid

HTML 4 사양에서 :

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

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

211
Peter Hilton

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

CSS (및 jQuery와 같은 여러 JavaScript 라이브러리)에서 마침표와 콜론은 특별한 의미를 가지며 조심하지 않으면 문제가 발생합니다. 마침표는 클래스 선택자이고 콜론은 의사 선택자입니다 (예 : 마우스가 위에있을 때 요소에 대한 : "마우스를 올리면").

Id에 "my.cool:thing"요소를 지정하면 CSS 선택기는 다음과 같이 표시됩니다.

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

정말로 말하고있는 것은 "CSS의 '내'id '요소,'cool '클래스 및'pseudo-selector '클래스의 요소가있는 요소입니다.

모든 경우, 숫자, 밑줄 및 하이픈의 A-Z를 고수하십시오. 위에서 말한 것처럼 고유 ID가 고유한지 확인하십시오.

그것은 당신의 첫 번째 관심사가되어야합니다.

145
Michael Thompson

jQuery does 유효한 ID 이름을 처리하십시오. 메타 문자 (예 : 점, 세미콜론, 대괄호 ...)를 벗어나면됩니다. 그것은 JavaScript가 따옴표에 문제가 있다고 말하는 것과 같습니다.

var name = 'O'Hara';

jQuery API의 선택자 (하단 참조)

63
Álvaro González

엄밀히 말하면 일치해야합니다.

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

하지만 jquery는 콜론에 문제가있는 것처럼 보이므로 콜론을 피하는 것이 좋습니다.

60
Mr Shark

HTML5 :

id 속성에 대한 추가 제한 사항을 없애거나 여기 를 참조하십시오. 유일한 요구 사항은 (문서에서 고유함을 제외하고) 다음과 같습니다.

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

이전 HTML5 :

ID가 일치해야합니다.

[A-Za-z][-A-Za-z0-9_:.]*
  1. A-Z 또는 a-z 문자로 시작해야합니다.
  2. - (하이픈), _ (밑줄), : (콜론) 및 . (마침표)

하지만 : 및 . beacause는 피해야합니다.

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

52
Zaheer Ahmed

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, 자바 스크립트, 정규식)에서 문제가 발생할 수 있음을 명심하십시오.

예를 들어 다음 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 속성의 값이 공백으로 분리 될 때 반환되는 모든 클래스로 구성됩니다. (중복은 무시됩니다.)

제작자가 class 속성에서 사용할 수있는 토큰에 대한 추가 제한은 없지만 작성자는 원하는 내용의 표현을 설명하는 값이 아닌 내용의 성격을 설명하는 값을 사용하는 것이 좋습니다.

47
Michael_B

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

HTML 5 드래프트 사양 는 id 및 name 속성에 대한 규칙을 완화합니다. 이제는 공백을 포함 할 수없는 그냥 불투명 한 문자열입니다.

32
pdc

하이픈, 밑줄, 마침표, 콜론, 숫자 및 문자 모두 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>
29
blacksun1

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.

이것은 W3 spec에 관한 spec (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 atribute (id)
23
Sergio

마침표가있는 ID를 참조하려면 백 슬래시를 사용해야합니다. 하이픈 또는 밑줄에 대해 동일한 지 확실하지 않습니다. 예 : HTML

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

CSS

#maintenance\.instrumentNumber{Word-wrap:break-Word;}
17
Anthony

또한 ID가 고유하다는 사실을 잊지 마십시오. 일단 ID 값을 사용하면 문서의 아무 곳에서나 다시 나타나지 않을 수 있습니다.

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

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

14
Vordreller

HTML 4 사양에서 ...

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

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

14
Steve Morgan

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

문서에 동일한 id 값을 가진 요소가 여러 개 있으면 안됩니다.

문자열은 다음과 같은 제한이 있습니다.

  1. 적어도 한 문자 이상이어야합니다.

  2. 공백 문자를 포함해서는 안됩니다.

    • U + 0020 SPACE
    • U + 0009 문자표 (탭)
    • U + 000A 라인 피드 (LF)
    • U + 000C 양식 공급 (FF)
    • U + 000D CARRIAGE RETURN (CR)

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

11
Bhavin Solanki

콜론 (:)과 마침표 (.)는 HTML 사양에서 유효하지만 CSS 에서 ID 선택기로 유효하지 않으므로 이러한 용도로 사용하려는 경우 가장 잘 피할 수 있습니다.

9
lstg

HTML5에 대한

값은 요소의 하위 트리에있는 모든 ID 중에서 고유해야하며 적어도 하나의 문자를 포함해야합니다. 값에는 공백 문자가 없어야합니다.

적어도 하나의 문자, 공백 없음.

이렇게하면 악센트 부호가있는 문자 사용과 같은 유효한 사용 사례가 열립니다. 또한 신중히하지 않는 한 CSS와 JavaScript 모두에서 문제를 일으킬 ID 값을 사용할 수 있기 때문에 더 많은 탄약을 발사 할 수 있습니다.

8
Kanishka Panamaldeniya

알파벳-숫자 값및 "-"및 "_"는 유효합니다. 그러나A-Z또는a-z사이의 문자로 ID 이름을 시작해야합니다.

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

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

5
Wembo Mulumba

값은 다음과 같습니다. [a-z], [A-Z], [0-9], [* _ :-]

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

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

2
Jyotirmoy Bhattacharyya

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도 사용할 수 있습니다.

1
Dev pokhariya