HTML 문서를 작성할 때 가장 먼저, 그리고 반드시 문서 맨 위에 배치해야 하는 것이 바로 DOCTYPE(문서 유형 선언)입니다.
DOCTYPE은 이 페이지가 어떤 버전의 HTML로 작성되었는지 웹 브라우저에 알려주는 역할을 합니다. 덕분에 브라우저는 해당 버전에 맞는 표준 렌더링 방식으로 페이지를 해석할 수 있습니다. 또한 대소문자를 구분하지 않기 때문에 <!DOCTYPE html>처럼 소문자로 작성해도 무방합니다.
DOCTYPE이 올바르게 선언되지 않으면 브라우저가 '호환 모드(quirks mode)'로 전환되어 의도하지 않은 레이아웃 깨짐 현상이 발생할 수 있으므로 항상 문서 최상단에 선언하는 습관을 들이는 것이 좋습니다.
DOCTYPE 기본 예제
다음은 HTML 문서 최상단에 DOCTYPE을 선언한 전체 구조 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>여기에 문서 제목이 들어갑니다</title>
</head>
<body>
<h1>
데모 제목
</h1>
데모용 본문 텍스트입니다.
</body>
</html>실행 결과
그럼 버전별로 사용되는 대표적인 DOCTYPE 선언 방식을 하나씩 살펴보겠습니다.
HTML5 선언
현재 웹 표준으로 널리 사용되는 HTML5의 DOCTYPE은 매우 간결합니다. 아래 한 줄만 작성하면 됩니다.
<!DOCTYPE html>
과거 버전에 비해 긴 DTD 주소를 기억할 필요가 없어 실수도 줄고 작성하기도 훨씬 편리합니다.
HTML 4.01 Strict
Strict(엄격형) 문서 유형은 더 이상 권장되지 않는 요소(deprecated elements)와 프레임셋(frameset) 문서에서만 사용되는 요소를 제외한 모든 HTML 요소를 포함합니다. 표준을 엄격하게 준수하는 문서를 작성할 때 적합합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Transitional(과도형) 문서 유형은 더 이상 권장되지 않는 요소까지 모두 포함합니다. 따라서 과거에 작성된 레거시 코드나 기존 사이트와의 호환성이 필요한 경우에 유용하게 사용됩니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">;
정리
새로운 프로젝트를 시작한다면 특별한 이유가 없는 한 간결하고 표준화된 <!DOCTYPE html>(HTML5) 선언을 사용하는 것이 가장 좋습니다. HTML 4.01 Strict와 Transitional은 오래된 시스템 유지보수 시에만 참고하면 됩니다.