HTML/태그/script 편집하기 (부분)

== 기타 ==
[[깃허브]]나 [[가온 위키]] 등에서 사용하는 [[미디어위키]] 등 거의 대부분의 서비스나 [[Contents Management System|CMS]]에서는 보안상의 이유로 <code><nowiki><script></nowiki></code> 실행을 제한한다. 가령 깃허브는 <code><nowiki><script></nowiki></code> 부문을 제거한다. 이는 [[XSS]] 등의 보안을 위해 제한하는 것이다.

===src 속성과 내용이 동시에 있을 경우===
다음과 같은 코드가 있을 때:
<syntaxhighlight lang="HTML">
<script src="a.js">console.log("Hello world!")</script>
</syntaxhighlight>
`a.js` 파일만 로드되고, 내부의 `console.log("Hello world!")`는 무시된다.  
이는 HTML 명세서에 명시되어 있으며, `src` 속성이 존재하는 경우 태그 내부의 스크립트는 fallback 콘텐츠로 간주되며 **실행되지 않는다**.<ref>[HTML Living Standard - Script elements](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element)</ref>

즉, `<script>` 태그에는 다음 두 형태 중 하나만 사용할 수 있다:
* 외부 스크립트만 로드: `<script src="..."></script>`
* 인라인 스크립트만 포함: `<script>...</script>`

동시에 사용할 경우, 브라우저는 **외부 스크립트만 처리하고 내부 내용은 무시**하므로 주의가 필요하다.

===HTML 명세서 상 script 태그의 주요 사항===
* `script` 요소는 문서 내 어디에나 위치할 수 있으나, 보통 `<head>` 또는 `<body>`의 끝부분에 위치한다.
* `src`, `type`, `async`, `defer`, `crossorigin`, `integrity`, `nomodule`, `nonce`, `referrerpolicy` 등 다양한 속성을 지원한다.
* `type` 속성이 없거나 `text/javascript`일 경우, 자바스크립트로 해석된다.
* `defer` 속성이 있으면 DOMContentLoaded 전에 스크립트가 실행된다.
* `async`는 로드된 시점에서 즉시 실행되므로, 실행 순서를 보장하지 않는다.
* `nomodule` 속성은 모듈을 지원하지 않는 브라우저에서만 실행된다.

<syntaxhighlight lang="HTML">
<!-- nomodule 예시 -->
<script nomodule src="legacy.js"></script>
</syntaxhighlight>

<syntaxhighlight lang="HTML">
<!-- defer 예시 -->
<script defer src="main.js"></script>
</syntaxhighlight>

<syntaxhighlight lang="HTML">
<!-- integrity + crossorigin 예시 -->
<script src="https://example.com/app.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>
</syntaxhighlight>

이러한 속성들을 적절히 사용하면 보안, 성능, 호환성을 개선할 수 있다.