HTML5와 XHTML2의 차이점

대부분의 사람들은 HTML 4와 XHTML 1을 사용하여 웹페이지를 작성합니다. 의미론적 HTML의 개념을 이해하고 HTML 구조를 검증하며 문서 접근성을 향상시키는 HTML 애호가는 상대적으로 적습니다. 고품질 HTML 문서는 반복적인 절충, 디자인 최적화 및 토론의 결과입니다. 모든 비판에도 불구하고 HTML의 인기를 따라잡을 수 있는 언어는 없습니다. 대부분의 사용자는 마치 원래 그런 식으로 태어난 것처럼 표준의 현 상태에 만족합니다.
그러나 다른 많은 표준과 마찬가지로 HTML에도 후속 표준이 있습니다. 지금도 전문가들은 현재 버전에서 알려진 모든 문제를 수정하면서 다음 버전의 HTML에 대해 생각하고 있습니다. 다른 군중과 마찬가지로 이 전문가들도 이 작업의 향후 방향에 대해 의견이 다릅니다.
새로운 HTML 버전에 대한 첫 번째 제안은 W3C 조직 내의 실무 그룹에서 나왔습니다. 작업 그룹의 아이디어는 XHTML을 더욱 정제하고 첫 번째 HTML 버전의 디자인 개념으로 돌아가는 원래 개발 방향을 계속하는 표준인 XHTML 2를 중심으로 진행됩니다.
W3C 외부의 일부 중요한 HTML 전문가(브라우저 공급업체, 웹 개발자, 작성자 등)는 XHTML 2의 방향에 동의하지 않습니다. 2004년에 그들은 새로운 HTML 버전의 새로운 디자인 방향을 제안하기 위해 독립적인 작업 그룹을 구성했습니다. WHATWG(Web Hypertext Application Technology Working Group)라는 이름으로 HTML 5와 Web Forms 2를 출시했습니다.
몇 년 후 HTML의 대체 방향이 작업 초안에 명확하게 설명되었습니다. 2007년 4월, W3C는 HTML 5를 (아직) 공식적인 표준으로 인정하지 않은 채 표준 검토 프로세스에 허용할지 여부에 대해 투표했습니다. 대부분의 사람들은 동의합니다. 흥미로운 상황이 발생합니다. W3C는 HTML과 XHTML에 대한 두 가지 경쟁 후속 기술을 동시에 작업하고 있습니다. 이론적으로는 두 가지 모두에 대한 타당한 이유가 있습니다. 실제로 모든 주요 브라우저가 두 표준을 모두 지원하도록 하려면 극복해야 할 장애물이 많습니다.
이것이 현 사태를 가져온 기본 사실이다. 두 제안의 실제 차이점을 논의하는 것이 더 의미가 있을 것입니다. 이 기사에서는 두 제안의 기본 사항을 간략히 설명하고 그 뒤에 숨은 디자인 개념을 분석합니다. 자주 사용되는 약어
CSS: Cascading Style Sheets
HTML: Hypertext Markup Language
W3C: World Wide Web Consortium
XHTML: Extensible Hypertext Markup Language XHTML의 간략한 역사
XHTML 2의 디자인 철학을 이해하려면 약간의 역사가 필요합니다. 1990년대 초 HTML의 첫 번째 버전은 SGML(Standard Generalized Markup Language)을 기반으로 했습니다. 가장 큰 차이점은 월드와이드웹(World Wide Web)의 핵심 기반이자 성공 요인인 하이퍼링크 속성입니다. SGML과 마찬가지로 HTML을 사용하면 작성자는 단락, 순서가 지정된 목록 및 순서가 없는 목록에서 헤더를 분리하여 문서의 구조를 설명할 수 있습니다. 화면에 표시되는 결과는 브라우저에 따라 다릅니다.
웹이 대중화됨에 따라 HTML 사용자는 페이지의 모양과 느낌에 대한 제어를 요구합니다. 브라우저 공급업체는 HTML 2 및 3에 새로운 기능을 도입했습니다. 웹 페이지는 이해하기 어려워지고 복잡한 중첩 테이블 구조가 페이지 레이아웃을 제어하는 ​​주요 수단이 됩니다. 문서의 나머지 부분은 글꼴 태그와 색상 선언으로 채워집니다. 원본 문서 구조가 정리하기 어려워졌습니다.
이러한 혼란을 끝내기 위해 등장한 HTML 4는 프레젠테이션 논리를 CSS에 적용하고 고급 콘텐츠 위치 지정을 위한 레이어(DIV)를 도입했습니다. 이는 HTML 3에 비해 코드 작성 모델이 변경되었음을 의미합니다. 마이그레이션 프로세스를 단순화하기 위해 HTML 4의 전환 버전을 통해 이전 HTML 3 구조가 지원됩니다. 고급 사용자를 위한 엄격한 버전에서는 콘텐츠와 프리젠테이션을 깔끔하게 분리해야 합니다.
최초의 HTML 4 웹사이트에서는 새로운 성배와 같은 DIV를 사용하여 헤더를 포함하여 약간의 다듬기가 필요한 페이지의 거의 모든 요소에 DIV를 사용했습니다. HTML 스타일 속성은 프리젠테이션 세부사항을 설명하는 일반적인 장소입니다. 마침내 웹에서 어수선한 테이블을 제거했습니다. 그러나 콘텐츠와 표현 논리는 여전히 혼합되어 있습니다. 필수 CSS 파일의 길이는 단 몇 줄에 불과합니다.
최근 일부 유명 웹 개발자들은 HTML 4 스타일시트에 대한 더욱 기발한 접근 방식을 고안했습니다. 최신 브라우저에서 CSS 속성은 DIV 요소로 제한되지 않습니다. 원하는 경우 HTML 요소에 대한 스타일을 지정할 수 있습니다. 많은 웹로그에서 Semantic HTML에 대해 이야기하기 시작했습니다. DIV 요소에 대한 전면적인 금지는 없지만 웹 페이지 작성자는 자신의 콘텐츠를 가장 잘 설명하는 HTML 요소를 사용하기 시작했습니다. 예를 들어 대부분의 웹사이트 탐색 메뉴는 순서가 지정되지 않은 목록으로 가장 잘 설명됩니다. 또 다른 예로, 단락 요소에 bigHeader와 같은 클래스 이름을 사용하는 대신 H1 요소를 사용한 다음 CSS를 사용하여 필요에 따라 표현을 수정합니다.
한편 W3C는 올바른 형식의 유효한 HTML 4를 준수하는 XML 버전으로 XHTML 1을 제안했습니다. XML 사용자의 경우 이는 XML 콘텐츠를 웹 페이지로 변환하고 기존 유효성 검사기와 비교하여 변환 결과를 확인하는 작업을 단순화합니다. XHTML 1.1은 다양한 문제를 다양한 모듈로 분리하려고 시도합니다. 모듈식 접근 방식을 사용하면 다양한 요구에 맞게 표준의 다양한 부분을 쉽게 재사용하고 새로운 기능으로 표준을 확장할 수 있습니다.
HTML 4보다 더 많은 사용자를 보유하고 있는 XHTML 1.1은 컨텐츠와 프리젠테이션을 분리합니다. 그러나 과거와 마찬가지로 일부 실제 문제는 CSS의 트릭을 사용해야만 해결할 수 있습니다. 예를 들어, 순서가 지정되지 않은 목록으로 표시되는 메뉴 구조에는 아름다운 이미지가 포함되는 경우가 많습니다. 그러나 텍스트 음성 변환 기능을 통해 시각 장애인이 이미지를 쉽게 읽을 수는 없습니다. 그리고 Lynx와 같은 텍스트 브라우저는 이미지를 표시할 수 없습니다. 복잡한 CSS 트릭을 사용하면 텍스트를 숨기고 브라우저에 이미지를 표시할 수 있습니다. 하지만 메뉴가 페이지마다 다르면 이 부분을 CSS로 지정하기 어려울 것입니다. XHTML 2의 디자인 철학
XHTML 2의 가장 중요한 디자인 철학은 콘텐츠와 표현을 더욱 분리하고 HTML 4와 XHTML 1의 나머지 결함을 개선하는 것입니다. 예를 들어, 정렬되지 않은 목록의 각 항목에 대한 이미지 지정을 기본적으로 지원합니다. 원래 IMG SRC 태그는 모든 요소에 사용할 수 있는 선택적 SRC 속성으로 대체됩니다. 수정된 CSS는 콘텐츠와 완전히 분리되어 이미지를 지원하지 않는 기기에서도 쉽게 텍스트를 대신 표현할 수 있습니다.
하지만 CSS가 웹 개발자에게 유일한 과제는 아닙니다. 서버 및 HTML 양식과 상호작용하는 데 많은 시간이 소요되며 JavaScript™ 코드도 많습니다. 양식은 1차원 키-값 쌍으로 제한됩니다. JavaScript 코드를 개발하는 것은 많은 작업이지만 텍스트 음성 변환 장치와 같은 인터페이스에서는 쓸모가 없습니다.
모듈식 접근 방식을 기반으로 하는 XHTML 2는 HTML 양식을 XForms 모듈로 대체하여 적절한 애플리케이션 모델을 사용하여 일반적인 문제에 대한 지원을 추가합니다. XForms는 한 줄의 스크립트 없이도 상호 작용 논리, 유효성 검사 규칙 및 계산 방법을 지정할 수 있습니다. 또한 이 기술은 키-값 쌍이 아닌 풍부한 XML 구조를 사용하므로 중첩된 하위 양식과 반복되는 요소를 허용합니다. 강력한 엔진을 제공하는 것 외에도 텍스트 음성 변환 장치는 다양한 애플리케이션을 변경하는 데 더 적합합니다.
XForms 외에도 XML 이벤트, XFrames 및 Ruby(아시아 언어)와 같은 다른 요구 사항을 충족하기 위해 독립적인 사양으로 추출된 기타 XHTML 관련 문제가 있습니다.
표현의 분리로 프로그래밍도 표준에서 분리됩니다. onClick과 같은 상호 작용 속성은 XML 이벤트 모듈로 대체됩니다. XML 이벤트 사양 자체는 이러한 목적으로 설계되었기 때문에 사용자 인터페이스 작업을 위한 보다 강력한 도구 세트를 제공합니다.
XHTML 2의 혁신을 요약하면 기본 아이디어는 다양한 문제를 세분화하는 것입니다. 이 문제는 더 이상 HTML의 보조 기능이 아니며 새 사양의 기본 목적이 됩니다. 따라서 새로운 사양은 최적화가 직면한 문제에 가장 적합합니다. 그러나 서로 다른 문제를 다르게 취급하는 것은 실천보다는 철학의 문제입니다. 이 도구 세트 사용에 익숙한 현명한 개발자는 필요한 결과를 얻을 수 있습니다. 그러나 현재 HTML 버전의 일반 사용자가 고품질 XHTML 문서를 만들 수 있는지 여부를 말하기는 쉽지 않습니다.
XHTML 2는 아마도 일반 HTML 사용자를 대상으로 하지 않을 것입니다. 그러나 훌륭한 개발자의 손에서는 접근성을 향상시키는 좋은 방법이 될 수 있습니다. HTML 5 디자인 철학
WHATWG는 HTML 5를 디자인할 때 보다 현실적인 접근 방식을 채택했습니다. 문제 분해와 같은 추상적인 개념을 고려하지 않고, 이 워킹 그룹은 W3C 사양과 완전히 다른 현재 주류 브라우저의 동작을 기반으로 문서를 개발했습니다. 위의 분석을 바탕으로 본 워킹그룹에서는 HTML의 실제 활용에 대해 조사했습니다.
이 정보를 바탕으로 실무 그룹은 일반 웹 개발자의 작업을 단순화하는 것을 목표로 하는 이니셔티브를 제안했습니다. HTML 5는 이전 버전의 HTML에서 파생되었다고 주장하지만 주요 목표는 순수성이 아닙니다. 예를 들어, 모듈식 문서화의 주요 목표는 최적화된 웹 애플리케이션으로의 교체를 용이하게 하는 것입니다.
이러한 목적을 기반으로 한 모듈형 언어는 웹 애플리케이션 개발을 크게 단순화합니다. 예를 들어 HTML 5는 데이터 테이블, 메뉴, 도구 모음과 같은 대화형 구성 요소를 지원합니다. 기본 동작과 함께 설명적인 HTML 요소를 사용하면 일반 DIV의 동작을 시뮬레이션하기 위해 많은 코드를 작성할 필요가 없습니다.
HTML 5 사양은 HTML 요소와 속성으로 제한되지 않습니다. 문서 편집 및 드래그 앤 드롭 상호 작용을 위한 특수 JavaScript API를 정의합니다. 이 접근 방식은 문제를 분해하는 것과 완전히 다릅니다. 웹 개발자 API를 단순화하지만 사양의 크기를 늘립니다.
HTML 5는 XHTML 2가 XHTML 1보다 HTML 4와 훨씬 유사합니다. 마이그레이션 경로는 더 단순하며 숙련된 HTML 4 개발자가 새 버전에 익숙해지기가 더 쉽습니다. 새로운 기능은 비슷한 논리를 따릅니다. 특정 요소에 대한 전문화된 이벤트 속성을 통해 HTML 편집기는 보다 적절한 텍스트 완성 기능을 제공할 수 있습니다.
현재 웹 애플리케이션은 비동기 JavaScript XML(Ajax)을 사용하여 서버와 상호 작용합니다. HTML 5는 서버와의 상호 작용의 중요성을 인식하고 네트워크와 상호 작용하고, 수신된 서버 이벤트를 배포하고, 보안 문제를 일으키지 않고 다른 도메인의 문서에 메시지를 보내는 다양한 방법을 정의합니다.
HTML 5의 기본 디자인 철학은 웹 개발자에게 필요한 기능을 HTML 4에 확장하는 것입니다. HTML 5는 HTML 4의 기본 기술을 계승하면서도 단순화했습니다. HTML V4의 단점을 해결하기 위해 HTML V5는 가장 간단하고 직접적인 재설계 방법을 선택합니다. 새로운 기준의 실질적인 적용
XHTML V2 및 관련 모듈은 W3C에서 공식적으로 지원되며, 관련 모듈은 W3C에서 지원하는 다른 XML 사양에서 중요한 요소가 됩니다. 불행하게도 W3C의 공식 승인은 주요 웹 브라우저에서의 지원을 보장하지 않습니다. 일반적으로 XHTML V2에 대한 지원은 문제가 되지 않습니다. 최신 브라우저는 이미 많은 기능을 지원합니다. XHTML V2의 올바른 사용은 관련 모듈의 가용성에 따라 달라집니다. 이 글을 쓰는 시점에서는 Microsoft가 Windows® Internet Explorer®를 확장하여 XML 이벤트 및 XForms 기능을 지원할지는 확실하지 않습니다. XML 이벤트를 포함한 Mozilla XForms 플러그인은 수년 동안 개발되어 왔습니다. 이 플러그인은 이 기술의 기능을 향상시키고 구현의 어려움을 줄여줍니다.
HTML V5 사양 작성 시 브라우저 제조업체와 심도 있는 커뮤니케이션을 유지했으며 항상 구현 문제를 고려했습니다. 팀은 공식 W3C 승인에 대해 의구심을 표명했지만. FAQ는 공식 승인이 언제 나올지에 대한 질문에 공식적으로 답변하지도 않습니다. W3C의 입장에 관계없이 브라우저 공급업체는 비공식 HTML 5 표준을 구현하기로 결정한 것으로 보입니다. 브라우저 제조업체가 공식 표준 출시를 앞두고 서두르는 것은 이번이 처음이 아닙니다. 경쟁 표준
현재 HTML 5나 XHTML 2는 공식 권장 사항이 아닙니다. 일부 사소한 세부 사항은 향후 변경될 수 있습니다. 그러나 그들의 개발 방향은 변하지 않을 것이며 둘 다 현재 표준의 일부 단점을 해결했습니다. 미래의 브라우저가 이 두 가지 새로운 표준에 대한 지원을 어떻게 추가할지 지켜봐야 합니다. 현재 브라우저는 HTML 4와 XHTML 1을 모두 지원합니다. 마찬가지로 향후 브라우저에서는 HTML 5와 XHTML 2를 모두 지원할 수도 있습니다. 두 표준 모두 지지자가 있습니다.
HTML 4보다 XHTML 1.1에 더 관심이 있고 다양한 장치를 지원할 수 있는 문서를 만들고 싶다면 XHTML 2를 선호할 수 있습니다. 단순히 XML 표준을 준수하기 때문에 XHTML 1을 사용하고 있고 HTML 5의 새로운 기능을 선호한다면 XHTML 5(XML로 재작성된 HTML 5)가 최선의 선택일 수 있습니다.
HTML 5는 HTML 4를 사용하여 대화형 웹 애플리케이션을 만드는 개발자들에게 인기가 있습니다. 이 접근 방식은 WYSIWYG 문서 편집기를 사용하는 사이트에 더 적합합니다. 그러나 경우에 따라서는 HTML 4와 XHTML 1이 오랫동안 공존할 가능성이 높습니다.                  

더 많은 관련 튜토리얼을 보려면 Html5 비디오 튜토리얼
을 방문하세요.