HTML에서 DOCTYPE을 꼭 사용해야 하는 이유
HTML에서 DOCTYPE의 역할과 중요성
HTML을 작성할 때 첫 번째 줄에 <!DOCTYPE html> 코드를 꼭 작성해야 한다. 이 코드는 브라우저에게 HTML을 최신 스펙에 맞게 표시해야 한다고 알려준다. 또한 검색엔진들이 문서를 수집할 때 DOCTYPE이 있는 문서에 더 높은 점수를 준다고 비공식적으로 알려져 있다.
올바르게 UI 표시와 더 높은 SEO 점수를 고려할 때, HTML 첫 번째 줄에 <!DOCTYPE html>을 넣지 않을 이유가 없다. 그런데 우리는 HTML 문서를 작성하는 것이 명확한데도 불구하고 왜 브라우저에게 이 문서가 HTML로 만들어졌다고 알려줘야 하는 것일까? DOCTYPE이 무엇이고, 그리고 왜 등장했는지에 대해 알아보자.
DOCTYPE이 등장한 배경
HTML과 브라우저가 처음 등장했을 당시에는 브라우저마다 HTML을 해석하는 방법이 제각각이었다. 똑같은 HTML 파일을 브라우저마다 다르게 출력하는 일이 빈번했고, 이에 대응하고자 개발자들은 각 브라우저별로 HTML을 따로 만들었다.
W3C(월드 와이드 웹 컨소시엄)은 이 문제를 해결하기 위해 표준 HTML 스펙을 만들었다. 하지만 기존에 브라우저마다 제각각 해석하던 HTML들과 표준 HTML 스펙은 차이가 있었고, 표준을 지켜 개발을 하면 오히려 UI가 깨지는 아이러니한 상황이 발생했다. 브라우저들은 표준이 아닌 HTML 문서들과 표준 HTML 문서를 구분해서 보여줘야 할 필요성을 느꼈고, 그렇게 등장한 것이 DOCTYPE이다.
DOCTYPE에 따른 브라우저 렌더링 모드
DOCTYPE에 따라 브라우저는 아래 세 가지의 모드로 문서를 표시한다.
- 쿼크 모드(quirks mode): 표준이 아닌 HTML 문서를 지원
- 쿼크가 아닌 모드(no-quirks mode): W3C에서 만든 표준 HTML 스펙 문서를 지원
- 제한된 쿼크 모드(limited-quirks mode): 일부 비표준 스펙을 지원
과거에는 쿼크가 아닌 모드(no-quirks mod)를 전체 표준 모드(full standards mode)로, 제한된 쿼크 모드(limited-quirks mode)를 거의 표준 모드(almost-standards mode)로 불렀지만 현재는 브라우저의 동작이 표준화되었고 일관성을 위해 모드 이름을 변경했다고 한다.
HTML5가 발표된지 10년이 다 되어가는 현재 거의 모든 브라우저가 표준 HTML 스펙을 지원하기 때문에 쿼크가 아닌 모드 말고 다른 모드를 사용할 일은 없어 보인다.
브라우저의 렌더링 모드를 확인할 수 있는 방법
자바스크립트의 document.compatMode 값을 통해 현재 브라우저가 어떤 모드로 렌더링 되고 있는지 확인할 수 있다. document.compatMode의 값이 "BackCompat"이면 쿼크 모드로 렌더링을 하고 있는 것이고 "CSS1Compat"이면 쿼크가 아닌 모드 혹은 제한된 쿼크 모드로 렌더링을 하고 있다는 뜻이다.
DOCTYPE을 선언하지 않은 HTML 문서
<html>
<head>
<script>
// BackCompat 출력
console.log(document.compatMode);
</script>
</head>
<body>
<div>DOCTYPE을 선언하지 않은 HTML 문서</div>
</body>
</html>
DOCTYPE을 선언한 HTML 문서
<!DOCTYPE html>
<html>
<head>
<script>
// CSS1Compat 출력
console.log(document.compatMode);
</script>
</head>
<body>
<div>DOCTYPE을 선언한 HTML 문서</div>
</body>
</html>
브라우저가 지원하는 DOCTYPE 종류
<!DOCTYPE html> 선언은 현재 HTML 문서가 HTML5 버전에 맞춰 작성됐다는 것을 의미한다. HTML5 이전 버전의 DOCTYPE은 위키피디아에서 확인할 수 있다.