파일 형식
HTML이란? 역사, 파싱, 그리고 DOM
HTML은 웹 페이지의 구조를 기술하는 마크업 언어로, 거의 모든 웹사이트의 바탕에 있습니다. 그 역사와 브라우저의 처리 방식, HTML을 문서로 바꿀 때 주의할 점을 다룹니다.
작성자: Hemen Dönüştür Editör Ekibi게시일: 5분 분량
지금 보고 있는 이 페이지를 포함해 웹에서 보는 거의 모든 것은 HTML로 작성되어 있습니다. HTML(HyperText Markup Language)은 프로그래밍 언어가 아니라 문서의 구조를 기술하는 마크업 언어입니다. 여기는 제목, 여기는 문단, 이것은 링크, 이것은 표라고 표시하는 것이죠. 그리고 HTML은 웹사이트에만 쓰이지 않습니다. 이메일 템플릿, 도움말 문서, 내보낸 보고서, "웹 페이지로 저장"한 문서에도 등장합니다. 이 글에서는 HTML의 역사, 브라우저가 HTML을 읽어 화면에 그리는 방식, 자주 겪는 문제, HTML 파일을 Word나 PDF로 변환할 때 알아 둘 점을 다룹니다.
HTML이란 무엇인가요?
HTML은 태그로 내용을 표시하는 일반 텍스트 언어입니다. 태그는 꺾쇠괄호 안에 쓰며, 대부분 여는 태그와 닫는 태그가 짝을 이뤄 하나의 요소를 만듭니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>예시 페이지</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이 문단에는 <a href="https://example.com">링크</a>가 있습니다.</p>
</body>
</html><head> 부분에는 페이지에 관한 정보(문자 인코딩, 제목, 스타일시트)가, <body>에는 눈에 보이는 내용이 들어갑니다. 모양은 CSS로, 동작은 JavaScript로 더합니다. 이 분업에서 HTML은 내용이 무엇인지, CSS는 어떻게 보이는지, JavaScript는 무엇을 하는지를 담당합니다.
간략한 역사
HTML은 팀 버너스리(Tim Berners-Lee)가 1989년 CERN에서 제안한 월드 와이드 웹 프로젝트의 일부로 탄생했습니다. 그의 첫 브라우저는 1990년 NeXT 컴퓨터에서 실행되었습니다. 초기 버전의 HTML은 공식 표준이라기보다 CERN에서 문서화한 태그 목록에 가까웠습니다. 그 뒤의 주요 이정표는 다음과 같습니다.
- 1995년 11월, HTML 2.0: 팀 버너스리와 댄 코널리(Dan Connolly)가 쓴 RFC 1866이 처음으로 HTML을 공식 표준으로 정의했습니다.
- 1997년 1월, HTML 3.2: W3C가 업계 공통 사양으로 공식 승인한 버전입니다.
- 1999년 12월 24일, HTML 4.01: 오랫동안 웹의 핵심 사양으로 쓰였으며, W3C는 2018년 3월 27일 이를 공식적으로 대체된 사양으로 표시했습니다.
- 2014년 10월 28일, HTML5: W3C가 HTML5를 권고안(Recommendation)으로 발표했습니다. 비디오, 오디오, 의미 있는 구획 요소, 정밀하게 정의된 파싱 알고리즘이 함께 표준화되었습니다.
- 2019년 5월 28일, 단일 표준: W3C와 브라우저 제조사들이 만든 커뮤니티 WHATWG가 양해 각서를 체결했습니다. 이에 따라 HTML과 DOM은 주로 WHATWG에서 버전 번호 없는 "Living Standard"로 개발됩니다.
그래서 오늘날 "HTML5"는 사실상 "현재의 HTML"을 뜻하며, 공식 사양은 계속 갱신되는 HTML Living Standard입니다.
얼마나 널리 쓰일까요? 2026년 10월 15일 기준 W3Techs 통계에 따르면 마크업 언어가 확인된 웹사이트의 97.8%가 HTML을 사용합니다. 같은 출처에 따르면 문자 인코딩이 확인된 웹사이트의 99.1%가 UTF-8을 씁니다.
브라우저는 HTML을 어떻게 처리하나요?
HTML이 다른 문서 형식과 구별되는 점은 잘못 작성된 문서도 모든 브라우저에서 똑같이 해석된다는 것입니다. HTML Living Standard는 이를 위해 상세한 파싱 모델을 정의합니다.
- 인코딩 결정: 브라우저는 먼저 들어온 바이트를 문자로 바꿔야 합니다. BOM, 서버의 HTTP 헤더에 선언된 인코딩, 문서 앞 1024바이트 안의
<meta charset>선언을 차례로 확인하고, 아무것도 없으면 추정합니다. - 토큰화: 상태 기계가 텍스트를 시작 태그, 종료 태그, 주석, DOCTYPE, 문자 같은 토큰으로 나눕니다.
- 트리 구성: 토큰은 "in body"나 "in table" 같은 삽입 모드에 따라 처리됩니다. 파서는 열린 요소들의 스택을 유지하며, 잘못 중첩된 태그를 정해진 규칙에 따라 바로잡습니다.
- DOM: 그 결과 문서 객체 모델(DOM)이라는 객체 트리가 만들어집니다. CSS는 이 트리에 적용되고, JavaScript는 이 트리를 읽고 수정합니다.
사양은 파싱 오류에 대한 오류 처리가 명확히 정의되어 있다고 분명히 밝힙니다. 예를 들어 <div/>라고 쓰면 HTML은 끝의 슬래시를 무시하므로 뒤따르는 요소들이 그 div 안에 들어갑니다. 닫히지 않은 <p>는 다음 블록 요소가 나오면 자동으로 닫힙니다. 이런 관용 덕분에 불완전한 페이지가 셀 수 없이 많아도 웹이 돌아가지만, HTML을 문서 형식으로 변환하는 도구도 같은 규칙을 따라야 한다는 뜻이기도 합니다.
HTML은 어디에 쓰이나요?
- 웹사이트와 웹 앱: 모든 웹 페이지의 뼈대.
- 이메일: 서식 있는 이메일과 뉴스레터는 HTML로 작성됩니다.
- 문서화: 도움말 페이지, 소프트웨어 문서, Markdown으로 생성한 사이트.
- 전자책: EPUB 형식은 내용을 XHTML 문서로 묶습니다.
- 보고서와 내보내기: 많은 프로그램이 보고서를 HTML로 만들며, Word의 "웹 페이지로 저장" 결과물도 HTML입니다.
장점과 단점
| 장점 | 단점 |
|---|---|
| 어떤 기기에서든 브라우저로 열림 | 모양이 외부 CSS, 글꼴, 이미지에 의존 |
| 공개, 무료이며 계속 갱신되는 표준 | 페이지, 여백 같은 인쇄 개념에 약함 |
| 화면 크기에 맞춰 바뀌는 유동적 레이아웃 | 단일 파일로 옮기기 어려움(이미지가 별도 파일) |
| 접근성과 검색 엔진을 위한 의미 구조 | JavaScript가 들어 있으면 주의가 필요함 |
| 일반 텍스트라 버전 관리와 잘 맞음 | 최종본을 고정하는 용도로는 PDF보다 부적합 |
HTML은 어떤 프로그램으로 여나요?
Chrome, Firefox, Safari, Edge 등 모든 브라우저가 HTML을 표시합니다. 소스를 편집하려면 Visual Studio Code 같은 코드 편집기나 아무 텍스트 편집기면 충분합니다. Microsoft Word와 LibreOffice Writer도 HTML 파일을 열어 문서처럼 편집할 수 있지만, 복잡한 CSS 레이아웃은 단순화됩니다.
자주 겪는 문제와 해결 방법
특수 문자가 깨져 보입니다
페이지의 인코딩이 없거나 잘못된 경우입니다. <head> 윗부분에 <meta charset="utf-8">를 넣고, 파일이 실제로 UTF-8로 저장되어 있는지 확인하세요. 서버가 다른 인코딩을 선언하고 있다면 HTTP 헤더도 고쳐야 합니다.
저장한 페이지에 이미지나 스타일이 없습니다
HTML 파일은 이미지와 CSS를 별도 파일이나 인터넷 주소에서 불러오는 경우가 많습니다. .html 파일만 옮기면 이 링크들이 끊어집니다. 브라우저의 "웹 페이지, 전체" 저장 옵션을 쓰거나 이미지를 문서에 내장하세요.
인쇄하면 페이지가 깨집니다
화면용으로 설계된 레이아웃은 종이에 맞지 않을 수 있습니다. CSS에서 @media print 규칙을 정의하고 @page로 용지 크기와 여백을 지정하면 인쇄 결과가 크게 좋아집니다.
HTML 파일 변환 팁
저희 변환기에서 HTML 파일은 서버에 업로드되고 30분 이내에 삭제됩니다. 파일을 읽을 때 인코딩은 BOM, 그다음 <meta charset> 선언, 그다음 내용 자체의 순서로 감지되며, UTF-8이 아닌 구형 터키어 페이지는 Windows-1254로 읽습니다. 문서의 <body> 내용과 페이지의 <style> 블록은 유지되고, <body> 태그가 없는 HTML 조각은 그대로 처리됩니다.
- HTML을 PDF로 변환은 브라우저 엔진에서 실행됩니다. 인쇄용 CSS가 적용되고,
@page로 정의한 페이지 크기를 따르며(없으면 A4), 배경색도 인쇄됩니다. 보안을 위해 JavaScript는 실행되지 않고 인터넷에 있는 이미지, 글꼴, 스타일시트도 내려받지 않으며, 문서에 내장된 리소스(data: URI)만 사용합니다. 결과물에 이미지가 필요하다면 HTML에 내장하세요. - HTML을 Word로 변환은 LibreOffice를 사용해 제목, 목록, 표, 정렬, 내장 이미지를 DOCX로 옮깁니다. 복잡한 CSS 레이아웃(flex, grid)은 Word에 대응하는 것이 없어 단순화됩니다.
- HTML을 Markdown으로 변환하면 웹 페이지나 도움말 글을 문서 저장소로 옮기기에 좋습니다. 제목, 강조, 목록, 표, 링크, 코드 블록은 유지되고 스타일 정보는 빠집니다.
- 반대 방향으로 Word를 HTML로 변환하면 이미지를 파일 안에 내장하고 문자 인코딩을 선언한 독립된 단일 HTML 문서가 만들어지므로, 브라우저에서 특수 문자가 올바르게 표시됩니다.
자주 묻는 질문
HTML은 프로그래밍 언어인가요?
아닙니다. HTML은 마크업 언어로, 내용의 구조를 기술할 뿐 반복, 조건, 계산이 없습니다. 페이지에 동작을 더할 때는 JavaScript를 씁니다.
HTML5와 HTML은 무엇이 다른가요?
HTML5는 2014년에 W3C 권고안이 된 주요 버전의 이름입니다. 2019년부터 HTML은 WHATWG에서 버전 번호 없이 "HTML Living Standard"로 개발되고 있습니다. 실제로 오늘날 HTML5와 HTML은 같은 것을 뜻합니다.
HTML 파일은 어떻게 여나요?
더블클릭하면 기본 브라우저에서 열립니다. 소스 코드를 보려면 텍스트 편집기로 열거나 브라우저의 "페이지 소스 보기" 옵션을 쓰세요.
HTML을 PDF로 변환하면 왜 이미지가 빠지나요?
이미지를 인터넷 주소에서 불러오는 경우, 저희 변환기는 보안상 이를 내려받지 않습니다. 이미지를 data: URI로 HTML에 내장하거나, 먼저 문서를 Word로 변환한 뒤 거기서 이미지를 추가하세요.
HTML 파일은 열어도 안전한가요?
HTML에는 JavaScript가 들어갈 수 있으므로 출처를 알 수 없는 파일은 조심하세요. 이메일 첨부 파일로 와서 비밀번호를 요구하는 HTML 페이지는 흔한 피싱 수법입니다.
출처
- WHATWG: HTML Living Standard, Parsing HTML documents
- W3C와 WHATWG 양해 각서 (2019년 5월 28일)
- W3C 보도 자료: HTML5 Recommendation (2014년 10월 28일)
- W3C: HTML 4.01 Specification
- IETF RFC 1866: Hypertext Markup Language - 2.0
- Dave Raggett: A history of HTML
- W3Techs: Usage statistics of markup languages for websites
