<!DOCTYPE html> 선언의 역할

<!DOCTYPE html> 선언은
브라우저가 쿼크 모드(Quirks Mode)가 아닌 표준 모드(Standards Mode)로 렌더링하도록 하기 위해 사용됩니다.

이 선언의 유일한 목적은 브라우저가 최신 웹 표준 사양을 준수하며 올바르게 렌더링하도록 하는 것입니다.

HTML에서 <!DOCTYPE html>은 필수적인 전문(preamble)입니다.
<!DOCTYPE html>은 과거( legacy)의 이유로 필요합니다. 생략되면, 브라우저는 일부 사양과 호환되지 않는 다른 렌더링 모드를 사용하기가 일반적입니다. HTML 문서 최상단에 <!DOCTYPE html>를 포함하면 브라우저가 관련 사양을 최선의 노력으로 준수하려고 시도하는 것을 보장합니다.

HTML 문서에서 <!DOCTYPE html>을 선언한 모습 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>문서 제목</title>
    </head>
    <body>
        <!-- 웹 페이지의 내용 -->
    </body>
</html>

브라우저는 현대적인 최신의 웹 표준 사양을 지원하지만, 과거에 사용하던 여러 사양의 이전 버전의 렌더링 방식을 함께 지원합니다.
현대적인 최신의 웹 표준 사양은 과거에 사용하던 방식과는 다른 작동원리가 많습니다. 웹은 매우 발달했고, 현재 진행형이기도 합니다. 과거의 버전들은 현대 웹 표준과 호환되지 않을 수 있습니다.

<!DOCTYPE html> 선언을 포함시키면, 브라우저는 관련 스펙(specifications)을 최선의 노력으로 따르려고 시도(makes a best-effort attempt)합니다. 이를 일반적으로 표준 모드(Standards Mode)라 말합니다.

쿼크 모드(Quirks Mode)는 구형 브라우저에서 발견된 비표준 동작을 모방하는 레거시 렌더링 모드입니다.
이 모드는 현대 표준이 널리 채택되기 이전에 만들어진 웹 페이지와의 호환성을 유지하기 위해 설계되었습니다. 쿼크 모드에서는 브라우저가 CSS 박스 모델과 HTML 레이아웃을 다르게 해석할 수 있어, 종종 일관되지 않은 페이지 표시가 발생합니다.

반면 표준 모드는 최신 웹 표준을 강제하여 현대 브라우저 전반에서 일관되고 예측 가능한 렌더링을 보장합니다.

<!DOCTYPE html> 선언을 생략하면 브라우저는 쿼크 모드(Quirks Mode)로 렌더링하는 경향이 있습니다. 이는 이전 스펙(specifications)과의 호환성을 유지하기 위한 것입니다. 그러나 이 모드는 일부 스펙과 호환되지 않을 수 있으며, 이는 심각한 문제를 초래할 수 있습니다.

<!DOCTYPE html> 선언은 브라우저가 최신 버전의 웹 표준 사양을 준수하고 올바르게 렌더링하도록 선언하는 역할을 합니다. 이 선언을 문서의 최상단에 포함시키면, 브라우저는 해당 문서를 최신 웹 표준에 맞춰 처리하려고 노력합니다.

<!DOCTYPE html> 선언의 잘못된 편견

HTML 버전이 무엇인지를 브라우저에 알려주는 역할을 한다?

이는 잘못된 편견에서 생기는 오해입니다.
<!DOCTYPE html> 선언은 브라우저에게 최신 버전의 웹 표준 사양을 준수하고 올바르게 렌더링하도록 선언하는 역할을 하는 것으로 버전 정보를 제공하지 않습니다. 아마도 최신의 HTML 버전인 HTML5를 사용하고 있기 때문에 생긴 오해라고 생각됩니다. <!DOCTYPE html> 선언은 HTML뿐만 아니라 CSS에도 영향을 줍니다.

<!DOCTYPE html>은 HTML 태그이다?

<!DOCTYPE html>은 HTML 태그가 아닙니다.
선언문입니다. HTML이 시작하기 이전에 선언하는 선언문입니다. 명세서에서는 대소문자를 구분하지 않는다고 말하고 있습니다.

<!DOCTYPE html>을 선언하면 과거에 사용하던 여러 사양의 이전 버전과 호환된다?

아닙니다. 과거에 사용하던 여러 사양의 이전 버전과 호환되지 않습니다.
원하는 과거의 버전과 호환성을 유지하려면 해당하는 DOCTYPE 선언을 사용해야 합니다.

참고로, 다음은 이전 HTML 버전에서 사용되던 일반적인 DOCTYPE 선언들입니다.

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

이러한 장황한 선언들과 달리, HTML5는 DOCTYPE을 <!DOCTYPE html>로 단순화하여 개발자 경험과 브라우저 호환성을 크게 개선했습니다.

<!DOCTYPE html> 선언 규칙

<!DOCTYPE html> 선언은 다음 순서와 구성 요소를 반드시 따라야 합니다.

  1. HTML 문서의 최상단에 위치해야 합니다.
  2. <!DOCTYPE html>의 문자열로 구성되어 있어야 하며, 대소문자 구분 없이 일치해야 합니다.

현대의 브라우저들은 Blink, Gecko, WebKit과 같은 렌더링 엔진을 사용합니다.
이 엔진들은 DOCTYPE 선언을 기준으로 HTML 문서를 어떻게 파싱하고 렌더링할지 결정합니다. DOCTYPE 선언이 있을 경우, 엔진은 표준 모드 파싱을 수행하며 최신 CSS와 HTML 규칙을 적용합니다. 반면, DOCTYPE이 없으면 쿼크 모드 파싱이 활성화되어 레거시 동작이 발생하고 잠재적인 렌더링 불일치가 생길 수 있습니다.

명세서

DOCTYPE에 대한 명세서 사양
명세서 사양
DOCTYPE HTML Standard
#the-doctype

참고문헌

같이 보기