많은 노력을 기울여서 제작한 웹 페이지(문서, page)가 제작자의 의도와 다르게 출력되는 경우가 있다. 대부분 올바르지 못한 HTML 마크업과 CSS, JavaScript 코드로 작성했기 때문에 발생한 문제이지만, 어떤 문서는 유효성 검사를 모두 통과했음에도 불구하고 제대로 출력되지 않기도 한다.

이처럼 올바른 문법으로 작성한 문서가 올바르지 않게 출력되면, 제작자는 깊은 고민의 수렁에 빠질 수 밖에 없다. 자신의 경험과 주변의 도움으로 쉽게 문제를 해결하기 어렵기 때문이다. 또한 이러한 문제는 IE, FF, Opera, Safari와 같은 다양한 웹 브라우저에서 각각 다른 모습으로 출력되는 문제도 있다.

이러한 문제는 대부분 (x)HTML 문서의 코드 첫 줄에 문서 형식이 명시되지 않았기 때문이다. 올바르지 않은 문서 형식이 선언되었기 때문이거나, 또한 문서 형식이 선언되지 않았기 때문일 수 있다. 심지어 (x)HTML 코드의 첫 줄에 공백이나 주석이 입력되어 있기 때문일 수도 있다.

문서 형식이란

HTML 문서에는 여러 종류의 형식이 존재한다. HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict 외에도 다양한 문서 형식이 존재한다. 이들 문서 형식은 W3C의 스펙에서 보다 자세하게 확인할 수 있다.

문서에 형식을 정의하는 것을 “Document Type Definition”이라고 하며, 줄여서 DTD라고 한다. DTD는 HTML 문서의 첫번째 줄에 위치해야 하며, XHTML 1.0 Strict 문서 형식을 선언하는 code는 아래와 같다.

문서 형식을 지정해야 하는 이유

문서 형식은 HTML 버전과 종류를 명시함으로써, 브라우저가 문서를 해석하고 출력하는데 직접적인 영향을 준다. 웹 브라우저는 문서형식이 지정되지 않거나, 올바르게 지정되지 않은 HTML 문서를 읽고 해석하는데 어려움을 겪는다. 때문에 화면을 출력하는데 보다 오랜 시간이 소요되며, 또한 제작자의 의도와 다른 화면을 출력할 수 있다. 이는 일반적인 시각계 브라우저 외에도 시각장애인용 음성출력 브라우저나 기타 보조기기 역시 마찬가지다.

최근 웹 브라우저는 호환(Quirks) 또는 표준(Strict)처럼 다양한 방식으로 HTML 문서를 해석한다. 브라우저는 올바르게 지정된 문서 형식의 HTML을 표준(Strict) 방식으로 해석하고 출력하지만, 그렇지 않은 HTML은 호환(Quirks) 방식으로 출력한다.

표준 방식은 HTML를 W3C 스펙에 따라 출력하는 방식이며, 호환 방식은 각각의 브라우저마다 사용하는 별도의 스펙에 따라 출력하는 방식이다. 떄문에 호환 방식으로 출력된 HTML은 각각의 브라우저마다 다르게 출력된다. 문서 형식 지정에 따른 브라우저 출력 방식은 아래 표에서 확인할 수 있다.

문서 형식 선언과 브라우저 출력 방식

Eric Meyer가 2006년 11월에 작성한 Doctype Grid에서 문서 형석과 브라우저의 출력 방식의 관계를 확인할 수 있다.

문서 형식 그리드

호환 출력 방식(Quirks Rendering Mode)의 특징

  1. 브라우저가 HTML을 읽는데 시간이 더 걸린다.
  2. 브라우저가 HTML을 해석하는데 시간이 더 걸린다.
  3. 브라우저가 HTML을 출력하는데 시간이 더 걸린다.
  4. 브라우저마다 HTML을 각각 다르게 출력한다.

(x)HTML 문서 형식 선언

W3C에 정의된 (x)HTML의 문서 형식 선언은 아래와 같다.이 외에도 W3C QA팀의 Recommended list of DTDs에서 SVG, MathML 등의 XML 문서 형식 선언도 확인할 수 있다.

HTML 2.0

HTML 3.2

HTML 4.01 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

XHTML 1.0 Strict

XHTML 1.0 Transitional

XHTML 1.0 Frameset

XHTML 1.1

XHTML Basic 1.0

XHTML Basic 1.1

참고 문서