웹 개발을 배우다 보면 가장 먼저 마주치는 두 가지 마크업 언어, 바로 HTML과 XML입니다. 이름은 비슷하지만 두 언어의 목적과 동작 방식은 완전히 다릅니다. 이 글에서는 HTML과 XML의 핵심 개념과 주요 차이점을 예제 코드와 함께 알아보겠습니다.
HTML이란?
HTML(HyperText Markup Language)은 웹 페이지와 웹 애플리케이션을 만들기 위한 표준 마크업 언어입니다. 주요 특징은 다음과 같습니다.
- 데이터를 화면에 표시(display)하는 데 중점을 둡니다.
- 정적(static) 웹 페이지 제작에 적합합니다.
- 하이퍼텍스트(HyperText)를 통해 여러 웹 페이지 간의 링크를 정의할 수 있습니다.
- 마크업 언어는 태그(tag)를 사용해 텍스트 문서에 구조를 부여하며, 시스템이 내용을 이해하고 활용할 수 있도록 주석 역할을 합니다.
- 사소한 문법 오류는 무시하고 렌더링을 계속 진행합니다.
- 대소문자를 구분하지 않습니다.
- 사용할 수 있는 태그의 종류가 정해져 있으며, 모든 태그는 미리 정의(predefined)되어 있습니다.
- 공백(white space)을 그대로 보존하지 않습니다.
- 일부 빈 태그를 제외하면 닫는 태그(closing tag)가 반드시 필요하지 않습니다.
HTML 예제
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>title</h1>
<p>A sample</p>
</body>
</html>
XML이란?
XML(eXtensible Markup Language)은 마크업 언어를 정의할 수 있는 프레임워크를 제공하는 확장형 마크업 언어입니다. HTML과 달리 데이터 자체를 다루는 데 특화되어 있습니다.
- 데이터를 저장하고 전송(transport)하는 데 중점을 둡니다.
- 대소문자를 엄격하게 구분하며, 문법 오류를 허용하지 않습니다.
- 태그를 사용자가 직접 정의할 수 있고, 필요에 따라 자유롭게 확장할 수 있습니다.
- 공백(white space)을 그대로 보존합니다.
- 태그는 데이터를 '설명'하는 용도이며, 화면 표시에는 사용되지 않습니다.
- 모든 요소에는 반드시 닫는 태그가 필요합니다.
- 데이터를 전송할 수 있어 동적(dynamic)인 특성을 지닙니다.
- 설계 목표는 단순성(simplicity), 일반성, 인터넷 환경 전반에서의 사용성(usability)에 초점을 맞춥니다.
- 유니코드(Unicode)를 지원하여 다국어 데이터 처리가 가능합니다.
- 웹 서비스(Web Service)에 필요한 임의의 데이터 구조를 표현하는 데도 활용됩니다.
XML 예제
<?xml version = "1.0"?>
<contactinfo>
<address category = "type">
<name>Mark</name>
<College>MIT</College>
<mobile>6787878</mobile>
</address>
</contactinfo>
실행 결과
Mark MIT 6787878
HTML과 XML 비교 요약
두 언어의 차이점을 표로 정리하면 다음과 같습니다.
| 구분 | HTML | XML |
|---|---|---|
| 주요 목적 | 데이터 표시 | 데이터 저장 및 전송 |
| 대소문자 구분 | 구분하지 않음 | 엄격히 구분 |
| 오류 처리 | 사소한 오류 무시 | 오류 허용 안 함 |
| 태그 | 미리 정의된 태그만 사용 | 사용자 정의 태그 사용 |
| 공백 처리 | 보존하지 않음 | 그대로 보존 |
| 닫는 태그 | 필수 아님 | 반드시 필요 |
| 페이지 성격 | 주로 정적 | 동적 |
마무리
정리하면, HTML은 사람에게 정보를 보여주는 언어이고, XML은 기계 간에 데이터를 주고받기 위한 언어입니다. 웹 화면을 구성할 때는 HTML을, 서로 다른 시스템 간에 구조화된 데이터를 교환할 때는 XML을 사용하는 것이 적합합니다. 두 언어의 역할을 명확히 이해하면 웹 개발 전반을 더 깊이 있게 이해할 수 있습니다.