[HTML] HTML5 란?

HTML5란?

HTML5는 웹 개발을 위한 최신 마크업 언어로, 이전 버전인 HTML4와 XHTML의 단점을 개선하여 더욱 강력한 기능을 제공한다.

HTML5의 주요 특징

• 새로운 시맨틱 태그 제공 (<header>, <article>, <section>, <footer> 등)
• 오디오 및 비디오 태그 지원 (<audio>, <video>)
• 향상된 폼 기능 (새로운 input 타입 추가)
• 캔버스를 이용한 그래픽 및 애니메이션 처리 (canvas)
• 다양한 API 지원
  • 로컬 저장소 API 지원 (localStorage, sessionStorage)
  • Geolocation API 지원(Longtitude, Latitude)
  • 웹소켓 API 지원(WebSocket)

---

HTML5 주요 특징 상세 설명

HTML5는 웹 개발의 표준을 한층 업그레이드하며, 이전 HTML4의 한계를 극복하고 다양한 기능을 추가했다.

아래에서 HTML5의 주요 특징들을 더욱 자세히 설명하겠다.

1. 시맨틱 태그(Semantic Tags)

HTML5에서는 문서 구조를 더욱 명확하게 만들기 위해 시맨틱 태그를 도입했다. 이전에는 <div> 태그를 남발했지만, HTML5에서는 문서 구조를 명확히 표현할 수 있는 태그들이 추가되었다.

주요 시맨틱 태그

<header>	문서나 섹션의 머리말(제목, 네비게이션 등 포함)
<nav>	내비게이션 메뉴를 정의하는 태그
<article>	독립적인 콘텐츠 블록(블로그 글, 뉴스 기사 등)
<section>	관련 있는 콘텐츠 그룹(장, 단락 등)
<aside>	본문과 관련된 보조 콘텐츠(광고, 사이드바)
<footer>	문서나 섹션의 바닥글(저작권 정보, 연락처 등)

Non-Semanctic vs Semantic

예제 코드

<header>
    <h2>웹 개발에 유용한 시맨틱 태그</h2>
</header>
<nav>
    <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">블로그</a></li>
    </ul>
</nav>
<section>
    <article>
        <h3>HTML5의 중요성</h3>
        <p>HTML5는 웹 개발의 표준을 변화시켰습니다.</p>
    </article>
</section>
<footer>
    <p>ⓒ 2025 MyWebsite</p>
</footer>

2. 멀티미디어 지원 (오디오 및 비디오)

HTML5는 플러그인(예: Flash) 없이도 오디오와 비디오를 직접 삽입할 수 있다. <audio>와 <video> 태그를 사용하여 멀티미디어를 쉽게 추가할 수 있다.

예제 코드

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

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

3. 향상된 폼(Form) 기능

HTML5에서는 새로운 <input> 타입과 속성을 추가하여 폼을 더욱 강력하게 만들었다.

주요 추가된 <input> 타입

email	이메일 주소 입력 필드
url	URL 입력 필드
date	날짜 선택 필드
number	숫자 입력 필드
range	슬라이더 입력 필드
color	색상 선택 필드

예제 코드

<form>
    이메일: <input type="email" required><br>
    웹사이트: <input type="url"><br>
    생년월일: <input type="date"><br>
    색상 선택: <input type="color"><br>
    <button type="submit">제출</button>
</form>

4. 그래픽 및 애니메이션 (Canvas, SVG)

HTML5는 <canvas> 및 SVG(Scalable Vector Graphics)를 활용하여 그래픽과 애니메이션을 쉽게 구현할 수 있다.

Canvas 예제

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);

SVG 예제

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

5. 로컬 저장소 (Web Storage)

HTML5는 localStorage 및 sessionStorage API를 지원하여 데이터를 브라우저에 저장할 수 있다.

예제 코드

// 데이터 저장
localStorage.setItem("username", "JJuuuunn");

// 데이터 불러오기
console.log(localStorage.getItem("username")); // 출력 : JJuuuunn

// 데이터 삭제
localStorage.removeItem("username");

6. Geolocation API (위치 정보)

HTML5의 Geolocation API를 사용하면 사용자의 현재 위치를 가져올 수 있다. 이 기능은 Google Maps 등과 결합하여 강력한 웹 서비스를 제공할 수 있다.

예제 코드

navigator.geolocation.getCurrentPosition((position) => {
    console.log("위도:", position.coords.latitude);
    console.log("경도:", position.coords.longitude);
});

7. 웹소켓(WebSocket)

HTML5의 WebSocket API를 사용하면 서버와 클라이언트 간의 실시간 양방향 통신이 가능하다. 이는 채팅 애플리케이션, 온라인 게임 등에 활용된다.

예제 코드

const socket = new WebSocket("wss://example.com/socket");

// 서버로 메시지 전송
socket.send("안녕하세요!");

// 서버로부터 메시지 수신
socket.onmessage = (event) => {
    console.log("서버로부터 받은 메시지:", event.data);
};

---

HTML4와 HTML5 비교

아래 표는 HTML4와 HTML5의 주요 차이점을 정리한 것이다.

HTML4	HTML5
기본적으로 시맨틱 태그 없음	시맨틱 태그 도입 (<article>, <section>, <header> 등)
멀티미디어 지원 부족 (플러그인 필요)	<audio>, <video> 태그 추가
로컬 저장소 지원 없음	Web Storage API 지원 (localStorage, sessionStorage)

---

마무리

HTML을 배우기 시작할 때부터 이미 시맨틱 태그나, 멀티미디어 지원, 다양한 Forn 기능들이 나와있어서 예전부터 있었던 기능이라 생각했었는데 HTML5가 나온지 그렇게 오래되지 않았다는것에 놀라며 나와줘서 감사함을 느낀다. 덕분에 웹 개발을 보다 쉽고 편하게 만들 수 있는거 같다.
공부하면 공부할수록 옛날 개발자들은 어떻게 뭐로 개발하신거지...

 

[참고]

TCPSchool - HTML5 개요 문서

MDN - HTML5 문서