javascript self closing 문제

다음과 같이 self closing을 사용하여 외부 자바스크립트를 불러오게 되면 문제가 발생한다.

문제라 함은 브라우저에서 해당 외부 자바스크립트의 함수를 호출하지 못하는 것.

self closing이란 <script ... /> 와 같은 문법을 말한다. Start tag는 존재하지만 End tag는 존재하지 않는 것이다.

여하튼 개발을 하다 이와 같은 문제를 겪게 되었고 왜 브라우저가 정상적으로 자바스크립트를 로딩하지 못하는지에 대해서 확인을 해보았다.

self closing 은 원래 XHTML 에서 사용하는 문법이라고 하며 다음과 같이 엘리먼트를 꼭 slash를 이용하여 self-closing해야 한다고 적혀 있다.

XHTML requires that tags like <br/> and <img/> get an extra slash to make them self-closing.

HTML 4.01 스펙의 scripts를 확인해 보면 다음과 같이 적혀 있다.

http://www.w3.org/TR/html401/interact/scripts.html

결론은 스펙을 따르지 않았기 때문에 발생된 문제이다.

지금껏 HTML spec에 대해서 관심을 갖지 않았는데 이번 기회로 spec의 중요함을 깨닫게 되었다.

한 가지 더 얘기하고 싶은 것은 input 태그는 End tag가 forbidden이다. 지금껏 난 다음과 같이 self closing을 매번 input 엘리먼트에 붙여주며 개발을 했었다. ㅠㅠ

<input type="hidden" id="name" name="name"  />

http://www.w3.org/TR/html401/sgml/dtd.html#InputType