HTML5(HyperText Markup Language 5)

HTML5는 웹 개발에서 핵심이 되는 마크업 언어 HTML(HyperText Markup Language)의 최신 표준 버전으로, W3C(World Wide Web Consortium)와 WHATWG(Web Hypertext Application Technology Working Group)에서 공동으로 개발되었습니다. HTML5는 단순한 웹페이지를 넘어서, 다양한 기기와 환경에서 동작하는 풍부하고 인터랙티브한 웹 애플리케이션을 만들 수 있도록 설계되었습니다.

Table of Contents

Toggle

✅ HTML5의 주요 특징

1. 🎯 새로운 시맨틱 태그(Semantic Tags)

웹 페이지 구조를 명확히 하여 검색 엔진 최적화(SEO) 및 접근성을 높이는 데 도움을 줍니다.

태그	설명
`<header>`	머리말 영역
`<footer>`	바닥글 영역
`<nav>`	내비게이션 메뉴
`<section>`	논리적 구역
`<article>`	독립적인 콘텐츠 단위
`<aside>`	부가적인 콘텐츠
`<main>`	문서의 주요 콘텐츠 영역

2. 🎬 멀티미디어 지원

플러그인(예: Flash) 없이도 브라우저에서 직접 오디오/비디오를 재생할 수 있습니다.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  브라우저가 video 태그를 지원하지 않습니다.
</video>

<audio controls>
  <source src="sound.mp3" type="audio/mp3">
  브라우저가 audio 태그를 지원하지 않습니다.
</audio>

3. 🧩 폼(Form) 기능 확장

새로운 입력 타입과 속성들이 도입되어 사용자 입력 검증과 UI 향상에 도움을 줍니다.

입력 타입	설명
`email`	이메일 형식 입력
`url`	URL 형식 입력
`date`, `time`	날짜 및 시간 선택
`range`	슬라이더로 숫자 범위 선택
`search`	검색어 입력
`color`	색상 선택

<input type="email" required>
<input type="date" min="2025-01-01">

4. 📦 로컬 저장소(Local Storage & Session Storage)

JavaScript를 통해 클라이언트 측에 데이터를 저장할 수 있는 기능 제공 (쿠키보다 많은 용량 지원).

// 저장
localStorage.setItem("username", "홍길동");
// 읽기
let name = localStorage.getItem("username");
// 삭제
localStorage.removeItem("username");

5. 🎮 Canvas 및 SVG (그래픽 처리 기능)

2D 그래픽과 애니메이션을 직접 그릴 수 있음 → 게임, 차트, 시뮬레이션 등에 활용

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const c = document.getElementById("myCanvas");
  const ctx = c.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 150, 75);
</script>

6. 🌐 API 지원

Geolocation API: 사용자 위치 정보 획득
Drag & Drop API: 끌어놓기 기능
Web Storage API: 위에서 설명한 로컬 저장소
WebSocket API: 실시간 통신 기능 지원
Web Workers API: 백그라운드 쓰레드 실행 가능

📊 HTML4와 HTML5의 차이점 요약

항목	HTML4	HTML5
시맨틱 요소	`<div>`와 class 남용	`<header>`, `<section>` 등 명확한 구조화
미디어 지원	플러그인 필요 (Flash 등)	`<video>`, `<audio>` 내장 지원
그래픽 지원	없음	`<canvas>`, SVG 내장 지원
저장소	쿠키만 지원	LocalStorage, SessionStorage 지원
JavaScript API	제한적	다양한 API 지원 (Geolocation, WebSocket 등)

💡 HTML5 활용 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML5 예제</title>
</head>
<body>
  <header>
    <h1>나의 블로그</h1>
    <nav>
      <a href="#">홈</a>
      <a href="#">소개</a>
      <a href="#">연락처</a>
    </nav>
  </header>

  <main>
    <section>
      <article>
        <h2>HTML5란?</h2>
        <p>HTML5는 웹의 미래입니다!</p>
      </article>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 나의 이름</p>
  </footer>
</body>
</html>

📜 HTML의 역사

HTML(HyperText Markup Language)은 웹의 근간을 이루는 언어로, 웹 페이지를 구조화하는 데 사용됩니다. 지금의 HTML5에 이르기까지, HTML은 여러 번의 진화를 거쳤습니다. 아래는 HTML의 역사를 버전별로 정리한 내용입니다.

🔹 1991년 – HTML 최초 버전 (HTML 1.0)

개발자: 팀 버너스-리 (Tim Berners-Lee)
특징: 가장 기본적인 웹 문서를 작성하기 위한 언어
제공 태그: 제목, 단락, 링크 등 아주 기본적인 태그만 존재
중요성: 인터넷 상의 하이퍼텍스트 문서를 연결할 수 있는 최초의 시스템

🔹 1995년 – HTML 2.0

표준화 기관: IETF (Internet Engineering Task Force)
특징: HTML 1.0에 기반해 공식 표준으로 정의됨
추가 기능: 폼(form), 표(table) 등 일부 기능 포함
제한점: 오늘날의 웹에는 부족한 기능

🔹 1997년 – HTML 3.2

표준화 기관: W3C (World Wide Web Consortium)
변화: Netscape와 Microsoft 브라우저 전쟁 중 타협된 버전
새로운 기능:
- 스크립트 (<script>)
- 스타일 (<style>)
- 테이블, 폰트 태그 등 추가
중요: CSS와 JavaScript를 본격적으로 지원하기 시작

🔹 1999년 – HTML 4.01

가장 오랫동안 사용된 HTML 버전
버전 종류:
- Strict: 엄격한 표준 문법
- Transitional: 과도기적 문법 허용
- Frameset: 프레임 기반 페이지 구성
중요한 개념 도입:
- 스타일과 구조 분리 (CSS 사용 권장)
- 접근성(Accessibility) 강조

🔹 2008~2014년 – HTML5

개발 시작: 2008년, WHATWG 주도로 시작
표준 확정: 2014년 10월, W3C에서 공식 표준으로 발표
대상: 데스크탑, 모바일, TV 등 다양한 플랫폼
주요 특징:
- 시맨틱 태그 (<article>, <section>, <nav> 등)
- 비디오/오디오 태그
- canvas 그래픽 처리
- 로컬 저장소 지원
- 다양한 API (WebSocket, Geolocation 등)
- 플래시(Flash)를 대체하는 기술로 발전

🔹 현재와 미래 – HTML Living Standard

관리 주체: WHATWG
HTML은 더 이상 ‘버전’ 개념이 아님
- “HTML5.1”, “HTML5.2”처럼 버전별 업데이트가 있었지만,
- 현재는 Living Standard (살아있는 표준) 으로 지속 업데이트됨
특징:
- 브라우저가 자동으로 최신 HTML 기능 반영
- Github 등에서 누구나 기여 가능

🧠 요약 정리

연도	버전	주요 특징
1991	HTML 1.0	최초의 HTML, 기본 하이퍼텍스트만 지원
1995	HTML 2.0	공식 표준화, 폼과 테이블 기능 추가
1997	HTML 3.2	스타일, 스크립트 지원 시작
1999	HTML 4.01	구조와 표현 분리, CSS 강조, 접근성 강조
2014	HTML5	시맨틱 태그, 멀티미디어, API, 로컬 저장소 등 포함
현재	Living Standard	버전 개념 없이 지속적으로 업데이트됨