HTML5(HyperText Markup Language 5)

by

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

✅ 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이메일 형식 입력
urlURL 형식 입력
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의 차이점 요약

항목HTML4HTML5
시맨틱 요소<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 등에서 누구나 기여 가능

🧠 요약 정리

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

Leave a Comment