HTML HTML5 란 무엇인가?
페이지 정보
조회 75회
본문
HTML5 란 무엇인가?
HTML5의 이해와 특징
1. HTML5란 무엇인가?
HTML5는 웹 문서를 제작하는 데 쓰이는 기본 언어인 HTML(HyperText Markup Language)의 5번째 규격이자 차세대 웹 표준입니다.
단순히 텍스트와 링크를 연결하는 수준을 넘어, 웹 자체가 하나의 '플랫폼' 역할을 할 수 있도록 설계되었습니다.
웹 표준: W3C(World Wide Web Consortium)에서 지정한 표준 규격입니다.
플러그인 제거: 액티브X(ActiveX)나 플래시(Flash) 같은 외부 프로그램 없이도 웹 브라우저 자체에서 멀티미디어를 재생할 수 있습니다.
2. HTML5의 핵심 특징
① 시맨틱 태그 (Semantic Tags)
'의미가 있는 태그'를 사용하여 웹 문서의 구조를 명확히 정의합니다. 이는 검색 엔진 최적화(SEO)와 웹 접근성을 높여줍니다.
<header>: 머리말 (로고, 메뉴 등)<nav>: 내비게이션 (메뉴 링크)<section>: 주제별 콘텐츠 그룹<article>: 독립적인 콘텐츠 (뉴스, 포스트)<footer>: 꼬리말 (저작권, 연락처)
② 멀티미디어 직접 재생
별도의 설치 없이 <video>와 <audio> 태그만으로 동영상과 음악을 재생할 수 있습니다.
③ 그래픽 구현 (Canvas & SVG)
Canvas: 자바스크립트를 이용해 웹 페이지에 2D 그래픽을 직접 그립니다.
SVG: 벡터 그래픽을 지원하여 이미지가 깨지지 않고 고화질로 구현됩니다.
④ 강력한 API와 디바이스 접근
Geolocation: 사용자의 현재 위치 정보 확인
Web Storage: 브라우저에 데이터를 저장 (쿠키보다 용량이 크고 안전함)
Offline Mode: 인터넷 연결 없이도 웹 앱 작동 가능
3. HTML5 기본 문서 구조
과거 버전보다 선언문이 매우 간결해졌습니다.
<!DOCTYPE html> <html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 강의 자료</title>
</head>
<body>
<header>
<h1>HTML5의 기초</h1>
</header>
<main>
<section>
<h2>시맨틱 태그의 중요성</h2>
<p>문서의 구조를 의미 있게 만들어 줍니다.</p>
</section>
</main>
<footer>
<p>© 2026 웹 프로그래밍 강의</p>
</footer>
</body>
</html>
4. HTML5 도입의 효과
상호운용성: 어떤 브라우저나 기기(모바일, 태블릿, PC)에서도 동일하게 작동합니다.
개발 효율성: 외부 플러그인 의존도가 낮아져 유지보수가 쉬워집니다.
사용자 경험 향상: 더 빠르고 풍부한 인터랙티브 웹 사이트 경험을 제공합니다.
HTML5 - 심화 및 추가 요소
1. 로컬 저장소 (Web Storage)
과거에는 사용자 정보를 저장하기 위해 용량이 작고 보안에 취약한 '쿠키(Cookie)'를 주로 썼지만, HTML5에서는 더 강력한 저장 방식을 제공합니다.
LocalStorage: 브라우저를 닫았다가 다시 열어도 데이터가 사라지지 않고 유지됩니다. (예: 자동 로그인, 다크모드 설정)
SessionStorage: 브라우저 창이나 탭을 닫으면 데이터가 삭제됩니다. (예: 일회성 입력 폼)
2. 폼(Form) 요소의 진화
사용자로부터 정보를 입력받는 방식이 매우 스마트해졌습니다. 자바스크립트 없이도 입력 값의 형식을 체크할 수 있습니다.
다양한 input 타입:
type="date"(달력),type="color"(색상 선택),type="email"(이메일 형식 체크),type="range"(슬라이더) 등.속성 추가:
required(필수 입력),placeholder(미리보기 텍스트),autofocus(자동 커서 이동).
3. 지오로케이션 (Geolocation API)
사용자의 동의하에 현재 위치(위도, 경도) 정보를 파악할 수 있습니다. 지도 서비스나 날씨 앱을 웹에서 구현할 때 필수적인 기능입니다.
4. 웹 워커 (Web Workers)
웹 페이지가 멈추지 않고 백그라운드에서 복잡한 계산 작업을 수행할 수 있게 해줍니다. 마치 멀티태스킹처럼 동작하여 사용자 경험을 부드럽게 유지합니다.
5. 드래그 앤 드롭 (Drag and Drop)
어떤 요소든 마우스로 끌어서 옮길 수 있는 기능을 표준으로 제공합니다. 파일 업로드 창이나 아이콘 배치 등에 활용됩니다.
HTML5 요소별 비교 정리
구분 | 과거 (HTML 4.01 이전) | 현재 (HTML5) |
문서 구조 |
| 시맨틱 태그 사용 (의미 명확) |
멀티미디어 | Flash, ActiveX 등 플러그인 필수 |
|
그래픽 | 외부 이미지 파일 연결 위주 |
|
데이터 저장 | 쿠키 (4KB, 보안 취약) | 웹 스토리지 (5MB 이상, 안전) |
- 이전글메타 데이터와 SEO 최적화 26.02.26
- 다음글HTML5 시맨틱 태그 (Semantic Tags) 26.02.25