HTML5에서 달라진 ID 이름 작성 규칙

ID 이름을 작성하는 규칙은 HTML5에서 꽤나 많이 달라졌지만, 아직 대부분은 HTML4 이름 규칙을 사용합니다.

대부분은 몰라서 HTML4 이름 규칙을 사용합니다.

또는 알아도 안전한 이름 작성 규칙을 유지하기 위해서입니다. 그보다는 알더라도 가독성이 떨어져서 사용하기가 껄끄럽기 때문입니다.

HTML4의 ID 이름 작성 규칙은

첫 글자는 알파벳으로 시작해야 하고, 그 뒤에는 알파벳, 숫자, -(하이픈),_(언더스코어) ,.(마침표) ,:(콜론)이 아무거나 올 수 있습니다. 특수문자는 사용할 수 없습니다. 가장 큰 제약 사항으로 인식된 것은 숫자를 첫 글자로 사용할 수 없는 것입니다.

HTML5에서 달라진 ID 이름 작성 규칙은

HTML4의 제약이 없어진 것입니다. 유일하게 남은 제약이 문자 1개 이상이어야 한다는 것입니다. 문자는 공백만 아니면 됩니다. 당연하게도 2바이트 문자, 그러니까 한글 ID를 사용할 수 있습니다.

HTML5에서는 ID 이름 사용 규칙이 사실상 제한이 없어졌습니다.

따라서 다음과 같은 ID도 사용할 수 있습니다.

특수문자, 이모지까지 사용할 수 있습니다.

<div id="킁">...</div>
<div id="company.name">...</div>
<div id="genre.name:chapter&page">...</div>
<div id="###">...</div>
<div id="♥">...</div>
<div id="[{}]">...</div>
<div id="+-*/">...</div>
<div id="??‍?">...</div>

CSS에서 이런 HTML ID에 접근하려면 다음과 같이 작성해야 합니다.

접근 규칙은 자바스크립트에도 동일하게 적용됩니다.

특수 문자에 해당하는 것들은 모두 "＼"로 이스케이프(Escape) 해야 합니다. 아이콘과 이모지는 아스키코드 값을 가지는 문자이기 때문에 별도로 이스케이프를 할 필요가 없습니다.

#킁{
    color: red;
}
#company\.name{
    color: red;
}
#genre\.name\:chapter\&page{
    color: red;
}
#\#\#\#{
    color: red;
}
#♥{
    color: red;
}
#\[\{\}\]{
    color: red;
}
#\+\-\*\/{
    color: red;
}
#??‍?{
    color: red;
}