웹 페이지를 만들려고 검색하면 가장 먼저 만나는 단어가 HTML입니다. 그런데 정작 “HTML이 프로그래밍 언어인가”라는 질문에는 아니라고 답해야 합니다. 이 글에서는 HTML의 정확한 정체, 브라우저가 HTML 파일을 받아 화면을 그리기까지의 순서, 그리고 CSS·자바스크립트와 어떻게 역할을 나눠 갖는지를 정리합니다.
HTML은 계산하지 않고 표시합니다
HTML은 HyperText Markup Language의 줄임말입니다. 여기서 Markup은 원고에 빨간 펜으로 “여기는 제목”, “여기는 인용문”이라고 표시하는 편집자의 작업을 뜻합니다. 즉 HTML은 글자에 계급과 의미를 붙여주는 표시 체계입니다.
프로그래밍 언어에는 조건 분기와 반복, 계산이 있습니다. HTML에는 그것이 없습니다. if도 없고 덧셈도 못 합니다. 대신 “이 문장은 문서의 큰 제목이다”, “이 단어는 강조된 부분이다”라고 선언하는 일만 합니다. 그래서 마크업 언어라고 부르고, 프로그래밍 언어와는 구분합니다.
<h1>카드뉴스노트</h1>
<p>코딩 입문자를 위한 강좌를 정리하는 공간입니다.</p>위 두 줄에서 <h1>은 “가장 큰 제목”, <p>는 “하나의 문단”이라는 의미를 붙인 것입니다. 글자 크기가 커 보이는 것은 결과일 뿐, HTML이 지시한 것은 크기가 아니라 역할입니다. 이 구분을 처음부터 잡아두면 나중에 CSS를 배울 때 훨씬 수월합니다.
브라우저가 HTML을 화면으로 바꾸는 다섯 단계
주소창에 주소를 입력하면 브라우저는 대략 다음 순서로 움직입니다.
| 순서 | 하는 일 |
|---|---|
| 1. 요청 | 서버에 HTML 파일을 달라고 요청합니다. |
| 2. 파싱 | 받은 글자를 위에서 아래로 읽으며 태그를 해석합니다. |
| 3. DOM 생성 | 태그를 부모·자식 관계의 나무 구조로 메모리에 만듭니다. |
| 4. 스타일 계산 | CSS를 읽어 각 요소의 색·크기·위치를 정합니다. |
| 5. 렌더링 | 계산된 결과를 실제 픽셀로 화면에 그립니다. |
3번에서 만들어지는 나무 구조를 DOM이라고 부릅니다. 우리가 작성한 HTML 문서를 브라우저가 다룰 수 있는 객체 형태로 바꿔 놓은 것입니다. 나중에 자바스크립트로 화면을 바꾸는 작업은 사실 HTML 파일을 고치는 것이 아니라 이 DOM을 고치는 것입니다. 이 부분은 자바스크립트로 HTML 문서 다루기에서 이어집니다.
HTML·CSS·자바스크립트의 역할 분담
웹 페이지 하나는 보통 세 가지 언어가 나눠 만듭니다. 강좌 소개 카드를 예로 들면 이렇게 갈립니다.
<!-- HTML: 무엇이 있는가 -->
<div class="course-card">
<h2>HTML 기초 5강</h2>
<p>총 5편, 예상 학습 시간 90분</p>
<button id="startBtn">수강 시작</button>
</div>HTML은 “제목이 있고 설명이 있고 버튼이 있다”까지만 말합니다. 그 카드에 흰 배경과 둥근 모서리를 주는 것은 CSS의 몫이고, 버튼을 눌렀을 때 다음 강의로 넘어가게 만드는 것은 자바스크립트의 몫입니다. 순서대로 구조 → 표현 → 동작입니다.
이 분담을 지키지 않으면 관리가 어려워집니다. 예를 들어 글자를 굵게 만들려고 HTML 안에 색과 크기를 직접 적어 넣으면, 나중에 디자인을 바꿀 때 문서 전체를 열어 하나하나 고쳐야 합니다. 자바스크립트 쪽 이야기는 자바스크립트 입문에서 따로 다룹니다.
HTML5로 오면서 달라진 점
지금 쓰는 표준은 HTML5입니다. 이전 버전과 비교하면 입문자 입장에서 체감되는 변화는 세 가지입니다.
첫째, 문서 첫 줄이 아주 짧아졌습니다. 예전에는 알 수 없는 주소가 섞인 긴 선언문을 써야 했지만 지금은 <!DOCTYPE html> 한 줄이면 끝입니다.
둘째, 의미를 담은 태그가 늘었습니다. 예전에는 머리말이든 메뉴든 전부 <div>로 묶었지만, 지금은 <header>, <nav>, <article>처럼 이름만 봐도 역할을 알 수 있는 태그를 씁니다.
셋째, 별도 프로그램 없이 동영상과 소리를 재생할 수 있게 됐습니다. <video>와 <audio>가 표준에 들어왔기 때문입니다.
첫 파일 만들어 보기와 흔한 실수
메모장이든 어떤 편집기든 좋습니다. 아래 내용을 그대로 붙여 넣고 index.html로 저장한 뒤 더블클릭하면 브라우저가 열립니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 강좌 노트</title>
</head>
<body>
<h1>오늘 배운 것</h1>
<p>HTML은 문서에 의미를 붙이는 마크업 언어입니다.</p>
</body>
</html>입문자가 이 단계에서 가장 자주 겪는 사고는 닫는 태그 누락입니다. <p>만 쓰고 </p>를 빠뜨리면 브라우저는 오류 메시지를 띄우지 않습니다. 대신 뒤에 오는 내용까지 전부 그 문단에 속한 것으로 판단해 버립니다. 화면이 이상한데 오류는 없는 상황이 여기서 생깁니다.
또 하나는 한글이 깨지는 문제인데, 원인은 대부분 <meta charset="UTF-8">을 빼먹은 것입니다. 이 한 줄이 “이 문서의 글자는 UTF-8 방식으로 저장돼 있다”고 브라우저에 알려줍니다. 문서 골격을 한 줄씩 뜯어보는 내용은 HTML 문서 구조에서 이어집니다.
핵심 정리
- 마크업 언어 — HTML은 계산하는 언어가 아니라 내용에 의미와 역할을 표시하는 언어입니다.
- DOM — 브라우저가 HTML을 읽어 만든 나무 구조이며, 자바스크립트가 화면을 바꿀 때 실제로 손대는 대상입니다.
- 역할 분담 — 구조는 HTML, 표현은 CSS, 동작은 자바스크립트가 맡습니다.
- HTML5 — 짧아진 DOCTYPE, 의미가 담긴 태그, 내장 동영상·오디오 지원이 특징입니다.
- 조용한 오류 — 닫는 태그를 빠뜨려도 경고가 없으므로 태그 짝을 스스로 확인하는 습관이 필요합니다.