DOCTYPE와 DTD
DOCTYPE은 그 말대로 문서 타입 즉, 형식을 나타낸다. 더불어 문서를 작성하기에 앞서 해당 문서가 어떻게 작성했는지 컴퓨터와 사용자에게 알려주어야 한다. 이를 DTD(Document Type Definition)라고 표현한다. <!DOCTYPE html>는 문서타입이 html이라고 알리는 DTD인 셈이다.
<!DOCTYPE html>
<!DOCTYPE html>HTML을 처음 시작할 때 제일 먼저 배우는 단어(?)다. 꺽쇄를 사용했기에 태그 같아 보이지만 이를 HTML 태그라 부르지 않는다. <!DOCTYPE html>는 단순한 선언이고, 문서 유형에 대한 '정보'다. 다시 말해 "이제부터 기술하는 언어와 문법은 html이다"라고 미리 알려줄 뿐이다.
왜 선언하는가
결론부터 말하자면 호환성을 높이기 위해서다. HTML은 HTML1.0부터 시작해 현재 HTML5까지 버전 업그레이드 되었다(XHTML 문서 형식도 있다). 업그레이드하면서 새로 생긴 태그가 있는가 하면 없어진 태그도 있다. <!DOCTYPE html> 선언은 컴퓨터에게 과거 버전으로 사용되었을 경우 과거 버전에 맞게 검사하고, 최신 버전으로 사용했을 경우 최신 버전으로 검사하도록 하는 일종의 확인(유효성 검사) 장치다. 이전 버전에서는 HTML의 문서 선언은 조금 더 엄격하고 복잡했다.
이전 버전의 선언 방식
HTML5 전까지는 선언 정보가 훨씬 더 많았다. 아래는 HTML 4.01과 XHTML1.0의 선언이다.
<!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">이전 버전의 선언은 길고 복잡함을 알 수 있다. 게다가 여기에 호환 버전과 엄격 버전 선언이 조금씩 다르다. 무엇보다 구 버전으로 선언한 문서에서 최신 버전 문법을 쓰면 웹브라우저는 문법 오류로 간주한다는 점이 문제다. 그 반대 경우도 마찬가지. 별 것 아닌 듯한 선언에서 문법 오류로 인해 제대로 표기되지 않을 수 있다는 점은 기술자에게 의외로 귀찮은 일이었을 듯하다. 더군다나 선언이 이상하면 각 웹브라우저는 쿼크 모드로 문서를 해독해 기술자가 의도한대로 브라우징되지 않을 수 있다.
❗️쿼크모드(Quirks mode)
웹브라우저에서 하위 호환성을 유지하고자 만들어진 기술이다. 1️⃣DOCTYPE 선언이 존재하지 않거나, 잘못 기재되어 있을 경우 2️⃣DOCTYPE 선언 내 URL이 생략된 경우에 웹브라우저는 쿼크 모드로 해석해 사용자에게 보여준다. 다만, 같은 코드라도 웹브라우저마다 다르게 해석해 다른 결과물로 보일 수 있다. 더불어 정상 선언된 문서에 비해 로딩, 해석, 출력 시간이 더 길다. 올바른 문서 선언은 필수라 여기고 제대로 작성하는 것이 모두에게 이롭다.
<!DOCTYPE html>에 담긴 의미
현재 HTML 표준은 WHATWG의 HTML Living Standard로 일원화됐다(참고). 표준 문서에 따르면 <!DOCTYPE html>은 여전히 HTML5의 선언이다. 엄격했던 이전 세대 선언과 다르게 하위 호환성을 갖고 있어 옛 문법을 오류로 나타내지 않을 뿐이다. 브라우저와 버전에 상관없이 html로 선언한 문서라고 인식하고 브라우징하게 한다는 게 이전 세대 선언과 다른 점이다. 과거 버전 문서를 보존할 수 있다는 의미다. 다만, <!DOCTYPE html> 선언에는 '이 문서는 최신 HTML 표준으로 작성했다'는 의미가 가장 우선임을 잊지 않아야 한다.
참고 문서
HTML Living Standard https://html.spec.whatwg.org/multipage/
HTML5 HTML4와의 차이점 https://www.w3.org/TR/2014/NOTE-html5-diff-20141209/
HTML(나무위키) https://namu.wiki/w/HTML
DOCTYPE html 선언 의미 및 버전별 허용 태그 표 https://dasima.xyz/doctype-html/
쿼크 모드 https://ko.wikipedia.org/wiki/쿼크_모드
DTD(DOCTYPE) 뜻과 종류 https://singihae.gitbooks.io/front-end-developer-guide-book/content/chapter01.html
※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)