HTML 주석(Comments)

HTML 주석은
마크업에 설명 메모를 추가하거나, 브라우저가 문서의 특정 부분을 해석하지 못하도록 하는 데 사용됩니다.

올바른 이해와 사용 방법에 대해 알아봅니다.

HTML 주석 작성 형식

HTML 주석(이하 '주석')은 <!--로 시작하고 -->로 끝납니다.

부연설명
HTML 주석은 <로 시작하고 >로 끝나지만 HTML 태그가 아닙니다.

<!--와 --> 사이에 설명 메모를 추가하거나, 브라우저가 무시하도록 특정 코드를 넣을 수 있습니다.
이렇게 주석을 작성한 것 을 일반적으로 '주석 처리' 라고 하며, 주석 처리된 부분은 브라우저가 렌더링할 때 무시하며 화면에 표시하지 않습니다.

HTML 
<!-- 이 부분은 주석입니다 -->
<p>이 부분은 브라우저에 표시됩니다.</p>
<!-- <p>이 부분은 주석으로 처리되어 화면에 표시하지 않습니다.</p> -->

주석 작성 시 주의할 점

주석 작성에는 형식이 있습니다.

미완성 주석

주석은 <!--로 시작하면 반드시 -->로 끝내야 합니다.

  • 주석은 <!-- 문자로 시작합니다.
  • <!-- 문자가 나오면, 그 이후부터 브라우저는 해당 부분을 주석으로 처리합니다.
  • --> 문자를 만나면 주석 처리가 끝납니다.

만약 <!-- 문자 이후에 -->가 없다면, HTML 문서의 끝까지 모든 내용이 주석으로 처리됩니다.

HTML 
<!-- 주석을 시작했지만 끝내지 않으면, 아래 모든 내용이 주석 처리됩니다.
<p>이 문장은 주석으로 처리되어 화면에 표시하지 않습니다.</p>

이 예시처럼 <!--로 주석을 시작하고 -->로 끝내지 않으면, HTML 문서 끝까지 주석 처리됩니다. 이 경우 마지막 -->를 반드시 추가해 주석이 의도한 범위까지만 적용되도록 해야 합니다.

주석의 내용에 <!-- 또는 --> 문자를 사용할 수 없음

주석의 내용에 <!-- 또는 --> 문자를 사용할 수 없습니다. 주석 내용에 이러한 문자가 포함되면, 브라우저가 주석을 올바르게 해석하지 못하고 오류가 발생할 수 있습니다.

HTML 
<!-- 이 주석은 잘 작성되었습니다. -->
<!-- 하지만 이 주석에는 잘못된 내용이 포함되어 있습니다: <!-- 잘못된 주석 --> -->

주석 작성 방법

주석은 한 줄에 사용하거나 여러 줄에 걸쳐 사용할 수 있습니다.

한 줄 주석

HTML 
<!-- 이곳에서부터 주석이 시작됩니다. -->

한 줄로 간단한 설명이나 메모를 남길 때 사용합니다.

여러 줄 주석

HTML 
<!-- 
    이 주석은 여러 줄로 이루어져 있으며,
    HTML 코드의 특정 섹션에 대한 설명을 추가할 수 있습니다.
    주석이 길어질 경우 이렇게 여러 줄로 작성하는 것이 좋습니다.
-->

여러 줄 주석은 긴 설명이나 코드 블록을 구분할 때 유용합니다.

주석 작성 위치

HTML 주석은 HTML 문서 내에서 거의 모든 위치에 삽입할 수 있지만, 몇 가지 주의할 점이 있습니다.
주석을 사용할 수 있는 위치와 주의사항을 아래에 정리했습니다.

주석을 사용할 수 없는 위치

주석을 사용할 수 없는 위치에 대해 알아보겠습니다.

태그의 속성 위치에 삽입할 수 없음

주석은 태그의 속성 위치에 삽입할 수 없습니다.

HTML 
<a href="<!-- 이 링크는 주석으로 처리됨 -->">링크</a>
 <p <!--class="my-class"-->>문단</p>
주석을 단순 텍스트로 해석하는 경우

<title>과 <textarea> 태그의 콘텐츠에 주석을 삽입하면 단순 텍스트로 인식합니다.

HTML 
<title><!-- 제목은 여기에 들어갑니다. --></title>

위 예시처럼 <title>에 주석을 삽입하면 브라우저의 제목 표시줄이나 페이지 탭에 보이는 제목에 <!-- 제목은 여기에 들어갑니다.-->가 표시됩니다. 주석으로 처리되지 않고, 단순 텍스트로 처리되는 것입니다.

다음은 <textarea> 태그의 경우입니다.

HTML 
<textarea><!-- 이곳에 내용을 입력하세요. --></textarea>
실제 적용된 모습

이 경우에도 주석이 단순 텍스트로 인식되어, <textarea> 요소에 <!-- 이곳에 내용을 입력하세요.-->라는 텍스트가 표시됩니다.

에러를 유발하는 경우

<style>과 <script> 태그의 콘텐츠에 주석을 삽입하면 에러를 유발합니다.

  • <style> 태그는 HTML 문서에서 CSS 스타일을 작성할 수 있는 영역을 나타내는 태그입니다. 즉, CSS 영역이라는 것입니다. 여기에 HTML 주석을 사용하면 에러를 유발합니다.
  • <script> 태그는 HTML 문서에서 사용 가능한 클라이언트 스크립트나 데이터 블록을 포함하기 위한 태그입니다. 즉, 스크립트 영역이라는 것입니다. 여기에 HTML 주석을 사용하면 에러를 유발합니다.
HTML 
<style>
    /* 올바른 CSS 주석 */
    body {
        background-color: blue;
    }
    <!-- 이 주석은 잘못된 형식입니다 -->
</style>
HTML 
<script>
    // 올바른 JavaScript 주석
    console.log("Hello, World!");
    <!-- 이 주석은 잘못된 형식입니다 -->
</script>

주석을 사용할 수 있는 위치

앞서 언급한 '주석을 사용할 수 없는 위치'를 제외한 대부분의 요소 콘텐츠 위치에 주석을 사용할 수 있습니다.
그리고, Doctype 전과 후나 <html> 태그 전과 후에도 사용할 수 있습니다.

HTML 
<!-- 주석을 추가할 수 있습니다. -->
<!DOCTYPE html>
<!-- 주석을 추가할 수 있습니다. -->
<html>
    <head>
        <title>문서 제목</title>
    </head>
    <body>...</body>
</html>
<!-- 주석을 추가할 수 있습니다. -->

명세서

HTML 주석의 명세서 사양
명세서 사양
Comments HTML Standard
#comments

참고문헌

같이 보기