HTML이란 무엇인가? | HTML5 개념과 DOM 관계

대부분의 웹 페이지는 HTML로 만들어져 있습니다. 우리가 브라우저에서 보는 텍스트, 이미지, 링크, 버튼 등은 모두 HTML을 통해 구조화되고 표현됩니다.

HTML은 단순한 마크업 언어가 아니라, 웹이라는 공간의 기초 언어이자 모든 웹 개발의 출발점입니다. 특히 HTML5는 이전 버전과 달리 더 풍부한 의미 구조를 담을 수 있도록 진화했으며, 모바일 시대에 최적화된 표준으로 자리 잡았습니다.

이 페이지에서는 HTML의 기본 개념부터 시작해, HTML5의 구조적 특징과 핵심 태그들을 살펴봅니다. 웹을 이해하고자 한다면 반드시 짚고 넘어가야 할 HTML의 뼈대 구조를 하나 씩 정리해보겠습니다.

Ⅰ. HTML 개요

웹페이지의 뼈대를 구성하는 기술 중 가장 기초이자 핵심은 바로 HTML입니다. HTML은 텍스트, 이미지, 링크, 버튼, 폼 등의 요소를 배치하고 구조화하는 데 사용되며, 브라우저는 이 HTML을 해석하여 사용자가 보는 웹페이지를 렌더링합니다.

HTML5의 등장 이후에는 시맨틱 구조, 멀티미디어 지원, 접근성 향상 등 현대 웹의 요구를 반영하는 표준 기술로 발전했습니다. HTML은 웹페이지를 구성하는 표준 마크업 언어로, 태그를 통해 콘텐츠와 구조를 명확하게 구분합니다.

1. HTML의 정의

HTML(HyperText Markup Language) 는 웹페이지를 구성하는 표준 마크업 언어입니다. HTML은 텍스트에 ‘의미’를 부여하여 웹 브라우저가 문서의 구조와 내용을 이해하고 렌더링할 수 있도록 합니다.
예를 들어 <h1>은 제목, <p>는 문단, <a>는 링크를 의미하며, 이러한 태그들을 통해 웹페이지의 콘텐츠와 구조를 명확하게 구분할 수 있습니다.

2. HTML의 역할

HTML의 주요 역할은 다음과 같습니다.

🧱 문서의 구조화
↳ 제목, 본문, 이미지, 표 등 다양한 콘텐츠를 계층적으로 구성
🏷️ 의미 부여 (시맨틱 구조)
↳ 태그를 통해 콘텐츠의 의도된 의미를 명확히 전달
🖥️ 브라우저 표시 기준 제공
↳ 브라우저가 어떤 콘텐츠를 어디에, 어떤 형태로 표시할지 결정
⚙️ 다른 웹 기술의 기반 제공
↳ CSS(디자인), JavaScript(동작)가 적용될 기초 구조를 제공

HTML은 단독으로 완성된 페이지를 만들 수는 없지만, 웹 개발의 모든 출발점이 되는 핵심 언어입니다.

3. HyperText와 Markup Language의 의미

📌 HyperText
↳ ‘하이퍼링크(Hyperlink)’가 포함된 텍스트
↳ 문서 간 상호 연결이 가능하게 함
↳ 사용자가 한 페이지에서 다른 페이지로 자유롭게 이동할 수 있게 해줌
➝ <a href="..."> 태그가 대표적 예

📌 Markup Language
↳ 일반 텍스트에 태그(tag)를 사용하여 의미와 구조를 부여하는 방식
↳ 콘텐츠 자체가 아니라, 그 콘텐츠의 역할과 위치를 정의함
↳ <h1>, <p>, <ul> 등이 이 역할을 수행

다시 말해, HTML은 연결(HyperText)과 구조화(Markup Language)를 동시에 수행하는 언어입니다.

Ⅱ. HTML과 DOM의 관계

HTML은 웹페이지의 구조를 정의하는 정적인 마크업 언어이고, DOM(Document Object Model)은 브라우저가 HTML을 해석한 결과물로 만들어진 동적인 문서 객체 모델입니다. 즉, 사용자가 실제로 보고 상호작용하는 웹페이지는 HTML 자체가 아니라, HTML을 기반으로 생성된 DOM을 통해 렌더링되고 조작됩니다.

1. 브라우저의 HTML 해석 과정

브라우저는 HTML 문서를 수신하면 다음과 같은 과정을 거쳐 화면을 그립니다.

① HTML 파싱HTML Parsing
↳ HTML을 위에서 아래로 읽으며 문법에 따라 구조화
② DOM 트리 생성
↳ HTML을 바탕으로 메모리 상에 노드(Node) 기반의 트리 구조 생성
③ CSSOM 생성 및 렌더 트리 구성
↳ CSS도 분석되어 CSSOM 트리를 만들고, DOM과 결합해 렌더 트리 생성
④ 렌더링 및 그리기 (Painting)
↳ 브라우저가 화면에 실제 요소를 배치하고 보여줌

📌 이 과정 중 JavaScript는 DOM에 접근하거나 변경할 수 있고, DOMContentLoaded 이벤트는 DOM이 완성된 시점을 의미합니다.

2. DOM이란 무엇인가?

DOM(Document Object Model) 은 브라우저가 HTML 문서를 읽어들여 생성한 문서의 구조화된 표현입니다.
HTML 문서는 단순한 텍스트지만, DOM은 이를 트리 형태의 객체로 변환한 것입니다.

2.1 DOM의 특징

🌲계층 구조(Tree Structure)
↳ HTML 요소는 부모-자식 관계로 구성된 노드 형태로 표현
🔧 동적 조작 가능
↳ → JavaScript를 통해 DOM 요소를 추가, 삭제, 수정 가능
🧩 문서 전체를 객체처럼 제어
↳ document.querySelector(), element.innerHTML, addEventListener() 등으로 접근

예를 들어, 아래의 HTML <P>태그는
<p>Hello</p>
DOM 트리에서 다음과 같이 표현됩니다.
Document  
└── html  
    └── body  
        └── p  
            └── "Hello"

3. HTML이 SEO에 미치는 영향

HTML과 DOM은 검색엔진 최적화(SEO) 측면에서도 매우 밀접한 관계가 있습니다.

🔎 검색엔진 크롤러는 HTML → DOM을 기준으로 콘텐츠를 파악
↳ 단순한 HTML이 아니라 렌더링된 DOM 구조를 통해 문서 내용을 분석함
🕒 JavaScript가 늦게 DOM을 변경하면 콘텐츠 인식에 불리
↳ DOMContentLoaded 이후 삽입된 콘텐츠는 구글봇이 인식하지 못할 수도 있음
🏷️ 시맨틱 태그와 정돈된 DOM은 SEO에 유리
↳ <header>, <article>, <nav> 등 의미 있는 태그 사용은 콘텐츠 이해도 향상에 기여
🧱 DOM 깊이와 구조도 영향 있음
↳ 너무 중첩된 구조나 중복된 태그는 크롤러의 해석을 방해함

검색엔진은 HTML 코드를 DOM으로 렌더링한 후 콘텐츠를 분석합니다. 따라서 HTML 구조와 DOM 생성 시점 모두 SEO에 영향을 미치는 핵심 요소입니다.

Ⅲ. HTML5란 무엇인가?

HTML5는 기존 HTML4와 XHTML의 한계를 극복하고, 현대 웹 환경에 최적화된 새로운 웹 표준으로 개발된 마크업 언어입니다.

다양한 디바이스와 멀티미디어 중심의 콘텐츠를 지원하기 위해 등장했으며, 웹의 구조적 표현력과 시맨틱 의미 전달을 대폭 향상 시켰습니다.

1. HTML5의 등장 배경

📱 모바일 시대의 도래
↳ HTML4는 데스크탑 중심 환경에 머물러 있었고, 다양한 화면 크기와 인터랙션을 고려하지 못했음
🎞️ 플러그인 기반 기술의 한계
↳ Flash, Silverlight 등 외부 기술 의존도가 높았고, 보안·호환성 문제가 자주 발생
🌐 웹 애플리케이션의 확장
↳ 기존 HTML로는 리치 콘텐츠(비디오, 게임, 앱 등)를 표현하거나 제어하기에 부족함
📦 표준화와 시맨틱 강조 필요성
↳ 구조적 의미 전달 부족, 접근성 미비, 표준 부재로 SEO와 유연한 개발에 불리함

2. HTML5와 이전 버전의 차이점

항목	HTML4	HTML5
시맨틱 태그	없음 (div, span 위주)	있음 (`<header>`, `<section>`, `<article>` 등)
멀티미디어 지원	외부 플러그인 필요	`<audio>`, `<video>` 태그로 자체 지원
문서 선언 방식	복잡한 DOCTYPE	간단한 `<!DOCTYPE html>`
폼 요소	제한적	`date`, `email`, `range` 등 확장된 입력 타입
오류 허용	엄격한 편	브라우저가 유연하게 해석 가능

3. HTML5의 주요 특징

📌 HTML5의 주요 특징
 ├─🏷️ 시맨틱 마크업 강화
 │  └─ <section>, <article>, <nav>, <aside> 등을 통해 콘텐츠 의미 구조화
 ├─🎥 멀티미디어 태그 지원
 │  └─ <audio>, <video>로 플러그인 없이 미디어 삽입 가능
 ├─🧩 API 및 기능 통합
 │  └─ Canvas, Geolocation, LocalStorage, WebSocket 등 다양한 웹 앱 기능 내장
 ├─📐 디바이스 및 접근성 고려
 │  └─ 모바일 반응성, 접근성(Accessibility), SEO에 유리한 구조
 └─⚙️ 간소화된 문법과 유연한 파싱
    └─ 작성 편의성 증대, 구형 브라우저도 일정 수준까지 자동 처리

Ⅳ. HTML 실습 예제

웹의 구조와 동작 원리를 이해했다면, 이제는 실제 HTML 코드 예제를 통해 문서를 어떻게 작성하는지 살펴볼 차례입니다. 아래는 HTML5 문서의 기본 틀과 구조별 시각화를 포함한 실습 예제입니다.

1. HTML5 기본 예제 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 웹페이지</title>
  </head>
  <body>
    <header>
      <h1>HTML 소개</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#section1">개요</a></li>
        <li><a href="#section2">DOM</a></li>
      </ul>
    </nav>

    <main>
      <section id="section1">
        <h2>HTML이란?</h2>
        <p>HTML은 웹페이지를 구성하는 표준 마크업 언어입니다.</p>
      </section>

      <section id="section2">
        <h2>DOM이란?</h2>
        <p>DOM은 브라우저가 HTML을 구조화한 문서 객체입니다.</p>
      </section>
    </main>

    <footer>
      <p>© 2025 나의 웹사이트</p>
    </footer>
  </body>
</html>

Document
└── html
    ├── head
    │   ├── meta
    │   ├── meta
    │   └── title
    └── body
        ├── header
        │   └── h1
        ├── nav
        │   └── ul
        │       ├── li → a
        │       └── li → a
        ├── main
        │   ├── section#section1
        │   │   ├── h2
        │   │   └── p
        │   └── section#section2
        │       ├── h2
        │       └── p
        └── footer
            └── p