HTML5 신규 요소와 API
HTML5 시맨틱·video·audio 요소와 새 입력 타입을 사용하고 브라우저 Web API의 역할을 개괄합니다.
지금까지 우리는 HTML 문서의 기본적인 구조를 이해하고, 웹 페이지의 뼈대를 만드는 핵심 태그들을 학습했습니다.
특히 지난 장에서는 웹 페이지의 의미론적 구조와 접근성의 중요성에 대해 깊이 있게 다루었죠.
이번 절에서는 HTML5라는 이름으로 널리 알려진 요소와 브라우저 API(Application Programming Interface)를 살펴봅니다. HTML은 현재 계속 갱신되는 Living Standard로 관리되며, 아래 Web API들은 모두 하나의 HTML 버전 번호로 기능 지원이 결정되는 것은 아닙니다. 다음 SVG와 캔버스 절에서는 그래픽을 직접 그립니다.
HTML5는 단순히 HTML의 새 버전이 아니라, 웹이 정적인 문서에서 동적인 웹 애플리케이션 플랫폼으로 진화하는 데 결정적인 역할을 했습니다.
이 장에서 소개할 기능들은 여러분이 더욱 풍부하고 상호작용적인 웹 경험을 제공하는 데 도움을 줄 것입니다.
BROWSER CAPABILITIES
HTML 요소와 JavaScript Web API의 책임을 구분합니다
브라우저 플랫폼의 문서·입력·미디어·그래픽·저장·위치 기능은 독립적으로 조합합니다.
문서 구조 · 선언형 HTML
heading · nav · main · link
JS가 없어도 구조와 기본 이동을 제공합니다. DOM 순서와 목적지 연결을 확인합니다.
입력 · HTML 폼
label · input · required · submit
기본 입력과 제약 검증을 활용합니다. 서버 검증·저장·업무 처리는 별도 구현입니다.
미디어 · HTML + 재생 API
audio · video · source · track
controls로 기본 조작을 제공합니다. 코덱·자막·자동 재생 정책과 대체 안내를 확인합니다.
그래픽 · SVG / Canvas
SVG 요소 · Canvas drawing API
SVG는 선언형 도형과 DOM을 사용합니다. Canvas 2D 그리기는 JS API이며 도형 상태·접근성 대안을 설계합니다.
저장소 · JavaScript Web API
localStorage · sessionStorage
HTML 태그가 아닙니다. origin과 수명 범위, 저장 한도·실패·개인 모드 등을 고려합니다.
위치 · JavaScript Web API
navigator.geolocation
HTTPS 등 보안 컨텍스트와 사용자 권한·정책이 필요합니다. 거절·불가 상태의 대안을 제공합니다.
필요한 기능을 조합하고 각 경계를 확인합니다
앞 기능을 통과해야 다음 기능을 쓰는 계층이 아닙니다. HTML의 기본 기능과 JavaScript API를 구분하고, 지원·권한·실패 시 동작을 기능별로 설계합니다.
HTML5의 주요 신규 시맨틱 요소
HTML5 신규 요소와 API에서는 태그 의미, 브라우저 해석, 사용자에게 보이는 결과를 연결합니다.
바로 앞 시맨틱 HTML 절에서 일부 HTML5의 새로운 시맨틱 태그들을 미리 살펴보았습니다.
여기서는 다시 한번 중요성을 상기하고 몇 가지 추가적인 시맨틱 요소를 소개하겠습니다.
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>: 이 태그들은 웹 페이지의 각 영역에 의미를 부여하여 검색 엔진 최적화(SEO)와 웹 접근성(Accessibility)에 크게 기여합니다.<figure>,<figcaption>: 이미지, 코드 블록, 비디오 등 독립적인 콘텐츠를 묶고 캡션을 추가할 때 사용합니다.<figure> <img src="diagram.png" alt="시스템 아키텍처 다이어그램"> <figcaption>그림 1. 웹 애플리케이션의 기본 아키텍처</figcaption> </figure><mark>: 텍스트의 특정 부분을 강조하거나 하이라이트할 때 사용합니다. (주로 노란색 배경으로 표시됩니다.)<p>이 문장에서 <mark>가장 중요한 부분</mark>은 바로 이것입니다.</p><time>: 날짜와 시간을 의미론적으로 표현합니다. 검색 엔진이 시간 정보를 정확히 파악할 수 있도록 돕습니다.<p>이 이벤트는 <time datetime="2025-12-25">크리스마스</time>에 시작합니다.</p> <p>게시물 작성 시간: <time datetime="2025-06-14T23:00">오늘 밤 11시</time></p>datetime속성은 기계가 읽을 수 있는 형식으로 날짜와 시간을 지정합니다.
멀티미디어 요소: 비디오와 오디오 다루기
HTML5 이전에는 웹 페이지에서 비디오나 오디오를 재생하기 위해 Flash와 같은 플러그인이 필요했습니다.
HTML5는 이러한 미디어 콘텐츠를 웹 표준만으로 직접 삽입하고 제어할 수 있는 <video>와 <audio> 태그를 도입하여 웹의 가능성을 크게 확장했습니다.
비디오 요소: <video>
<video> 태그는 웹 페이지에 비디오를 삽입합니다.
<video src="my_video.mp4" controls width="640" height="360" poster="poster.jpg" autoplay loop muted>
죄송합니다. 귀하의 브라우저는 비디오 태그를 지원하지 않습니다.
<a href="my_video.mp4">비디오 다운로드</a>
</video>src: 비디오 파일의 경로를 지정합니다.controls: 브라우저의 기본 재생 컨트롤러(재생/일시정지, 볼륨, 진행바 등)를 표시합니다.width,height: 비디오 플레이어의 너비와 높이를 지정합니다. (CSS로 제어하는 것이 더 유연합니다.)poster: 비디오가 로드되거나 재생되기 전에 표시될 이미지의 경로를 지정합니다.autoplay: 페이지 로드 시 비디오가 자동으로 재생되도록 합니다. (사용자 경험을 고려하여 신중하게 사용해야 합니다. 많은 브라우저가 자동 재생을 기본적으로 차단할 수 있습니다.)loop: 비디오가 끝까지 재생된 후 자동으로 다시 시작되도록 합니다.muted: 비디오의 오디오를 기본적으로 음소거합니다. (자동 재생 시 거의 필수)<source>태그: 여러 형식의 비디오 파일을 제공하여 브라우저 호환성을 높일 수 있습니다. 브라우저는 지원하는 첫 번째 소스를 선택하여 재생합니다.<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> 브라우저가 비디오를 지원하지 않습니다. </video>
오디오 요소: <audio>
<audio> 태그는 웹 페이지에 오디오 파일을 삽입합니다.
<audio src="background_music.mp3" controls loop autoplay muted>
오디오 태그를 지원하지 않는 브라우저입니다.
<a href="background_music.mp3">오디오 파일 다운로드</a>
</audio>src: 오디오 파일의 경로를 지정합니다.controls: 브라우저의 기본 오디오 컨트롤러를 표시합니다.autoplay: 페이지 로드 시 오디오가 자동으로 재생되도록 합니다.loop: 오디오가 끝까지 재생된 후 자동으로 다시 시작되도록 합니다.muted: 오디오를 기본적으로 음소거합니다.<source>태그: 여러 형식의 오디오 파일을 제공하여 브라우저 호환성을 높일 수 있습니다.
폼 요소의 새로운 type 속성 및 속성들
HTML5는 <input> 태그에 다양한 새로운 type 속성을 추가하여, 사용자 입력의 종류를 더욱 세분화하고 클라이언트 측 유효성 검사를 강화했습니다.
type="email": 이메일 주소 입력 (기본 유효성 검사, 키보드에@표시)type="url": URL 입력 (기본 유효성 검사)type="tel": 전화번호 입력 (모바일에서 숫자 키패드 제공)type="number": 숫자 입력 (min,max,step속성 사용 가능)type="range": 슬라이더 형태의 숫자 범위 선택<label for="volume">볼륨:</label> <input type="range" id="volume" name="volume" min="0" max="100" value="50">type="date": 날짜 선택 (달력 UI 제공)type="time": 시간 선택type="datetime-local": 날짜 및 시간 선택type="color": 색상 선택 (컬러 피커 UI 제공)type="search": 검색 입력 필드 (브라우저별로 특수 아이콘 제공)
input 속성
placeholder: 입력 필드에 아무것도 입력되지 않았을 때 표시되는 힌트 텍스트.required: 필드를 필수로 채워야 함을 명시합니다. 폼 제출 시 자동으로 유효성을 검사합니다.autofocus: 페이지 로드 시 자동으로 해당 필드에 커서가 위치하도록 합니다.min,max,step:number나range타입에서 최솟값, 최댓값, 증감 단위를 지정합니다.pattern: 정규 표현식을 사용하여 입력 값의 형식을 제한합니다. (예:pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"로 전화번호 형식 지정)list와<datalist>: 입력 필드에 자동 완성 기능을 제공합니다.<datalist>의id를input의list속성 값으로 연결합니다.<label for="browser">선호하는 브라우저:</label> <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> </datalist>
HTML5 입력 타입과 검증 속성은 사용자의 입력 의도에 맞춰 선택합니다.
HTML5 Web API: 웹의 기능 확장 (개념 소개)
브라우저의 Web API는 자바스크립트에서 사용할 수 있는 기능의 접점입니다. 저장소·위치·통신은 HTML 태그를 하나 추가하는 것만으로 모두 실행되지 않습니다. 해당 API의 코드, 제공 환경, 필요한 권한을 확인합니다.
이 API들은 주로 자바스크립트를 통해 제어되며, HTML에 직접적인 태그 형태로 나타나기보다는 개발자가 코드를 통해 접근하여 기능을 구현하는 방식입니다.
여기서는 몇 가지 주요 Web API의 개념만 간략히 소개하고, 자세한 사용법은 추후 자바스크립트 장에서 다룰 예정입니다.
- 사용자의 현재 위치 정보(위도, 경도)를 얻을 수 있도록 합니다. 지도 서비스, 위치 기반 서비스 등에 활용됩니다.
- 주의: 사용자 동의 없이는 위치 정보를 얻을 수 없습니다.
- 웹 브라우저 내에 데이터를 저장할 수 있도록 합니다.
localStorage와sessionStorage두 가지가 있습니다. localStorage: 같은 출처의 값이 일반적으로 브라우저를 닫은 뒤에도 남아 사용자 설정을 다시 읽는 데 쓰입니다. 사용자가 지우거나 비공개 탐색·저장 제한 등에 따라 사라질 수 있으므로 영구 저장을 보장하지는 않습니다. 값을 저장했다고 서버의 로그인 상태가 검증되는 것도 아닙니다.sessionStorage: 출처와 탭의 페이지 세션을 기준으로 저장됩니다. 같은 탭에서 새로고침해도 값이 남을 수 있으며 탭을 닫아 세션이 끝나면 제거됩니다. 임시 입력값처럼 보관 범위를 제한할 때 활용합니다.- 주의: 민감한 정보(비밀번호 등)는 저장하지 않아야 합니다.
- HTML
<canvas>태그와 함께 사용되어 자바스크립트를 통해 2D 그래픽, 애니메이션, 게임 등을 동적으로 그릴 수 있도록 합니다. - 예: 데이터 시각화 차트, 그림판 애플리케이션, 간단한 게임 등
- 웹 페이지 내에서 요소를 마우스로 끌어다 놓는(드래그 앤 드롭) 기능을 구현할 수 있도록 합니다. 파일 업로드, UI 요소 재정렬 등에 사용됩니다.
- 웹 페이지의 스크립트를 백그라운드에서 실행하여, 복잡한 계산이나 작업을 수행하는 동안에도 사용자 인터페이스가 멈추지 않고 반응성을 유지하도록 돕습니다.
- 오래 걸리는 계산을 별도 실행 흐름으로 옮길 수 있지만 Worker가 화면의 DOM을 직접 고치는 것은 아닙니다. 결과를 메시지로 전달하고 화면 갱신은 페이지 쪽에서 처리하는 식으로 역할을 나눕니다.
- 브라우저가 서버에 데이터를 요청하거나 전송하고, 서버가 보낸 응답을 비동기적으로 받는 API입니다. 데이터를 보내는 쪽도 요청이며, 서버가 반환한 결과가 응답입니다.
- 응답 데이터를 이용해 페이지를 새로고침하지 않고 내용을 바꿀 수 있습니다. 네트워크 실패는 요청 자체의 실패이고, HTTP 404·500은 오류 상태를 담은 응답입니다.
fetch가 응답을 받았다는 사실만으로 처리가 성공한 것은 아니므로response.ok나 상태 코드를 확인해야 합니다.
이 절의 통합 다이어그램은 HTML5 요소와 Web API의 기능 경계를 요구 사항에 맞춰 나누어 보여줍니다.
이 외에도 오프라인 동작을 지원하는 Service Worker와 WebSocket 등 브라우저 API들이 있습니다. 기능마다 표준과 사용 조건을 확인하며, 이 개요를 읽은 것만으로 해당 기능을 구현한 것은 아닙니다.
이들은 웹 브라우저의 기능을 단순한 문서 뷰어에서 강력한 애플리케이션 플랫폼으로 확장시켰습니다.
HTML5의 신규 요소와 API를 고를 때는 기능 요구, 사용자 동의, 자바스크립트 필요 여부를 함께 확인합니다.
실습: 비디오와 새로운 폼 입력 타입 활용하기
HTML5의 신규 요소와 폼 입력 타입을 활용한 간단한 페이지를 만들어 봅시다.
web-dev-practice 폴더에 html5_features.html 파일을 만들고 아래 코드를 작성해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 신규 요소와 API</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
h1, h2 {
color: #007bff;
text-align: center;
margin-bottom: 30px;
}
video, audio {
display: block;
margin: 20px auto;
max-width: 100%;
border-radius: 8px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}
form {
margin-top: 40px;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
background-color: #fdfdfd;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="color"],
input[type="range"] {
width: calc(100% - 22px); /* 패딩, 보더 고려 */
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1em;
box-sizing: border-box;
}
input[type="range"] {
padding: 0;
height: 25px; /* 높이 조정 */
}
datalist {
/* datalist는 직접 스타일링하기 어려움. input 요소에 적용되는 스타일을 참고 */
}
button {
background-color: #28a745;
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 20px;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="container">
<h1>HTML5의 새로운 기능 탐색</h1>
<section>
<h2>멀티미디어 콘텐츠</h2>
<p>HTML5는 플러그인 없이도 비디오와 오디오를 쉽게 삽입할 수 있게 되었습니다.</p>
<h3>예시 비디오</h3>
<video controls width="640" style="width: 100%; height: auto;">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
<p>죄송합니다. 귀하의 브라우저는 비디오를 지원하지 않습니다.</p>
</video>
<h3>예시 오디오</h3>
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<p>죄송합니다. 귀하의 브라우저는 오디오를 지원하지 않습니다.</p>
</audio>
<p><small>(* 비디오/오디오 소스는 W3Schools 예시를 참조했습니다.)</small></p>
</section>
<section>
<h2>새로운 폼 입력 타입</h2>
<p>사용자로부터 더욱 다양한 종류의 정보를 쉽게 입력받을 수 있습니다.</p>
<form action="#" method="get">
<div class="form-group">
<label for="userEmail">이메일:</label>
<input type="email" id="userEmail" name="userEmail" placeholder="[email protected]" required>
</div>
<div class="form-group">
<label for="phoneNumber">전화번호:</label>
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="010-1234-5678" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">
</div>
<div class="form-group">
<label for="websiteUrl">개인 웹사이트:</label>
<input type="url" id="websiteUrl" name="websiteUrl" placeholder="https://my-portfolio.dev">
</div>
<div class="form-group">
<label for="favColor">선호하는 색상:</label>
<input type="color" id="favColor" name="favColor" value="#4285F4">
</div>
<div class="form-group">
<label for="eventDate">이벤트 날짜:</label>
<input type="date" id="eventDate" name="eventDate">
</div>
<div class="form-group">
<label for="meetingTime">회의 시간:</label>
<input type="time" id="meetingTime" name="meetingTime">
</div>
<div class="form-group">
<label for="quantity">수량 (1-10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
</div>
<div class="form-group">
<label for="satisfaction">만족도 (0-100):</label>
<input type="range" id="satisfaction" name="satisfaction" min="0" max="100" value="75">
</div>
<div class="form-group">
<label for="searchQuery">검색어:</label>
<input type="search" id="searchQuery" name="q" placeholder="검색어를 입력하세요..." list="searchSuggestions">
<datalist id="searchSuggestions">
<option value="HTML5">
<option value="CSS3">
<option value="JavaScript API">
</datalist>
</div>
<button type="submit">폼 제출</button>
</form>
</section>
</div>
</body>
</html>위 비디오·오디오는 외부 W3Schools 예시 파일을 참조하므로 재생에는 해당 주소 접근과 지원 코덱이 필요합니다. 재생 버튼이 보이는 것과 파일이 실제 재생되는 것은 따로 확인합니다.
입력 규칙을 직접 비교하기
학습용 이메일 [email protected]을 입력하고, 전화번호는 ① 빈 값, ② 01012345678, ③ 010-1234-5678로 바꿔 제출해 보세요. 전화번호에는 required가 없으므로 빈 값은 허용되지만, 값이 있으면 적힌 pattern에 맞아야 합니다. tel 타입만으로 해당 전화번호 형식이 자동 검증되는 것은 아닙니다. 이메일을 비우면 별도의 required 조건으로 제출이 막힙니다.
그다음 검색어 제안에 없는 DOM을 직접 입력해 제출합니다. datalist는 제안 목록이며 목록 밖의 값을 금지하는 규칙이 아닙니다. 정상 형식으로 제출되면 GET 방식이므로 주소의 쿼리 문자열에 userEmail·phoneNumber·q 같은 전송 키가 붙는지 확인합니다. action="#"는 별도 저장 API를 제공하지 않으며, 새로 열린 페이지에 값을 보관하거나 처리하는 서버 코드는 없습니다. 개인정보 대신 학습용 값을 사용하세요.
독립 확인
“전화번호를 선택 입력으로 두면서, 입력했을 때만 하이픈 형식을 검사”하려면 위의 required·pattern 중 무엇을 유지하거나 바꿀까요? “제안한 검색어 중 하나만 허용”하려면 지금의 datalist만으로 충분할지도 설명해 보세요.
조건 확인
전화번호의 required는 생략하고 pattern을 유지합니다. 빈 값과 잘못된 비어 있지 않은 값은 다른 조건입니다. datalist는 추천이므로 목록에 없는 값도 입력할 수 있습니다. 한정된 선택만 허용할 목적이라면 select 같은 요소나 별도 검증을 검토합니다. 브라우저 검증과 서버의 검증·저장은 서로 다른 단계입니다.
위 비디오의 width="640"은 HTML 크기 속성이고, width: 100%는 부모 영역에 맞추는 CSS 표시 크기입니다. 이 예제는 별도의 포스터 파일을 제공하지 않아 poster를 생략했습니다. 포스터를 준비했다면 HTML 파일을 기준으로 한 상대 경로를 지정합니다. 미디어가 재생되지 않으면 개발자 도구의 Network에서 소스 요청과 응답 상태를 먼저 확인합니다. 태그 안의 대체 문구는 비디오·오디오 요소를 지원하지 않는 환경을 위한 것이며 모든 파일 로드 실패를 대신 보여주는 오류 처리기는 아닙니다.
이번 장에서는 HTML5에서 웹 개발의 가능성을 확장시킨 주요 신규 요소와 강력한 Web API들에 대해 알아보았습니다.
<video>와 <audio> 태그로 멀티미디어 콘텐츠를 직접 다루는 방법을 배웠고, 새로운 폼 입력 타입과 속성들을 통해 더욱 정교한 사용자 입력을 받을 수 있게 되었습니다.
또한, Geolocation, Web Storage, Canvas 등 HTML5 API의 광범위한 활용 가능성을 엿볼 수 있었습니다.