2014년에 W3C에서 발표한 HTML의 표준안. 어도비 플래시나 실버라이트 등 플러그인의 의존성을 줄이는 것에 초점을 맞추어 업데이트 됨.
대체적으로 문법적인 부분에서 다양한 요소들의 표현이 간결하고 명확해졌다.
1. DOCTYPE
HTML4와 XHTML에서 유효성 검사를 위한 선언문이 상당히 길었는데, HTML5에서는 훨씬 간결해 졌다.
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
---
HTML5
<!DOCTYPE html>
2. Encoding
HTML4에 비해 HTML5의 인코딩 규칙에 대한 명세가 간단해졌다.
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
---
HTML5
<meta charset="utf-8">3. 시멘틱 태그
HTML5에서는 시멘틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었다.
| Element | 설명 |
|---|---|
| header | 해당 섹션의 가장 윗부분에 위치하는 태그 |
| main | 문서의 주된 컨텐츠를 표시하는 태그 |
| nav | 네비게이션의 약자로 일반적으로 상단바 등 사이트를 안내하는 태그 |
| section | 문서의 영역을 구성하는데 사용하는 태그 |
| article | 뉴스기사나 블로그 처럼 독립된 Article을 나타냄 |
| aside | 사이드바나 광고창 등 중요하지 않은 부분을 나타내는 태그 |
| footer | 페이지나 해당 파트의 가장 아랫부분에 위치하는 태그 |
4. 멀티미디어 태그
플러그인의 의존성을 줄이기 위해 나온 HTML5의 특성상 다양한 멀티미디어 태그가 추가되었다.
| Element | 설명 |
|---|---|
| audio | 음성, 음악 파일 등을 재생할 수 있는 태그 |
| video | 영상 파일을 재생할 수 있는 태그(플러그인 없이도 자체 재생이 가능하다) |
| canvas | 스크립트르 이용하여 그래픽을 표현하는 태그 |
5. Web Storage
HTML5 이전에 사용자의 정보는 쿠키에 저장된 채로 매번 서버에 전송되었다. 이러한 쿠키의 단점은 다음과 같다.
- 4KB의 용량 제한
- HTTP 요청마다 전송되는 성능 문제
- 암호화되지 않아 보안에 취약함
HTML5에서는 이러한 점들을 보완하여 웹 스토리지가 등장하였다. 웹 스토리지는 서버로 전달되지 않고, 보안도 보장할 수 있으며, 용량이 5MB정도로 확장되었다.
웹 스토리지는 로컬 스토리지와 세션 스토리지로 구분된다.
5.1 local storage
로컬스토리지의 특징은 다음과 같다.
- 오리진(도메인+포트+프로토콜)이 같을 경우 데이터는 모든 탭과 창에서 공유된다.
- 브라우저나 PC를 재시작하더라도 데이터가 유지된다.
5.2 session storage
- 현재 탭 내에서만 유지된다.
- 페이지를 새로고침하여도 데이터는 유지되지만, 종료한다면 사라진다.
FE 개발자가 되자