HTML4.01, XHTML1.0과 HTML5의 차이점

새롭게 등장한 콘텐츠 모델(Content Models)

–명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화하였는데, 이를 HTML5의 콘텐츠 모델(Content Models)이라고 함.

 

콘텐츠 모델의 카테고리(Category)

–HTML5의 카테고리(Category)에는 Sectioning Root, Metadata Content, Flow Content, Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content, Script-supporting Elements, Transparent Content 등의 그룹이 있으며, 하나의 요소가 여러 그룹에 속해 있을 수도 있고, 그렇지 않을 수도 있음

 

 

HTML4.01, XHTML1.0, 그리고 HTML5는 웹 표준의 발전과 웹 기술의 변화에 따라 각각의 특징과 새로운 기능을 가지고 있습니다. 아래는 이들 간의 주요 차이점을 설명합니다

1. **구문과 문법:**
   - **HTML4.01:** SGML(Standard Generalized Markup Language)을 기반으로 하는 마크업 언어. 규칙이 비교적 유연하게 정의되어 있음.
   - **XHTML1.0:** XML(Extensible Markup Language)을 기반으로 하며, XML의 엄격한 문법을 따라야 함. 태그는 항상 닫혀 있어야 하며, 소문자로 작성되어야 함.
   - **HTML5:** SGML과 XML을 기반으로 하지 않음. 더 간결하고 엄격한 문법을 가지고 있지만, XHTML1.0처럼 닫힌 태그나 소문자 강제는 없음.

2. **구조와 요소:**
   - **HTML4.01:** 구조화를 위해 `<div>`와 `<span>`이 주로 사용되며, 시맨틱한 의미 부여가 부족.
   - **XHTML1.0:** 시맨틱한 요소를 도입하였으나, 아직 전체적인 시맨틱 웹 지원이 미흡.
   - **HTML5:** 시맨틱 요소 도입으로 더 구조적이고 의미 있는 웹 페이지를 작성할 수 있음(`<header>`, `<nav>`, `<section>`, `<article>`, `<footer>` 등).

3. **미디어 및 폼 요소:**
   - **HTML4.01:** 미디어 처리 및 폼 요소의 기능이 제한적.
   - **XHTML1.0:** CSS를 이용하여 레이아웃을 조정하며, 미디어 요소에도 제한이 있음.
   - **HTML5:** 통합된 미디어 요소(`<audio>`, `<video>`)와 개선된 폼 요소(검증, 플레이스홀더, 날짜 선택 등)를 도입.

4. **클라이언트 측 스크립팅:**
   - **HTML4.01:** JavaScript를 사용하여 클라이언트 측 스크립팅이 가능하지만, API 및 기능이 제한적.
   - **XHTML1.0:** JavaScript를 사용 가능하며, 표준화된 DOM(Document Object Model)을 통해 문서에 접근 가능.
   - **HTML5:** Web Storage, Web Workers, Canvas API 등을 통해 클라이언트 측 기능이 크게 향상.

5. **API 및 기능:**
   - **HTML4.01 및 XHTML1.0:** 특별한 API나 추가적인 기능이 제한적.
   - **HTML5:** 다양한 API 및 기능 도입으로 웹 애플리케이션의 성능과 기능을 크게 향상. Geolocation API, WebSockets, WebRTC 등이 포함.

6. **웹 애플리케이션 및 모바일 지원:**
   - **HTML5:** 웹 애플리케이션을 위한 풍부한 기능 및 모바일 기기 지원이 향상되었음. 반응형 웹 디자인과 모바일 최적화에 대한 지원이 크게 개선.

HTML5는 웹 표준을 더욱 발전시키고, 다양한 디바이스 및 플랫폼에서 일관된 경험을 제공하며, 풍부한 웹 애플리케이션을 개발하기 위한 다양한 도구와 기능을 제공합니다.