실행 가능한 HTML 문서: DOCTYPE 선언

Q: DOCTYPE은 대소문자를 구분하나요?

아니요. , , 은 모두 같은 뜻이에요. 대문자 DOCTYPE에 소문자 html을 붙이는 방식이 가장 흔해요.

Q: DOCTYPE은 HTML 태그인가요?

아니요. 요소가 아니라 선언이에요. 닫는 태그도 없고, 속성을 추가할 수도 없고, document.body에도 나타나지 않아요. DOM에서는 document.doctype으로 접근하는 별도의 DocumentType 노드예요.

Q: 페이지가 쿼크 모드인지 어떻게 확인하나요?

브라우저 콘솔을 열고 document.compatMode를 실행해 보세요. "CSS1Compat"이면 표준 모드(또는 제한적 쿼크 모드), "BackCompat"이면 쿼크 모드예요.

`<!DOCTYPE html>`이란

<!DOCTYPE html>은 DOCTYPE 선언이에요. HTML 파일의 첫 줄, <html> 태그보다 앞에 써요. 브라우저에게 "이건 최신 HTML 문서야"라고 알려 주고, 브라우저는 현재 HTML과 CSS 명세를 따르는 표준 모드로 페이지를 렌더링해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

이 한 줄이 HTML5 DOCTYPE의 전부예요. 닫는 태그가 없고 안에 다른 내용도 들어가지 않아요.

문법 규칙

맨 앞에 와요. 앞에는 공백과 주석만 올 수 있어요. DOCTYPE 앞에 텍스트나 태그가 있으면 브라우저는 DOCTYPE을 무시해요.
대소문자를 구분하지 않아요. <!DOCTYPE html>과 <!doctype html>은 똑같아요. 한 가지 스타일을 골라 계속 쓰세요.
요소가 아니에요. </!DOCTYPE> 같은 것은 없고, class나 다른 속성을 붙일 수도 없어요.
DOCTYPE 다음 단어는 반드시 html이에요. <!DOCTYPE html5>는 새 버전이 아니에요. 브라우저는 그 페이지를 올바른 DOCTYPE이 없는 페이지로 취급해요.
문서당 하나예요. 여러 파일(템플릿, include)로 만드는 페이지도 최종 HTML 맨 위에는 DOCTYPE 하나만 출력해요.

표준 모드와 쿼크 모드

브라우저에는 렌더링 모드가 세 가지 있고, DOCTYPE이 그중 하나를 골라요.

모드	조건	달라지는 점
표준 모드	`<!DOCTYPE html>`과 그 밖의 최신 DOCTYPE	모든 것이 현재 명세를 따라요
제한적 쿼크 모드	URL이 있는 HTML 4.01 Transitional 또는 Frameset, XHTML 1.0 Transitional 또는 Frameset	거의 표준 모드예요. 줄 높이 규칙 하나만 달라서, 한 줄에 이미지만 있을 때(주로 표 셀 안) 아래 틈이 생기지 않아요
쿼크 모드	DOCTYPE 없음, 오타가 난 DOCTYPE, URL 없는 HTML 4.01 Transitional 같은 일부 옛 DOCTYPE	1990년대 브라우저를 흉내 내요. 퍼센트 높이, 표 안 글자 크기, 줄 높이가 다르게 동작해요

쿼크 모드는 웹 표준 이전에 만든 페이지가 작성자가 보던 모습 그대로 보이도록 남아 있는 모드예요. 새 페이지에서는 문제만 일으켜요. 어떤 페이지에서는 되고 다른 페이지에서는 안 되는 height: 100%, 글꼴 크기를 무시하는 표는 DOCTYPE이 빠졌을 때 나타나는 전형적인 증상이에요.

이 페이지의 에디터 미리보기는 항상 표준 모드로 렌더링되기 때문에, 거기서 DOCTYPE을 지워도 쿼크 모드를 볼 수는 없어요. 아래 검사기는 DOMParser를 쓰는데, 브라우저가 파일을 불러올 때와 같은 규칙을 적용해요. 텍스트 상자에서 DOCTYPE을 고치면 모드가 바로 바뀌어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

그 줄을 지우거나, <!DOCTYPE html5>를 입력하거나, DOCTYPE 앞에 단어를 하나 넣어 보세요. 어느 쪽이든 결과가 쿼크 모드로 바뀌어요.

옛 DOCTYPE: HTML 4.01과 XHTML

HTML5 이전에는 DOCTYPE이 긴 공개 식별자와 함께 DTD 파일을 지정했어요. 오래된 사이트 맨 위에서 지금도 볼 수 있어요.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

브라우저는 그 DTD 파일을 내려받은 적이 없어요. 모드를 고르려고 식별자만 읽었어요. HTML 4.01 Strict와 XHTML 1.0 Strict는 표준 모드, Transitional 버전은 제한적 쿼크 모드, URL이 없는 HTML 4.01 Transitional은 완전한 쿼크 모드가 돼요. 위 검사기에 붙여 넣어 확인해 보세요. 다만 compatMode는 제한적 쿼크 모드를 표준 모드와 같은 값인 CSS1Compat으로 보고하기 때문에, BackCompat으로 나오는 것은 완전한 쿼크 모드뿐이에요.

이미 표준 모드인 페이지라면 옛 DOCTYPE을 <!DOCTYPE html>로 바꿔도 안전해요. 쿼크 모드였던 페이지는 조금 달라질 수 있으니(주로 높이와 이미지 아래 틈) 바꾼 뒤에 한번 살펴보세요.

DOM 안의 DOCTYPE

DOCTYPE은 <html> 요소와 별개인 DocumentType 노드가 돼요. 스크립트는 document.doctype으로 읽을 수 있고, document.compatMode는 페이지가 최종적으로 어떤 모드인지 알려 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode는 실제 사이트를 확인하는 가장 빠른 방법이에요. 브라우저 콘솔을 열고 입력해 보세요. "CSS1Compat"이면 표준(또는 제한적 쿼크) 모드, "BackCompat"이면 쿼크 모드예요.

완전한 HTML5 기본 문서

DOCTYPE은 모든 페이지가 출발점으로 삼는 최소 문서의 한 부분이에요. 아래 각 줄에는 역할이 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

lang 속성과 meta viewport 태그는 각각 따로 페이지가 있어요.

자주 하는 실수

DOCTYPE 앞에 무언가가 있음. 엉뚱한 문자 하나, 서버 스크립트의 디버그용 echo, <!DOCTYPE html> 위에 있는 HTML 태그 하나가 페이지 전체를 쿼크 모드로 만들어요. 주석과 빈 줄은 괜찮아요.
버전을 지어냄. <!DOCTYPE html5>나 <!DOCTYPE HTML 5>는 올바르지 않고 쿼크 모드를 일으켜요. HTML5 DOCTYPE은 그냥 <!DOCTYPE html>이에요.
닫는 태그를 붙임. <!DOCTYPE html></!DOCTYPE>은 올바른 HTML이 아니에요. 이 선언에는 끝 태그가 없어요.
작은 테스트 파일에서 빼먹음. DOCTYPE 없는 연습 파일에서 쫓던 레이아웃 버그가 실제 페이지에는 없을 수 있고, 그 반대도 마찬가지예요.
옛 Transitional DOCTYPE을 그대로 둠. 아무 이득 없이 페이지를 제한적 쿼크 모드로 만들어요. <!DOCTYPE html>로 바꾸세요.

자주 묻는 질문

<!DOCTYPE html>은 무슨 역할을 하나요?

브라우저에게 이 페이지가 최신 HTML 문서라고 알려서 표준 모드로 렌더링하게 해요. 이 줄이 없으면 브라우저는 쿼크 모드로 전환되는데, 쿼크 모드는 1990년대 후반 브라우저의 버그를 흉내 내기 때문에 일부 레이아웃과 높이 계산이 달라져요.

<!DOCTYPE html>은 꼭 써야 하나요?

없어도 페이지는 열리지만, HTML 표준은 DOCTYPE을 요구하고 브라우저는 페이지를 쿼크 모드로 렌더링해요. 항상 첫 줄에 <!DOCTYPE html>을 써 주세요.

DOCTYPE은 대소문자를 구분하나요?

아니요. <!DOCTYPE html>, <!doctype html>, <!DocType HTML>은 모두 같은 뜻이에요. 대문자 DOCTYPE에 소문자 html을 붙이는 방식이 가장 흔해요.

DOCTYPE은 HTML 태그인가요?

아니요. 요소가 아니라 선언이에요. 닫는 태그도 없고, 속성을 추가할 수도 없고, document.body에도 나타나지 않아요. DOM에서는 document.doctype으로 접근하는 별도의 DocumentType 노드예요.

HTML5의 DOCTYPE은 무엇인가요?

<!DOCTYPE html>이에요. HTML5는 HTML 4.01과 XHTML의 긴 공개 식별자와 URL을 없앴고, 새 페이지에는 이 짧은 형태 하나만 있으면 돼요.

페이지가 쿼크 모드인지 어떻게 확인하나요?

브라우저 콘솔을 열고 document.compatMode를 실행해 보세요. "CSS1Compat"이면 표준 모드(또는 제한적 쿼크 모드), "BackCompat"이면 쿼크 모드예요.

HTML DOCTYPE 선언: <!DOCTYPE html>의 의미와 위치

`<!DOCTYPE html>`이란

문법 규칙

표준 모드와 쿼크 모드

옛 DOCTYPE: HTML 4.01과 XHTML

DOM 안의 DOCTYPE

완전한 HTML5 기본 문서

자주 하는 실수

자주 묻는 질문

Coddy로 코딩 배우기

<!DOCTYPE html>이란

문법 규칙

표준 모드와 쿼크 모드

옛 DOCTYPE: HTML 4.01과 XHTML

DOM 안의 DOCTYPE

완전한 HTML5 기본 문서

자주 하는 실수

자주 묻는 질문

Coddy로 코딩 배우기

`<!DOCTYPE html>`이란