[Frontend Study] Day 2 - HTML4와 HTML5

HTML4와 HTML5의 차이점은 쉽게말하자면 상위버전과 하위버전으로 볼 수 있다.

대체적으로 문법적으로 다양한 요소들의 표현이 간결해졌다.

 

1. DOCTYPE

---

HTML4에서는 유효성 검사를 위한 선언문이 굉장히 길었지만 HTML5에서는 훨씬 간결해진 것을 볼 수 있다.

 

 

2. Encoding

---

HTML4에 비해서 HTML5에서는 인코딩 규칙에 대한 명세가 간단해졌다.

 

 

3. 시멘틱 태그

---

HTML4에 비해서 HTML5는 시멘틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었다.

Element	설명
header	해당 섹션의 가장 윗부분에 위치하는 태그
main	문서의 주된 컨텐츠를 표시하는 태그
nav	네비게이션의 약자로 일반적으로 상단바 등 사이트를 안내하는 태그
section	문서의 영역을 구성하는데 사용하는 태그
article	뉴스기사나 블로그처럼 독립된 Article를 나타내는 태그
aside	사이드바나 광고창 등 중요하지 않은 부분을 나타내는 태그
footer	페이지나 해당 파트의 가장 아랫부분에 위치하는 태그

 

*시멘틱 웹이란?

 - 컴퓨터가 사람을 대신하여 정보를 읽고 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록, 이해하기 쉬운 의미를 가진 차세대 지능형 웹이다.

 - 시멘틱 태그를 사용하여 웹을 만들면 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와줄 수 있다.

 

4. 멀티미디어 태그

---

플러그인의 의존성을 줄이기 위해서 HTML5에서는 다양한 멀티미디어 태그가 추가되었다.

Element	설명
audio	음성, 음악 파일 등을 재생할 수 있는 태그
video	영상 파일을 재생할 수 있는 태그(플러그인 없이 자체 재생이 가능함)
canvas	스크립트를 이용하여 그래픽을 표현하는 태그

 

5. Web storage

---

 HTML5 이전의 HTML에서는 사용자의 정보가 쿠키에 저장된 채로 매번 서버에 전송되었다. 

여기서 나타날 수 있는 쿠키의 단점을 정리해보았다.

  - 4KB의 용량 제한

  - HTTP 요청마다 전송되는 성능 문제

  - 암호화되지 않아 보안에 취약함

HTML5에서는 이러한 문제점을 보완하여 Web storage가 등장하였다. Web storage는 서버로 전달되지 않고, 보안도 보장할 수 있으며, 용량이 5MB정도로 확장되었다.

web storage는 local storage와 session storage로 구분된다.

 

5.1 Local storage

local storage의 특징

  - 오리진(도메인 + 포트 + 프로토콜)이 같을 경우 데이터는 모든 탭과 창에서 공유된다.

  - 부라우저나 PC를 재시작하더라도 데이터가 유지된다.

 

5.2 Session storage

session storage의 특징

  - 현재 탭 내에서만 유지된다.

  - 페이지를 새로고침한다면 데이터가 유지되지만, 페이지를 종료한다면 사라진다.