XML과 XHTML의 차이점은 무엇인가요?

XML, XHTML을 이해하기 위해선 먼저 HTML을 이해할 필요가 있다.

 

HTML

HyperText Markup Language의 약자로, 하이퍼텍스트를 마크업하는 언어

 

이때 하이퍼텍스트는 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을,

 

마크업은 태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 구분해주는 것을 말한다.

 

즉, HTML은 다른 문서나 사이트로 이동할 수 있는 링크를 태그를 이용해 나타내는 언어로 이해할 수 있다. 

 

HTML을 이용하면 텍스트, 이미지, 버튼, 드롭다운 벅스 등을 렌더링하여 애플리케이션 UI를 생성할 수 있다.

 

XML

eXtensible Markup Language의 약자로, 확장 가능한 마크업 언어

 

이때 확장 가능하다는 것은 문서 작성자가 임의의 태그를 정의하고 사용할 수 있음을 의미한다.

 

예를 들어 HTML에서는 <p>, <br>과 같이 HTML 표준에 정의된 태그만 사용할 수 있지만

 

XML에서는 <course>, <grade>와 같이 문서 작성자가 임의의 태그를 정의하고 사용할 수 있다.

 

그렇다면 도대체 왜 마크업 언어에 확장 가능성이란 개념을 도입하게 된 걸까?

 

예를 들어 다음의 데이터를 표현하고자 한다고 해보자.

기초프로그래밍

홍길동

2020221224

88

B

 

HTML은 다음과 같은 코드로 위 데이터를 표현할 수 있다.

<table>
  <tbody>
    <tr>
      <td>기초프로그래밍</td>
      <td>홍길동</td>
      <td>2020221224</td>
      <td>88</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

 

위 코드는 과목, 이름, 학번, 점수, 학점으로 상이한 데이터 구조를 <td>라는 동일한 태그로 표현하고 있다.

 

즉, HTML로는 데이터를 표현하기만 할 뿐 데이터의 구조를 설명하지는 못 하는 것이다.

 

반면, XML은 다음과 같은 코드로 위 데이터를 표현할 수 있다.

<course>기초프로그래밍</course>
<name>홍길동</name>
<number>2020221224</number>
<score>88</score>
<grade>B</grade>

 

위 코드는 <course>, <name>, <number>, <score>, <grade>를 이용해 상이한 데이터 구조를 구분하고 있다.

 

즉, XML로는 임의의 태그를 정의하고 사용함으로써 데이터의 구조를 설명할 수 있는 것이다.

 

이는 다음과 같이 요약할 수 있다.

• ① 데이터 관점에서 보면 HTML은 데이터를 최종 사용자에게 표현하는 방법을 결정하고
• XML은 데이터의 구조를 설명한다.

 

XML과 HTML은 데이터 관점에서 뿐만 아니라 ② 문법에서도 차이를 보인다.

 

XML은 HTML보다 엄격한 문법을 준수하는데, 그 구체적인 내용은 다음과 같다.

• XML은 단 하나의 루트 요소를 가져야 한다.
• 모든 XML 요소는 종료 태그를 가져야 한다.
• 시작 태그와 종료 태그에 사용된 태그 이름이 대소문자까지 완벽하게 일치해야 한다.
• 모든 XML 요소의 여닫는 순서가 반드시 정확하게 지켜져야 한다.
• 모든 속성의 속성값이 따옴표로 둘러싸여 있어야 한다.
• XML은 띄어쓰기를 인식한다.

 

이러한 XML을 이용하면

• 다양한 유형의 애플리케이션이 이해하는 방식으로 데이터와 그 구조를 저장하고 교환
• 다양한 유형의 애플리케이션 사이에서 뿐만 아니라, 기계와 사람이 모두 이해할 수 있는 방식으로 데이터를 인코딩

할 수 있다.

 

XHTML

eXtensible HyperText Markup Language의 약자로, XML 기반의 HTML

 

XTHML은 HTML을 XML의 엄격한 문법 규칙에 맞추어 재정의한 것으로, HTML과 동등한 표현 능력을 가진다.

 

먼저 HTML과 동등한 표현 능력을 가졌음에도 새롭게 XHTML이 등장하게 된 배경을 알아보자.

 

기술의 발달에 따라 웹 콘텐츠가 기존의 전통 컴퓨터에서 벗어나 다양한 이동 기기에서 이용되기 시작하며

 

느슨한 HTML을 지원하는 데 필요한 자원이 부족한 환경이 생겨나기 시작했다.

 

즉, 기존의 전통 컴퓨터에서는 유연하고 느슨한 문법을 허용하는 HTML을 지원하는 데 필요한 자원을 충분히 제공할 수 있었으나

 

모바일 컴퓨팅과 같은 이동 기기에서는 HTML이 필요로 하는 자원을 충분히 제공할 수 없었던 것이다.

 

이에 따라 보다 엄격한 문법을 준수하는 HTML에 대한 필요성이 대두되었고, 그 결과로 제안된 것이 XHTML이다.*

 

그렇다면 HTML의 느슨한 문법과 XHTML의 엄격한 문법은 구체적으로 어떻게 다를까?**

 

태그를 닫는 방식

• HTML은 <img src="">와 같이 태그를 닫지 않아도 되지만
• XHTML은 <img src="" />와 같이 태그를 반드시 닫아야 한다.

속성 값의 단축 표기 방식

• HTML은 <div contenteditable></div>와 같이 속성 값의 단축 표기 방식을 허용하지만,
• XHTML은 <div contenteditable='true'></div>와 같이 속성 값의 단축 표기 방식을 허용하지 않는다.

속성 값의 따옴표 표기 방식

• HTML은 <div contenteditable=true></div>와 같이 속성 값을 따옴표로 감싸지 않아도 되지만
• XHTML은 <div contenteditable='true'></div>와 같이 속성 값을 반드시 따옴표로 감싸야 한다.

대소문자 구분 여부

• HTML은 <diV></diV>와 같이 요소와 속성의 대소문자를 구분하지 않지만
• XHTML은 <div></div>와 같이 요소와 속성의 대소문자를 구분한다.

잘못된 중첩 허용 여부

• HTML은 잘못된 중첩이 렌더링에 영향을 끼치지 않지만
• XHTML은 잘못된 중첩을 허용하지 않는다.

이러한 XHTML을 이용하면 웹 문서의 호환성과 표준 준수를 강화할 수 있다.

 

* 그러나 XHTML 이후 HTML5가 등장하면서 XHTML이 HTML5에 거의 포함되게 되었고, 이러한 이유로 현재는 XHTML보다 HTML5를 많이 사용하는 추세이다.

 

** XHTML은 HTML을 XML의 문법에 맞추어 재정의한 것으로, XHTML의 문법은 XML의 문법과 유사하다.

XHTML은 HTML의 버전 중 하나가 아니라, HTML과 별개로 분리된 표준이다.

 

앞서 HTML, XML, XHTML에 대해서 길게 알아보았으니, 이제 글의 제목에 대한 답변을 정리해보자.

XML은 데이터를 저장하고 전송하기 위한 언어로, 사용자가 직접 태그를 정의하고 이를 이용해 데이터 구조를 설계하고 생성할 수 있다. XML은 데이터를 저장하고 교환하는 RSS 피드, SOAP 메시지 등의 데이터 형식으로 사용된다.

반면 XHTML은 XML을 기반으로 재정의한 HTML로, XML과의 호환성을 강화하고 HTML보다 엄격한 문법 검사를 실시한다. XHTML은 HTML과 동등한 표현 능력을 가지고 있으므로 웹 페이지를 작성하는 데 사용된다.

 

 

 

 

 

---

다음 자료를 공부하여 정리한 글로, 아직 많이 부족해 틀린 내용이 있을 수도 있습니다.

 

혹시 있다면 댓글로 알려주세요. 수정하고 더 공부해나가겠습니다-

 

XHTML

XML 문법

XML과 XHTML의 차이

HTML, XHTML 그리고 XML의 비교

HTML과 XML의 차이점은 무엇인가요?

[XML 강좌] 2. Extensible이란 무엇인가?