HTML 언어 의미와 본질

웹 개발을 시작하시거나 웹을 공부하실 때 가장 자주 접하셨던 단어는 아마도 HTML일 것입니다. 그만큼 HTML은 웹을 이루는 가장 기본적인 요소이며 중요한 부분입니다. 하지만 막상 HTML이 무엇인지 정확히 설명하려면 조금 헷갈리기도 합니다. HTML은 무엇을 뜻하는 약자인지, 또 HTML은 문서 자체를 이르는 말인지 아니면 프로그래밍 언어인지 여러 질문이 떠오릅니다. HTML이란 무엇일까요?

이번 시간에는 HTML이라는 언어의 의미와 본질, 그리고 HTML이 어떻게 웹 브라우저에서 나타날 수 있는지 브라우저의 작동 원리를 살펴보겠습니다. 그럼 시작해볼까요?

HTML 정의

HTML은 HyperText Markup Language(HTML)의 약자입니다. 우리말로 풀어쓰면 하이퍼텍스트 마크업 언어입니다. HTML은 철자 그대로 발음하는 두문자어(initialism)입니다. 그래서 '에이치-티-엠-엘'이라고 발음하고 약어 자체로 사용합니다. 약어와 두문자어가 무엇인지 알고 싶은 분들은 영어 약어(abbreviations) 종류와 차이를 읽어보셔도 좋을 것 같습니다.

여기서 하이퍼텍스트(hypertext)와 마크업 언어(markup langauge)라는 단어가 나옵니다. 단어가 조금 생소하게 느껴지기도 하지만, 한 단어씩 함께 살펴볼까요?

하이퍼텍스트(hypertext)란?

하이퍼텍스트란 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트를 뜻합니다. 막상 무엇을 떠올려야 할지 감이 잘 오지 않습니다. 그런데 사실 우리는 이것을 매일 사용하고 있습니다. 바로 링크입니다. 우리는 링크라고 부르는 참조 또는 하이퍼링크를 통해 웹에 있는 문서에 접근합니다.

하이퍼링크(hyperlink)

하이퍼텍스트 문서 안에서 모든 형식의 자료를 연결하고 가리킬 수 있는 참조 고리 또는 링크(link)

웹에 있는 문서는 모두 하이퍼텍스트입니다. 링크를 누르는 즉시 우리가 원하는 문서로 이동할 수 있으니 말이죠. 한국정보통신기술협회의 정보통신용어사전에 따르면 하이퍼텍스트의 기술적 정의는 다음과 같습니다.

컴퓨터에서 문자, 그래픽, 음성 및 영상 등의 정보들을 비순차적이고 비연속적이며 비선형적인 체계로 유기적으로 연결해, 제목의 제시 순서와 관계없이 이용자가 원하는 제목과 관련된 정보를 검색할 수 있도록 하는 정보 제공 방법

기존의 문서에서 사용자는 수동적인 존재였습니다. 메모장에 쓰인 텍스트만 보더라도 알 수 있죠. 우리는 이 순수한 텍스트로 이루어진 문서를 처음부터 끝까지 차례로 읽었습니다. 우리는 문서를 만든 주체의 의도에 따라서만 순차적이고 단계적으로 문서에 접근할 수 있었습니다. 모든 게 선형적(linear)이였죠.

그런데 여기서 획기적인 발전이 일어났습니다. 하이퍼텍스트 기술이 등장하면서 말이죠. '~을 넘어, 초월한'이라는 뜻의 하이퍼(hyper-)라는 단어에서 짐작할 수 있듯이, 사용자는 하이퍼텍스트에 있는 하이퍼링크를 통해서 경계를 넘어 문서에 연결된 다른 문서들로 자유롭게 이동할 수 있게 되었습니다. 단 한 번의 클릭으로 말이죠. 하이퍼텍스트는 사용자를 설계된 공간 안에서 정해진 흐름을 따라가는 수동적인 존재에서 선택을 하는 능동적인 주체로 만들어 주었습니다. 사용자는 자유를 갖게 되었습니다.

이 하이퍼텍스트 기술이 핵심적으로 사용된 것 중의 하나가 바로 HTML입니다. 그럼 여기서 추측해볼 수 있습니다. HTML이란 사용자가 문서 사이를 자유롭게 이동하게 해주는 기술을 바탕으로 하는 무엇일 텐데 여기서 나머지는 무엇을 뜻할까요? HTML에는 마크업 언어(markup language)라는 단어가 더해졌습니다. 마크업 언어란 무엇일까요?

마크업 언어(markup language)란?

마크업 언어란 문서나 데이터의 구조를 표기하는 언어입니다. 여기서 마크업(markup)이란 단어는 컴퓨터 시스템에 문서나 데이터의 구조를 알리기 위해 사용하는 문법 형식이자 정보라는 뜻을 지니고 있죠.

마크업 언어는 문서의 내용(contents)에 더해 응용 프로그램에게 문서의 논리 구조와 체제 등 문서의 서식 설계도를 더 잘 전달하기 위해 만들어졌습니다. 한 마디로 마크업 언어는 문서를 구조화하는 언어입니다.

마크업 언어의 종류로는 대표적으로 HTML, SGML, XML 등이 있습니다.

HTML

월드 와이드 웹(WWW)의 홈페이지에 사용되는 하이퍼텍스트 마크업 언어

SGML

Standard Generalized Markup Language의 약자로 문서용 국제 표준화 기구(ISO)가 표준화한 표준 범용 문서 마크업 언어

XML

eXtensible Markup Language의 약자로 다른 특수한 목적을 갖는 마크업 언어를 만드는 데 사용하도록 권장되는 다목적 마크업 언어(SGML에서 파생됨)

그래서 HTML이란?

HTML은 하이퍼텍스트와 이 마크업 언어가 합성된 단어(HTML = 하이퍼텍스트 + 마크업 언어)입니다. 파이어폭스(Firefox)를 만든 비영리재단 Mozila는 개발자 문서에서 HTML을 다음과 같이 정의합니다.

HTML이란 웹 페이지의 구조를 명시하는 기술 언어(descriptive language)로, 마크업이라는 문법을 사용하여 우리가 보는 웹 페이지가 어떤 구조로 이루어져 있는지 웹 브라우저로 하여금 알 수 있도록 하는 언어

세상에는 컴퓨터 시스템 프로그램 개발에 매우 적합한 C언어부터 데이터 분석을 하는데 자주 쓰이는 파이썬(Python)까지 목적별로 쓰임이 다양한 언어가 있습니다. 이 언어 중에서 웹 페이지(web page)^[1]를 만드는 언어가 바로 HTML인 것입니다.

여기서 웹 브라우저(web browser)란 지금 이 문서를 읽을 때 우리가 사용하고 있는 프로그램입니다. 브라우저의 종류로는 흔히 알려진 구글 크롬(Google Chrome), 인터넷 익스플로러(Internet Explorer)/마이크로소프트 엣지(Edge), 파이어폭스(Firefox), 사파리(Safari), 오페라(Opera) 등이 있습니다.

웹 브라우저는 우리가 만든 HTML 파일(.html)을 컴퓨터가 아닌 사람이 보기 편하도록 바꾸어주는 그래픽 유저 인터페이스(graphical user interface, GUI)^[2] 기반의 프로그램입니다. 이 도구는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 도와줍니다.

웹 브라우저의 입장에서 HTML은 다음과 같은 의미를 지니기도 합니다.

• 웹 브라우저에 표시되는 웹 페이지를 만들어달라고 컴퓨터에게 요청하는 언어
• 웹 브라우저가 웹 페이지의 구조를 읽을 때 사용하는 언어

웹 페이지를 집이라고 가정한다면 HTML은 집의 기초을 이루는 철근 구조입니다. HTML로 HTML 문서를 만드는 행위는 HTML 문서의 구조를 설계하는 디자인 작업입니다. 한 마디로 HTML이란 웹 페이지라는 집의 구조를 정의하는 뼈대(코드)인 것입니다.

지금까지 우리는 HTML의 의미와 그 본질을 살펴보았습니다. 여기서 질문 하나. 눈치채셨나요? 우리는 웹 페이지를 만드는 언어, 웹 페이지를 구조화하는 코드가 HTML이라고 배웠습니다. 그런데 실제로 웹 페이지를 만드는 것은 우리가 아닙니다. 우리가 만든 HTML 문서를 사용자가 볼 수 있는 웹 페이지로 만들어주는 것은 웹 브라우저입니다.

우리 사람은 푸드 디자이너로서 웹 브라우저라는 요리사에게 우리가 만들고 싶은 웹 페이지의 레시피(소스)를 제공합니다. 그럼 웹 브라우저는 우리의 레시피(소스)를 가공해 맛있는 요리(웹 페이지)를 만들어 줍니다.

웹 브라우저는 HTML 문서를 웹 페이지로 바꿔주는 과정을 기술적으로는 브라우저 렌더링, HTML 렌더링이라고 부릅니다.

HTML 렌더링

웹 브라우저는 우리가 HTML로 만든 HTML 문서^[3]를 받아 구문 분석(syntax analysis) 한 후 브라우저에 시각적으로 출력합니다. 우리가 보는 것은 HTML 문서가 아니라 웹 브라우저가 사람이 보기 좋게 바꾼 그림이죠.

이때 웹 브라우저의 구문 분석을 해석 또는 파싱(parsing)^[4]이라고 하고, 사용자에게 시각적으로 보여주는 것을 렌더링(rendering)^[5]이라고 말합니다. 브라우저는 다음 과정을 거쳐 HTML 문서를 웹 페이지로 변환합니다.

브라우저 작동 원리

『모던 자바스크립트』(p.661)에 따르면 브라우저는 4단계 과정을 거쳐 HTML 문서를 렌더링 합니다.

1단계 브라우저는 서버에 HTML 리소스를 요청한다

• 요청 방법: 브라우저의 주소창에 URL주소^[6](예시: https://www.snugarchive.com )을 입력하고 엔터(enter)키를 누른다. 그러면 URL의 도메인 네임^[7](예시: snugarchive.com)이 DNS^[8]를 통해 IP주소(예시: 192.168.1.0)로 변환되고 이 IP 주소를 갖는 서버에게 요청을 전송한다.

2단계 서버는 브라우저에 index.html을 응답한다

• 브라우저는 서버에 index.html을 명시적으로 요청하지는 않으나, 서버는 브라우저에게 index.html로 응답하는 것이 기본 설정으로 되어있다.

3단계 브라우저의 렌더링 엔진은 서버에서 응답된 HTML을 파싱하여 DOM트리(DOM tree)를 생성하고 렌더 트리를 생성한다

• 이때 HTML 외에 CSS가 있다면 CSSOM트리(CSSOM tree)가 생성되고 렌더 트리에 합쳐진다.
• 자바스크립트는 브라우저 렌더링 엔진이 아닌 브라우저 자바스크립트 엔진이 따로 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 이를 바이트코드(Bytecode)로 변환한 후 실행하여 HTML의 DOM트리와 CSSOM트리를 변경한다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합한다.

4단계 브라우저의 렌더링 엔진은 이 렌더 트리를 바탕으로 브라우저 화면에 HTML 요소를 그린다(painting)

FAQ

지금까지 우리는 브라우저의 렌더링 과정을 살펴보았습니다. 이 밖에 HTML과 관련해 자주 묻는 질문(FAQ)으로는 다음과 같은 주제가 있습니다.

• HTML과 프로그래밍 언어 차이
• HTML과 CSS, 자바스크립트 차이
• HTML과 XML 차이
• HTML과 HTML5 차이

하나씩 함께 살펴볼까요?

HTML과 프로그래밍 언어 차이

HTML은 프로그래밍 언어일까요? 일단 정답은 '아니오'입니다. HTML은 프로그래밍 언어가 아닙니다. 그럼 왜 HTML은 프로그래밍 언어가 아닐까요? 여기에는 여러 의견이 있습니다. 대표적으로는 다음과 같은 주장이 있죠.

• 1. HTML은 마크업 언어이기 때문에 프로그래밍 언어가 아니다
• 2. HTML은 로직(logic)이 없기 때문에 프로그래밍 언어가 아니다

• 3. HTML 은 튜링 완전(turing completeness)이 없기 때문에 프로그래밍 언어가 아니다

위에 언급된 주장은 다음과 같은 이유로 참이라고 보기 어렵습니다. 이 해석은 소프트웨어 엔지니어 알바로 몬토로(Alvaro Montoro)의 HTML은 프로그래밍 언어가 아닌가? 칼럼을 참고하여 요약하였습니다.

HTML은 마크업 언어이기 때문에 프로그래밍 언어가 아니다? No

마크업 언어 중에서도 프로그래밍 언어가 있습니다. TeX and LaTeX는 마크업 언어지만 프로그래밍 언어로 여겨집니다. 마크업 언어 중에서도 프로그래밍 언어가 있기 때문에 HTML 이 마크업 언어라는 이유로 프로그래밍 언어가 아니라고 주장하기는 어렵습니다.

HTML은 로직가 없기 때문에 프로그래밍 언어가 아니다? No

HTML에도 로직(logic)는 있습니다. 프로그래밍에서 로직 또는 논리란 코드의 논리적인 흐름을 의미합니다. 로직이 작동하는 HTML의 요소로는 'details'와 'summary', 'dialogue'가 있습니다. 이 요소를 누르면 자바스크립트의 메뉴 토글(toggle) 기능처럼 해당 내용을 접었다, 폈다 할 수 있습니다. 여기에는 자바스크립트도 CSS도 필요치 않습니다. 오직 HTML의 논리로 내부 제어가 가능합니다. 따라서 HTML이 로직이 없어 프로그래밍 언어가 아니라고 보기 어렵습니다.

HTML은 튜링 완전히 없기 때문에 프로그래밍 언어가 아니다? Well..

튜링 완전(turing completeness)을 실현할 수 있는지 아닌지의 여부로 HTML이 프로그래밍 언어인지 아닌지 판가름하는 기준으로 삼는 것은 주관적입니다. 튜링 완전은 '어떤 프로그래밍 언어나 추상 기계가 튜링 기계처럼 모든 보편적인 연산(계산) 능력을 가진다'는 의미입니다. 프로그래밍 생태계에서는 튜링 기계처럼 작동할 수 있는 튜링 완전성을 나타낸 것을 프로그래밍 언어로 여기는 정서가 있습니다.

하지만 프로그래밍 언어를 분류하는 기준은 아래와 같이 다양합니다.

기준은 관점에 따라 달라지죠. 따라서 튜링 완전을 프로그래밍 언어냐 아니냐를 나누는 절대적인 기준으로 삼기에는 무리가 있습니다.

그럼 HTML은 프로그래밍 언어라는 뜻일까요? 그건 아닙니다. 중요한 것은 각 언어가 지닌 고유의 목적과 가치입니다. 언어들을 무엇이라고 규정하고 분류하는 것보다 말이지요.

마크업 언어는 데이터나 정보를 표기하는 고유의 목적을 지니고 있습니다. 프로그래밍 언어는 데이터를 기술함과 동시에 데이터를 조작, 가공함으로써 새로운 가치를 생산합니다. 둘 다 각자의 위치에서 중요한 역할을 수행하고 있습니다. 따라서 HTML이 프로그래밍 언어냐 아니냐를 규정하는 것은 상대적으로 중요한 문제가 아닙니다.

HTML과 CSS, 자바스크립트 차이

HTML을 배울 때 빼놓을 수 없는 것이 CSS와 자바스크립트입니다. 이 세 가지 기술을 집으로 비유해 볼까요? HTML은 웹 페이지라는 집의 골격, '뼈대'를 만듭니다. CSS는 집 내외부의 '인테리어'를 예쁘게 만드는 것이죠. 그리고 자바스크립트는 집 안의 스마트 조명을 제어하는 것처럼 집의 내부 '동작'을 제어합니다.

이 세 가지 기술의 차이점을 기술적으로 요약하면 다음과 같습니다.

• HTML: 웹 페이지 구조 제공
• CSS: 웹 페이지의 시각적인 모습 제어
• 자바스크립트: 웹 페이지 구성 요소의 동작 제어

HTML과 XML 차이

XML은 HTML과 함께 마크업 언어의 한 종류로 자주 언급됩니다. HTML과 XML은 비슷한 언어일까요? 아닙니다. HTML과 XML은 지향하는 바가 다릅니다. HTML의 주요 목적은 데이터의 구조를 '표현'하는 것입니다. 반면 XML의 목적은 데이터를 '교환'하는 것이죠. 예시를 통해 살펴보겠습니다. 아래 두 코드는 각각 HTML과 XML 소스를 나타낸 예시입니다.

html
<!doctype html>
<html>
  <head>
    <title>내 고양이</title>
  </head>
  <body>
    <h1>프로필</h1>
    <p>내 고양이는 시고르자브종입니다. 나이는 3살입니다.</p>
  </body>
</html>

xml
<?xml version="1.0">
<CAT>
  <NAME>내 고양이</NAME>
  <BREED>시고르자브</BREED>
  <AGE>3</AGE>
</CAT>

위 코드에서 살펴보았듯 HTML은 이미 종류와 의미가 전 세계적으로 표준화된 태그(tags)를 사용합니다. 여기서 사용된 'html', 'head', 'title', 'body'는 HTML 레이아웃을 이루는 태그입니다. 마치 우리가 일상적으로 사용하는 언어처럼, HTML을 사용할 때에는 사전을 찾아보듯 이미 종류와 의미가 정의된 범위 내에서 정해진 표기 방법을 씁니다.

반면 XML은 데이터를 저장하고 주고받기 위해 디자인되었습니다. XML에서는 HTML에서와는 다르게 직접 태그를 정의할 수 있습니다. 위의 코드에서 'CAT', 'NAME', 'BREED', 'AGE' 등은 모두 사용자가 정의한 태그입니다. XML에서는 모두가 이해할 수 있는 표현이 중요한 것이 아니라, 데이터를 주고받는 특정 대상이 자기의 상황에 가장 적합하게 사용할 수 있는 것이 중요하기 때문이죠.

그래서 XML은 변화의 가능성이 없고 이미 정해진 범위 내에서 사용하는 엄격한(rigid) 마크업 언어라기보다 유연한(flexible) 프레임워크에 더 가깝습니다. 단 XML에도 HTML처럼 기본적인 문서 서식은 정해져 있습니다. 단지 그 안에서 데이터의 구조를 정의하는 태그가 미리 정의되어 있지 않은 것입니다.

HTML과 HTML5 차이

HTML과 HTML5의 차이는 무엇일까요? HTML5는 HTML의 5번째 버전을 이르는 용어입니다. HTML5는 HTML의 최신 표준 권고안이기도 합니다. HTML5 이전 버전들에서는 외부 플러그인(Flash, Active-X 등)의 설치를 브라우저마다 통일하지 않았습니다. 그래서 어떤 브라우저에서는 작동하고 어떤 브라우저에서는 작동하지 않는 브라우저 호환성(compatibility) 문제가 빈번했죠. HTML5는 표준화된 인터페이스를 제공하여 사용자의 웹 접근성을 향상시켰습니다.

현 시점에서 웹 개발을 배운다면 우리는 HTML5를 배우고 있는 것입니다. 최근에는 HTML5를 CSS3와 자바스크립트 API를 포함하여 최신 웹 기술을 총칭하는 의미로도 사용됩니다. 일상 생활에서는 간단히 HTML를 사용한다고 하면 됩니다.

결론

지금까지 우리는 HTML이란 무엇이고, HTML 문서가 어떤 과정을 거쳐 웹 페이지로 만들어지는지 브라우저의 작동 원리와 함께 HTML과 프로그래밍 언어와의 차이, HTML, CSS, 자바스크립트의 관계, 그리고 HTML이 XML과 HTML5 와는 어떻게 다른지를 살펴보았습니다.

웹 페이지의 구조를 표시하는 일은 매우 중요합니다. 검색엔진은 수억 개의 웹 페이지를 분류해야 합니다. 웹 페이지의 구조가 명확한 정의나 공통된 약속 없이 사용자 마음대로 만들어진다면 검색엔진이 문서들을 분류하기가 매우 어려울 것입니다.

수억 명의 사람과 컴퓨터가 상호 합의된 명확한 원칙, 언어 약속에 따라 구체적이고 상세하게 기술되어 있는 문서는 웹 브라우저가 더 정확하게 콘텐츠를 파악하도록 도와줍니다. 그럼 수억 개의 웹 페이지를 분류하는 검색엔진은 양질의 정보를 사용자에게 더 정확하고 신속하게 전달할 수 있겠죠.

그럼 HTML은 웹 페이지를 어떻게 구조화할까요? HTML이 웹 페이지의 구조를 표현하기 위해 사용하는 문법적 기호가 바로 태그(tags)입니다. 우리는 태그를 사용해 더 정확히 말하면 요소를 사용해 HTML 문서를 구조화합니다. 웹 브라우저는 구문 분석 후 페이지를 렌더링할 때 태그로부터 DOM^[9]의 부분인 요소(element)를 만들어냅니다. 이어지는 편 HTML 태그와 요소의 차이에서는 HTML 요소와 태그란 무엇인지 그리고 태그의 종류에는 어떤 것이 있는지 공부해 보겠습니다. 모두 수고 많으셨습니다.

참고 문헌

• [1] 이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스. 2020, 660-676.
• [2] 위키피디아, ｢도메인 네임｣, 위키피디아, "https://ko.wikipedia.org/wiki/도메인_네임"
• [3] 위키피디아, ｢마크업 언어｣, 위키피디아, "https://ko.wikipedia.org/wiki/마크업_언어"
• [4] 위키피디아, ｢튜링 완전｣, 위키피디아, "https://ko.wikipedia.org/wiki/튜링_완전"
• [5] 위키피디아, ｢하이퍼텍스트｣, 위키피디아, "https://ko.wikipedia.org/wiki/하이퍼텍스트"
• [6] 위키피디아, ｢HTML｣, 위키피디아, "https://ko.wikipedia.org/wiki/HTML"
• [7] 한국정보통신기술협회, ｢정보통신용어사전: 하이퍼텍스트, hypertext｣, 한국정보통신기술협회, "http://terms.tta.or.kr/dictionary/dictionaryView.do?subject=하이퍼텍스트"
• [8] Alvaro Montoro, ｢HTML is Not a Programming Language?｣, Css-Tricks, HTML은 프로그래밍 언어가 아닌가?
• [9] MDN, ｢DOM 소개｣, Mozilla Corporation, "https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction"
• [10] MDN, ｢HTML｣, Mozilla Corporation, "https://developer.mozilla.org/en-US/docs/Glossary/HTML"
• [11] MDN, ｢HTML: HyperText Markup Language｣, Mozilla Corporation, "https://developer.mozilla.org/en-US/docs/Glossary/HTML"
• [12] MDN, ｢HTML5｣, Mozilla Corporation, "https://developer.mozilla.org/en-US/docs/Glossary/HTML5"