HTML5

왜 배우는가: HTML5는 웹 플랫폼의 기본 표준으로, 웹 애플리케이션의 구조·멀티미디어·저장·오프라인 기능을 모두 규정한다. 시맨틱 태그, 미디어 요소, 웹 스토리지 등은 실무 웹 개발의 기준이므로 기술사 시험에서 정의와 기능 비교 문제로 반복해 나온다.

출제 이력: 제108회 1교시 13번, 제98회 1교시 5번

1. 한 줄 정의와 핵심 키워드

HTML5는 웹 문서의 구조·표현과 멀티미디어, 스크립팅 API를 정의한 마크업 언어 표준으로, 현재는 WHATWG가 관리하는 HTML Living Standard로 이어진다.

• HTML Living Standard — 버전 번호 없이 지속 갱신되는 현행 표준
• 시맨틱 태그 — 태그 자체가 콘텐츠의 역할을 나타내는 요소(header, nav, article 등)
• 미디어 요소 — audio, video, canvas, svg 등 플러그인 없이 미디어를 다루는 요소
• 웹 스토리지 — 브라우저 내 키-값 저장소(localStorage, sessionStorage)
• 스크립팅 API — Canvas, 드래그 앤드 드롭, 웹 메시징 등 DOM 확장 인터페이스
• WHATWG — HTML 및 DOM 표준을 현재 관리하는 단체

2. 개념 풀이

쉬운 말로 하면 HTML5는 웹 페이지를 만드는 언어의 다섯 번째 주요 버전이다. 문서의 뼈대를 짜고, 그림·소리·동영상을 넣고, 브라우저에 데이터를 저장하는 방법까지 한 묶음으로 정했다.

정식으로는 HTML5(Hypertext Markup Language 5)를 하이퍼텍스트 문서의 구조와 표현을 기술하는 마크업 언어 표준이라 한다. 현재 영어 위키백과 기준으로 HTML5는 W3C의 최종 권고안 이력을 가진 명칭이고, 현행 명세는 HTML Living Standard다. 이 표준은 WHATWG가 유지하며, 2019년 5월 28일 W3C가 HTML 및 DOM 표준의 권한을 WHATWG에 넘기면서 단일 표준 체계가 되었다.

HTML5의 핵심 특징은 세 가지로 나눠 볼 수 있다. 첫째, 시맨틱 태그로 콘텐츠의 의미를 태그 이름에 담는다. 둘째, 외부 플러그인 없이 미디어를 재생하는 미디어 요소를 표준에 넣었다. 셋째, 자바스크립트로 조작하는 스크립팅 API와 웹 스토리지를 확장했다.

HTML5가 "HTML4의 개정판"과 다른 점은 문서 구조를 기술하는 방식이다. HTML4 이전에는 div와 id 속성 조합으로 머리말·본문·꼬리말을 구분했다. HTML5에서는 header, footer 같은 요소 이름이 그 역할을 직접 나타낸다.

3. 등장 배경과 필요성

HTML5가 나온 배경은 두 가지다. 첫째, 웹에서 플러그인(예: 플래시) 없이 동영상과 음성을 재생해야 하는 요구가 커졌다. 둘째, 웹 애플리케이션이 복잡해지면서 브라우저에 대용량 데이터를 저장하고 오프라인에서도 동작해야 할 필요가 생겼다.

기존 방식에는 한계가 있었다. 쿠키는 매 HTTP 요청에 실려 가서 성능에 부담이 되었고, 용량도 작았다. 웹 스토리지는 쿠키와 달리 요청에 데이터를 싣지 않으며, 저장 용량이 더 크다. 저장 용량은 브라우저별 한도가 다르므로 시험 답안에는 특정 수치를 단정하지 않는 편이 안전하다.

표준이 둘로 갈라진 것도 배경이다. 2012년 7월 이후 W3C는 스냅샷형 HTML5 표준을, WHATWG는 지속 갱신형 Living Standard를 냈다. 두 단체는 여러 차례 충돌했고, 결국 2019년 5월 28일 권한을 WHATWG로 일원화했다.