치춘짱베리굿나이스

HTML vs XML 본문

ClientSide/html css

HTML vs XML

치춘 2022. 10. 5. 14:26

HTML과 XML 비교하기

익숙한 HTML과 조금 생소한 (사실 안드로이드 할 때 조금 했었던…) XML을 비교하며 각각의 특성을 알아볼라구 한다

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>하이? 이것은 테스트이다</span>
    <div>작은 프론트엔드 개발자들아</div>
</body>
</html>
  • Hyper Text Markup Language
  • 가장 최신 버전은 HTML5이다
  • 데이터의 표현에 주 목적을 두고 있다
    • 웹 페이지 및 웹 응용 프로그램의 구조를 손쉽게 정의하기 위한 마크업 언어이다
    • 어느 데이터가 어느 위치에 들어갈지를 정의했다고 생각하면 쉽다
  • 페이지를 표현하기 위해 사전 정의된 태그 세트가 있고, 각 태그별로 의미도 이미 정의되어 있다 (정적)
    • 따라서 이미 정의된 태그 내에서만 사용해야 한다
    • 브라우저들은 이 태그들을 읽어 해독하고, 이에 맞춰서 페이지를 표현한다
  • 간단한 작성 오류 (태그 안 닫은 등) 정도는 눈감아준다
  • whitespace를 다 지워버린다
  • 대소문자를 구분하지 않는다
  • 닫을 필요가 없는 태그도 있다
    • br, hr
  • 비교적 용량이나 코드 길이가 짧다
  • 자바스크립트 코드를 파싱하는 데 추가적인 어플리케이션이 필요치 않다

XML

<head>
    <hair>머리카락</hair>
    <face>👁👄👁</face>
</head>
<neck />
<body>
    <arm>팔</arm>
    <arm>팔</arm>
    <breast>가슴</breast>
    <stomach>배</stomach>
</body>
<leg />
<leg />
  • Extensible Markup Language
  • 데이터의 전달에 주 목적을 두고 있다
    • 플랫폼 독립적이며, 비단 웹이 아니더라도 XML 태그 번역만 가능하다면 어디서든 사용할 수 있다
    • 데이터베이스, 프로그램 및 응용프로그램, 모바일 등 정보 교환이 필요한 장치 및 플랫폼간 데이터 전달을 위해 사용한다
  • 사용자가 원하는 대로 태그를 정의할 수 있다 (동적)
    • 따라서 태그 종류에 제한이 없다
    • 미리 정의된 태그도 없다
  • 작성 오류를 용납치 않는다
  • whitespace를 지우지 않는다
  • 대소문자를 구분한다
  • 사용된 태그를 모두 닫아주어야 한다
  • 비교적 코드 길이가 긴 편이다
  • 자바스크립트 코드를 파싱하려면 DOM (Document Object Model) 이 필요하다

공통점

  • 마크업 언어이다
  • SGML (Standard Generalized Markup Language) 로부터 파생된 마크업 언어이다
  • 태그 쌍 (또는 단일 태그 - self-closing tag) 들로 문서가 구성된다

참고 자료

HTML과 XML의 차이점 - 하나몬

HTML vs XML - GeeksforGeeks

XML과 HTML

Crocus

'ClientSide > html css' 카테고리의 다른 글

[토막상식] CSS에서 형제 클래스는 우선순위가 동일하다  (0) 2023.06.16
Semantic하게 HTML 작성해보기  (0) 2022.12.02
가상선택자 ::before, ::after  (0) 2022.05.09
CSS 선택자  (0) 2022.05.09
미디어 쿼리  (2) 2022.04.06
Comments