# 질문 - Stack Overflow Community Wiki ## HTML 4, HTML 5, XHTML, MIME 타입 - 최종 자료(the definitive resource) `HTM

# 질문 - Stack Overflow Community Wiki ## HTML 4, HTML 5, XHTML, MIME 타입 - 최종 자료(the definitive resource) `HTML vs XHTML` `XHTML as text/html vs XHTML as XHTML` 과 같은 주제는 상당히 복잡합니다. 불행하게도 이에 대한 정보는 대부분 웹 주위에 조각조각 흩어져 있거나 W3C 기술 전문용어(tech jargon)에 깊이 묻혀 있기 때문에 큰 그림을 그리는 것이 어렵습니다. 게다가 일부 잘못된 정보가 유포(circulated)되고 있습니다. 본인은 이 문서를 다음 목록의 가장 중요한 측면(aspects)을 설명하는 최종 자료로 만들 것을 제안합니다: - HTML 4 - HTML 5 - XHTML 1.0 as text/html, application/xml+xhtml - XHTML 1.1 as application/xml+xhtml > 각각의 실제적인 의미(practical implications)는 무엇입니까? > > 일반적인 함정(pitfalls)은 무엇입니까? > > 각각에 적합한 MIME 타입을 적용하는 것이 중요한 이유는 무엇입니까? > > 각기 다른 브라우저들이 이를 어떻게 처리하나요? # 가장 많이 선택받은(voted) 답변 ## 콘텐츠(Contents) - 용어(Terminology) - 언어와 직렬화(Languages and Serializations) - 사양(Specifications) - 브라우저 구문 분석기와 콘텐츠 (MIME) 타입(Browser Parsers and Content (MIME) Types) - 브라우저 지원(Browser Support) - 검증기와 도큐먼트 타입 정의(Validators and Document Type Definitions) - 쿼크, 제한된 쿼크, 기본 모드(Quirks, Limited Quirks, and Standards modes.) \*쿼크: 기이한, 이상한 ## 용어(Terminology) 용어 기술이 어려운 점 중 한가지는 HTML이 처음 도입된 이후 공식 사양(specification) 안의 용어가 수년간 변화해 왔다는 점입니다. 아래는 HTML 용어에 기반해 기술되었습니다. 또한 파일(file)은 세세한 구별을 피하기 위해 `파일(file)` `도큐먼트(document)` `입력 스트림(input stream)` `옥텟 스트림(octet stream)` 등을 의미하는 일반적인 용어로 사용됩니다. ## 언어와 직렬화(Languages and Serializations) HTML과 XHTML은 언어(Language)와 직렬화(Serialization)의 관점에서 정의됩니다. 언어는 **요소(elements) 및 속성(properties)의 어휘(vocabulary)**와, 어떤 요소가 다른 요소 안에 포함될 수 있는지·어떤 속성이 어떤 요소에 허용되는지·각각의 요소와 속성의 목적과 의미가 무엇인지와 같은 **콘텐츠 모델(content model)**을 정의합니다. 직렬화는 텍스트 도큐먼트 안에서 이러한 요소와 속성을 설명하기 위해 마크업(mark-up) 언어가 사용되는 방법을 정의합니다. 여기에는 어떤 태그(tag)가 필요한지, 어떤 태그를 유추(infer)할 수 있는지에 대한 정보와 이러한 추론에 대한 규칙이 포함됩니다. 규칙에는 **Void 요소**를 어떻게 표시해야 하는지(예: ` vs `), 속성 값을 언제 따옴표로 묶어야 하는지와 같은 것들이 기술되어 있습니다. ## 사양(Specifications) - HTML 4.01 - HTML 언어와 HTML 직렬화를 모두 정의하는 최신 사양입니다. - XML 1.0 - XML 직렬화를 정의하지만 XML 언어는 XML 응용 프로그램(XML applications)이라고 불리는 다른 사양에 의해 정의되도록 합니다. - XHTML 1.0 & XHTML 1.1 - 둘 다 사용되고 있습니다. 기본적으로 HTML 4.01과 동일한 언어를 사용하지만 XML 1.0 사양과 호환되는 다른 직렬화를 사용합니다. 즉, **XHTML은 XML 응용 프로그램**입니다. - HTML5 (2010-04-18 기준의 초안(draft)) - HTML과 XHTML 모두를 위한 새로운 언어를 서술(describe)합니다. 이 언어는 거의 HTML 4.01 언어의 상위 집합으로, 기존 웹 도구(브라우저(browser), 검색 엔진(search engine) 및 저작 도구(authoring tool))와도 하위 호환(backward compatible)될 수 있지만 차이가 발생하는 이전 사양과는 호환되지 않습니다. 그러므로 일부 요소의 의미가 이전 사양에서 가끔 변경되기도 합니다. 마찬가지로 각 직렬화는 현재 도구와 하위 호환됩니다. ## 브라우저 파서와 콘텐츠 (MIME) 타입(Browser Parsers and Content (MIME) Types) 텍스트 파일이 브라우저로 전송되면 내부 메모리 구조(오브젝트 모델: object model)로 파싱(parse, 구문 분석)됩니다. 이를 위해 HTML 직렬화 규칙이나 XML 직렬화 규칙을 따르는 파서(parser, 구문 분석기)를 사용합니다. 사용할 파서는 **content-type** HTTP 헤더의 **로컬이 아닌 파일에 기반하여 추론된** 콘텐츠 타입에 따라 결정됩니다. 내부적으로 파일이 파싱되면 브라우저는 원래 HTML 또는 XHTML 직렬화를 사용하여 제공된 것과 상관없이 오브젝트 모델을 거의 같은 방식으로 취급합니다. 브라우저에서 XHTML 구문 분석기를 사용하려면 **content-type** HTTP 헤더가 XML 콘텐츠 타입 중 하나여야 합니다. 일반적으로 XML 콘텐츠 타입 헤더는 `application/xml` 또는 `application/xhtml+xml`입니다. 이 헤더는 XML이 아닌 콘텐츠 타입 파일이 모든 XHTML 언어 및 직렬화 규칙을 충족하는지 여부에 관계없이 브라우저에서 XHTML로 처리되지 않음을 의미합니다. HTTP content-type으로 `text/html`을 사용하거나, (타입이 정의되지 않거나 XML이 아닌 타입인) 폴백(fallback) 시나리오에서는 브라우저가 HTML 직렬화 파서를 사용하게 됩니다. 두 파서의 한 가지 주요 차이점은 HTML 직렬화 파서가 오류 복구(recovery)를 수행한다는 것입니다. 파서의 입력 파일이 HTML 직렬화 규칙을 충족하지 못하면 파서는 이전 브라우저에서 리버스 엔지니어링(reverse engineered)된 방식으로 복구되어 파일의 끝에 도달할 때까지 오브젝트 모델을 계속 구축합니다. HTML5는 복구에 대한 최초의 규범적 정의(normative definition)를 포함하고 있지만 2010-04-26 릴리스 버전에서 활성화된 알고리즘의 구현을 제공하는 메인스트림 브라우저는 없습니다. 반대로 XML 직렬화 파서는 XML로 해석할 수 없는 것이 발견될 때(즉, 파일이 XML 형식이 아니라는 것을 발견했을 때) 중지됩니다. 이것은 XML 1.0 사양에 따르는 파서에 필요한 부분입니다. ## 브라우저 지원(Browser Support) 대부분의 최신 브라우저는 HTML 파서와 XML 파서를 모두 지원합니다. 하지만 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer) 버전 8.0 이하에서는 XML 파서가 HTML 페이지로 렌더링하기 위한 오브젝트 모델을 직접 만들 수 없습니다. 대신 XML 구조는 XSLT 파일로 처리되어 스트림으로 만들어지고, 이 스트림이 다시 HTML 파서에서 파싱되어 **렌더링할 수 있는 오브젝트 모델**로 만들 수 있습니다. 인터넷 익스플로러 9 플랫폼 프리뷰 버전부터는 XML 콘텐츠 타입을 사용하여 제공되는 XHTML을 다른 최신 브라우저와 동일한 방식으로 직접 파싱할 수 있습니다. XML 파서가 입력 파일이 XML 타입이 아니라는 것을 감지할 때, 일부 브라우저는 오류 메시지를 표시하고, 다른 브라우저는 오류가 감지된 시점까지 구성된 페이지를 보여주면서 사용자에게 HTML 파서를 사용하여 파일을 다시 파싱할 수 있는 기회를 제공합니다. ## 검증기와 다큐먼트 타입 정의(Validators and Document Type Definitions) HTML 및 XHTML 파일은 문서에서 사용되는 언어와 직렬화를 나타내는 DTD(Document Type Definition) 선언으로 시작할 수 있습니다. http://validator.w3.org/와 같은 검증기(Validator)는 이 정보를 사용해 파일 안에서 사용되는 언어 및 직렬화를 DTD에 정의된 규칙과 일치시킵니다. 그런 다음 파일의 마크업으로 DTD의 규칙이 위반되는 위치를 기준으로 오류를 보고합니다. 모든 HTML 직렬화와 언어 규칙이 DTD에 기술될 수 있는 것은 아니므로 검증기는 사양에 의해 기술된 모든 규칙의 하위 집합만 테스트합니다. HTML 4.01 및 XHTML 1.0은 표준을 준수하는 파일(compliant files)에서 허용되는 **언어별 요소와 속성에 따라 다른** `엄격하고(Strict)`, `과도기의(Transitional)` `프레임셋된(Frameset)` DTD를 정의합니다. `validator.nu`와 같은 HTML5 기반 검증기는 HTTP **content-type**에 따라 페이지를 처리하고 DTD가 설명할 수 없는 오류를 탐지하기 위해 DTD 기반 규칙 집합을 사용하는 등 브라우저와 더 유사하게 작동합니다. ## 쿼크, 제한된 쿼크, 기본 모드(Quirks, Limited Quirks, and Standards modes.) 브라우저는 전송된 파일의 유효성을 검사하지 않습니다. 또한 DTD 선언을 사용하여 파일의 언어나 직렬화를 결정하지 않습니다. 그러나 브라우저는 페이지가 만들어진 시대, 즉 작성자가 그 당시에 예상한 브라우저의 파싱 및 렌더링 동작을 추측하기 위해 DTD 선언을 사용합니다. 따라서 브라우저에서는 세 가지 파싱 및 렌더링 모드로 쿼크(Quirks) 모드, 제한된 쿼크(Limited Quirks 또는 almost standard: 거의 표준) 모드, 표준(Standards) 모드를 정의합니다. XML 콘텐츠 타입을 사용하여 제공되는 모든 파일은 항상 표준 모드에서 처리됩니다. HTML 파서를 사용하여 구문 분석된 파일의 경우, 제공된 DTD가 없거나 DTD가 매우 오래된 것으로 확인되면 브라우저는 쿼크 모드를 사용합니다. 일반적으로 text/html로 처리되는 HTML 4.01 및 XHTML 파일은 과도기의(transitional) DTD를 포함하는 경우 제한된 쿼크 모드로 처리되고 엄격한 DTD를 사용하는 경우 표준 모드로 처리됩니다. DTD가 인식 불가능한 경우 모드는 복잡한 규칙 집합에 의해 결정됩니다. 한 가지 특별한 경우는 공개 및 시스템 식별자(identifier)가 생략되고 선언이 단순히 ``인 경우입니다. 이는 현재 브라우저가 파일을 표준 모드로 간주하는 가장 짧은 doctype 선언으로 알려져 있습니다. 이러한 이유로 HTML5 호환 파일에 사용하도록 지정된 선언입니다. # 결론 1. HTML5 문서를 작성한다면 맨 위에 `` 기술 2. 전송되는 **content-type**은 [모질라 재단](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)에 따르면 `text/html`, `application/xml`, `application/xhtml+xml` 사이에서 MIME 타입을 선택해야 하는 경우 표준은 `text/html`이 권장된다고 합니다. 3. 이와 관련된 재미있는 실험도 [stackoverflow](https://stackoverflow.com/questions/97522/what-are-all-the-valid-self-closing-elements-in-xhtml-as-implemented-by-the-maj)에서 찾아볼 수 있었는데요, 문서가 실제 xhtml인지 아닌지에 따라 요소의 처리 결과가 달라지는 점도 인상깊었습니다. 4. 각 요소들이 정상적으로 처리되지 못해 태그가 엉망인 상태를 tag soup라고 부른다고 합니다. > **Note:** Use `application/xml` or `application/xhtml+xml` if you want XML's strict parsing rules, [](https://developer.mozilla.org/en-US/docs/Web/API/CDATASection) sections, or elements that aren't from HTML/SVG/MathML namespaces. # 참고할 만한 사이트 [자주 사용되는 MIME 타입]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types [모든 MIME 타입]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types - 이 게시글의 원본은 Markdown으로 작성되었습니다. - 더 자세한 설명은 https://webkit.org/blog/68/understanding-html-xml-and-xhtml/ 참조