HTML Transitional과 Strict 규격 비교

‘웹 표준’에 관한 흔한 오해 중의 하나는 HTML 대신에 XHTML을 사용하면 웹 표준을 더 잘 지킬 수 있다는 생각입니다. XHTML을 사용하면 문서의 ‘표현’‘구조’를 분리할 수 있고, 그래서 보다 ‘의미 있는’ 마크업이 가능하다는 주장도 있는데 이것 역시 사실이 아닙니다.

실제로 ‘의미 있는’ 마크업을 위해서는 XHTML과 HTML 중 어느 것을 사용했느냐가 아니라 어떤 문서 타입 정의(DTD)을 사용하느냐가 절대적으로 중요합니다. (X)HTML 문서는 크게 ‘Transitional(과도적인)’ 타입과 ‘Stict(엄격한)’ 타입으로 나눌 수 있는데 이 두 DTD가 어떻게 다른지 그 차이점을 간단히 알아보고, 웹 표준을 위해서 왜 엄격한 문서 타입이 권장되는지를 알아보도록 하겠습니다.

문서 타입 정의(DTD) 요약

HTML 4.01XHTML 1.0 규격은 각각 세 가지의 문서 타입 정의를 동일하게 갖고 있습니다.

DTD HTML 4.01 XHTML 1.0 비고
Strict HTML 4.01 Strict XHTML 1.0 Strict 엄격한 규격
Transitional HTML 4.01 Transitional XHTML 1.0 Transitional 과도적인 규격
Frameset HTML 4.01 Frameset XHTML 1.0 Frameset 프레임 사용 가능

XHTML 1.0은 HTML 4.01 규격을 XML에 맞춰 재해석한 규격이므로 약간의 문법 차이를 제외하면 사실상 차이가 없습니다. 따라서 앞으로는 XHTML과 HTML의 문서 타입 정의(DTD)를 따로 구분하지 않겠습니다. XHTML과 HTML의 차이점에 대해서는 앞서 포스팅한 XHTML과 HTML의 차이를 참고하시기 바랍니다.

Strict, Transitional DTD

W3C가 제안한 HTML 규격의 DTD 항목에는 다음과 같이 설명되어 있습니다.

“Strict 타입은 W3C가 스타일시트 사용을 장려하기 위해 단계적으로 사라질 ‘표현’(presentation)에 관한 태그와 속성을 배제한 문서 타입이다. 웹 문서 제작자는 가능하다면 Strict 타입을 사용해야 하지만(should), 불가피하게 표현을 담당하는 속성이 필요할 경우에는 Transitional 타입을 사용할 수도 있다(may).”

즉, Strict DTD가 W3C가 의도했던 문서 타입이고, Transitional DTD는 ‘과도적인’이라는 단어의 의미 처럼 기존에 만들어진 문서들과의 호환성을 위해서 만들어진 것임을 알 수 있습니다. 과거의 모든 문서들을 Strict DTD에 맞게 바꾸려면 엄청난 변화가 필요하므로 그 중간 단계로 Transitional DTD를 설정한 것이지요.

Frameset DTD

Frameset 타입은 Transitional DTD 기반 위에 프레임 지원을 위한 태그와 속성을 추가한 문서 타입입니다. 그러므로 문서의 구조화에 있어서는 Transitional DTD와 동일하게 취급됩니다.

Strict DTD에서 달라진 점

Strict DTD에서는 Transitional DTD에서 허용되던 많은 태그와 속성이 금지되었습니다. 또한, 일부 태그의 쓰임(Content Model)에서도 차이가 있는데 두 DTD의 이런 차이점을 간단히 정리한 문서가 있어서 일부를 소개합니다. 원문은 24 ways에 포스팅된 Roger Johansson의 Transitional vs. Strict Markup입니다.

사라진 태그(element)들
  • center
  • font
  • iframe
  • strike
  • u

글꼴 설정과 각종 요소의 배치, 인라인 프레임, 밑줄 표시를 담당하는 태그가 사라졌고, 선을 긋는다는 의미의 strike 태그는 문서에서 삭제된 부분을 나타내는 del 태그로 대체되었습니다.

사라진 속성(attribute)들
  • align : tabel 관련 태그에서만 허용됨(col, colgroup, tbody, td, tfoot, th, thead, tr).
  • language
  • background
  • bgcolor
  • border : table 태그에서만 허용됨.
  • height : img, object 태그에서만 허용됨.
  • hspace
  • name : HTML 4.01 Strict에서는 허용되지만, XHTML 1.0 Strict의 form, image 태그에는 허용되지 않음.
  • noshade
  • nowrap
  • target
  • text, link, vlink, alink
  • vspace
  • width : img, object, table, col, colgroup 태그에서만 허용됨.

보시는 바와 같이 Strict DTD에서는 HTML 문서의 표현을 담당하는 대부분의 속성이 사라지고, 대신 CSS를 사용해서 같은 효과를 얻도록 요구하고 있습니다. 즉, Strict DTD를 사용하기 위해서는 문서의 구조와 표현을 엄격하게 분리시켜야 한다는 얘기지요.

하지만 table, image, object 태그에서는 일부 표현 속성들이 남아있는데 그 이유에 대해서는 다음 글에서 하나씩 다루기로 하지요.

바뀐 컨텐츠 모델(Content Model)

컨텐츠 모델이란 문서에 포함된 모든 요소(태그)와 속성들의 종합적인 관계를 나타냅니다. 이 컨텐츠 모델에 따라서 어떤 태그가 다른 태그를 하위 요소로 포함할 수 있는지가 결정되는데 이 부분에서 Transitional과 Strict DTD에 차이가 있지요.

  • 모든 텍스트와 이미지는 body 태그 안에서 직접 사용될 수 없고, 반드시 div, p 태그와 같은 블록 레벨 요소로 감싸주어야 한다.
  • form 태그 안에서는 input 태그를 직접 사용할 수 없고, 반드시 div, p, fieldset 등의 태그로 감싸주어야 한다.
  • blockquote 태그 안의 모든 텍스트는 반드시 div, p 태그와 같은 블록 레벨 요소로 감싸주어야 한다.

Strict DTD를 사용해야 하는 이유

앞서 설명했듯이 Strict DTD는 문서의 구조와 표현을 엄격하게 분리시키기 위해 만들어졌습니다. 따라서 규격에 맞게 마크업하기만 하면 자연스럽게 그 목적을 달성할 수 있지요. 그에 반해서 Transitional DTD는 규격을 지킨다고 해서 ‘의미 있는’ 문서를 보장하지는 않습니다. 앞서 포스팅한 웹 표준에 대한 생각에서 ‘의미 있는’ 마크업의 장점을 다룬 바 있는데 그런 장점을 얻기 위해서는 Strict DTD를 사용하는 것이 최선의 방법입니다.

XHTML의 최종 권고안(규격)인 XHTML 1.1에서는 세 가지로 나뉘었던 DTD를 하나로 통합시켰는데 그 기반이 XHTML 1.0 Strict DTD라는 것을 생각해보면 앞으로의 웹 환경이 보다 구조적인 문서를 만드는 방향으로 나아가리라는 것을 짐작할 수 있습니다. 그러므로 새로 문서를 작성해야 한다면 Strict DTD를 도입하는 것이 미래의 웹 환경을 위해서도 바람직하리라 생각합니다.

마치며

Strict DTD를 사용하는 것은 그렇게 어려운 일이 아닙니다. Transitional DTD를 만족하는 문서를 작성할 수 있다면 약간의 연습만으로도 엄격한 마크업을 작성할 수 있으니까요. 이와 관련해서 몇 가지 HTML 태그의 사용법을 앞으로의 포스팅 주제로 삼을 생각입니다. 물론 자주 올리지는 않겠지만요. ^^;

댓글 4개가 달렸습니다. 태그: , , ,

  1. 부침개 | 2007-11-27 12:17

    p(Paragraph) 태그는 block 요소이긴 하지만 그 의미가 박스나 그룹의 의미보다는 하나의 문장, 단락 등의 의미를 가지고 있기때문에 div 나 form 의 fieldset 과는 별개로 봐야 된다고 생각합니다.
    그래서 실제로 저는 Strict 버전에서는 div 안에 바로 텍스트를 적기가 좀 애매해서 p 태그로 텍스트를 표현하는데요 물론 html validation 으로는 div 에 텍스트를 바로 넣어도 관계는 없지만 시멘틱한 마크업을 위해서 그렇게 하고있습니다.
    어쩌면 제 생각이 틀릴지도 모르겠지만요.. ^^;;

    그런데 오늘 이 코멘트를 달면서 생각해본건데 address 태그는 block 태그이지만 p 태그처럼 inline요소나 텍스트만 넣을 수 있다고 명시되어 있는데요 실제로는 transitional 버전에서는 안에 block 요소를 사용하는게 허용되고 strict 버전에서는 원칙처럼 허용하지 않더라구요
    만약 address 안에 p 태그를 이용해서 제작해놓은 경우 "우린 strict 로 페이지를 제작할 일이 없어!! 그러니 address 태그안에 p 태그도 사용할꺼야~" 라고 생각한다면 block 요소를 넣는게 크게 상관은 없어 보이지만, "상위호환성과 syntax 를 위해 정확하게 사용해야겠어.." 라고 생각하면 역씨 address 태그안에는 inline 태그나 텍스트만 사용하는게 바람직할 것 같다는 생각입니다.
    w3c 에서는 이런 차이점에 관해 나와있는지 모르겠네요. 나중에 이 것에 관한 글을 올려볼까 합니다. (요즘 저도 글을 안쓴지 너무 오래된것 같아요... ㅠ0ㅠ)

    위스턴님의 의견은 어떠세요?

    날씨가 추워지네요 저는 요즘 코감기에 코가 맹맹하답니다.
    감기조심하세요. ^^

  2. wystan | 2007-11-27 21:42

    부침개님 감기 빨리 나으시길 바래요~
    전 아직도 잘 버티고 있는데... 이러다 된통 걸리지 않을까 하는 불안감이 점점 커져가고 있습니다. ^^;

    저도 div 안에 바로 텍스트를 넣지 않고 p 태그 등으로 감싸서 넣습니다. div는 의미적으로 중립(의미가 없는)인 요소라서 그냥 쓰기 꺼려지더라고요.

    그리고 address 태그의 컨텐츠 모델이 strict와 transitional DTD에서 각각 다르다는 건 처음 알았습니다. 좋은 정보 알려주셔서 고맙습니다. XHTML 1.0 DTD를 확인해보니 아래와 같더라고요.

    XHTML 1.0 Strict DTD
    <!ELEMENT address %Inline;>
    <!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">

    XHTML 1.0 Transitional DTD
    <!ELEMENT address (#PCDATA | %inline; | %misc.inline; | p)*>

    부침개님 말씀대로 p 태그 사용 가능 유무가 다르네요. 사실 address 태그를 써본 적이 없어서 정확이 어떤 의미로 사용되는지 검색을 해봤더니 HTML4 권고안 address 태그 설명에는 페이지 작성자에 대한 contact 정보를 제공하기 위함이라고 나와 있네요. 그런데 address 태그가 보다 유용하게 사용되려면 좀 더 폭넓은 의미를 부여해야 한다는 의견도 있더군요. WHATWG 포럼에 있는 address 태그에 관한 글에서 시멘틱과 실용성에 관한 좋은 정보를 많이 얻었습니다.

    HTML5에서도 XHTML1.0 Strict와 마찬가지로 address 태그가 인라인 요소만 포함할 수 있다고 하니(변경될 수도 있지만) 불가피한 경우가 아니라면 Strict DTD를 지키는 것이 최선의 방법이 아닐까 싶습니다.

  3. 이영란 | 2008-11-05 11:02

    address를 찾다가 들어왔습니다.
    저도 contact를 제공하는 정도로 알고 있었는데
    오늘 막상 작업하면서 p태그 써도 될까라는 의문이 들어 검색하게 되었는데
    좋은 정보 감사합니다.
    역시 이만큼이면 안전하다고 생각하게 되는데 ㅎㅎ 그때 부터가 다시 시작인것 같습니다.

  4. wystan | 2009-01-13 01:15

    찾아주셔서 고맙습니다.
    댓글을 이제서야 남기네요. ^^;

    저도 부침개님이 댓글 남겨주시기 전까지는 address 요소에 대해서 잘 몰랐습니다.
    워낙 제한적인 용도로 만들어진 요소라서 많이 사용되지 않는 것 같아요.

    하지만 올바르게 사용하고, 시멘틱 웹을 위한 마이크로포맷 등과 접목시키면 데이타 구조화에 큰 역할을 할 수 있다는 의견도 있더군요.

    어떤 방식으로든 웹은 계속 진화할테니 관심을 갖고 지켜보면 좋을 것 같습니다.

댓글이 닫혔습니다.