in 웹 접근성, 코드

HTML에서 문서 형식(Doctype) 지정의 중요성

많은 노력을 기울여서 제작한 웹 페이지(문서, 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는 아래와 같다.

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

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

문서 형식은 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

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01 Strict

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

HTML 4.01 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"   
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

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

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML Basic 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

참고 문서

댓글 남기기

  1. ‘문서 형식을 지정해야 하는 이유’ 에서 quicks quiks 둘다 quirks 인거 같아요

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

    긴 DTD를 토씨하나 안틀리고 하려니 맨날 드래그 카피만 하네요 ㅠㅠ
    그냥 html5가 후다닥 나와서 브라우저들이 지원하면 좋겠습니다…

  2. 일몰님의 요청에 힘입어 blockquote 스타일을 수정했습니다. 사실 기본 html 요소 중에서 스타일을 부여하지 않은 게 몇가지 있었던 걸 이제서야 발견하게됐습니다. 감사합니다. 🙂

    HTML 5의 문서형식은 HTML 2.0/3.2과 XHTML Basic 1.1처럼 단순해서 좋더군요. 하드코딩을 고수하시는 분들에게 무척 환영받을테죠. ㅎㅎ

  3. 찬명님 : 일몰님 댓글의 의도가 “quicks” => “quiks” 수정이었는데, 제 눈엔 blockquote 스타일만 보였네요.

    논점 외에만 관심이 있는 이상한 나라의 hooney네요~ ㅠ.ㅠ

  4. 웹 공부를 하던 중 Hooney님 블로그 와서 좋은 공부하고 갑니다 ~

    그나저나 제 블로그에 Hooney님 글 발췌하고 트랙백 남겼는데

    트랙백 통신이 계속 실패네요 ;;;

    어쨌든 좋은 정보 감사합니다 🙂

  5. greenfrog님: 제가 블로그의 트랙백을 막지 않았는데, 어떤 이유인지 모르겠네요. 아무래도 제가 사용중인 워드프레스와 이글루가 트랙백을 주고 받는 인코딩의 문제 또는 보내준 트랙백의 내용에 URL이 2개 이상 포함되어 스팸으로 판단하지 아닐까 조심스래 예측해 봅니다.

    제가 블로그에 가서 확인할께요~

Webmentions

  • [jQuery Plugin] Date Picker ← Moogi's Craft 2011년 04월 13일

    […] 정상적으로 보여지지 않는다. Doctype은 다음을 참조하면 된다. Doctype – http://hooney.net/2007/08/21/438/ 사용법 : <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” […]

  • » 년) 템플릿 작업과 Ajax 작업 (6편) - django 강좌 ( 한날은 생각한다 ) 2011년 04월 13일

    […] 만들 때 꼭 들어가야 하는 요소이기도 하다. 자세한 건 후니님께서 쓰신 HTML 에서 문서 형식(Doctype) 지정의 중요성 글을 읽자. 꼭 […]