[HTML] HTML4와 HTML5의 차이

 HTML4에서 HTML5로 어떤 점들에서 변화가 발생했는지 살펴보도록 한다.

1. 구문

 1) DTD (Document Type Definition) : doctype의 표현

   : 작성된 내용이 HTML 표준에 의거하여 작성되었음을 웹 브라우저에게 알려주는 것을 의미한다. 필수 사항은 아니지만 보여주도록 권고하고 있다.

 

 이 doctype 선언이 간소화 되었다.

 

HTML4?

기존의 HTML 4의 경우에는 Strict, Transitional, Frameset  총 3가지 DTD 모드가 사용되었지만,

 

HTML5?

 HTML5에서는 간단하게 표기하는 것으로 바뀌었다. 가장 최상단에 위치하고 있다.

HTML5의 doctype 표기

 2) Encoding : 웹 페이지의 문서 규칙을 선언

  : 인코딩 선언부가 간결해졌다. 아래와 같이 간단하게 선언을 해주면 된다. 이를 통해서, 개발자에게 편의성을 제공할 수 있게 되었다.

HTML5의 encoding 선언

2. 태그

 1)  Contents Model - semantic tag

   : HTML 문서 작성의 큰 구조를 말하고, 어떤 요소가 어떤 콘텐츠를 포함할 수 있는지에 관한 정의를 말한다.

 

HTML4?

 기존의 HTML 4의 경우에는 Block Level Element (<div>, <p> 등)과 Inline Element(<img>, <input> 등)으로 구성된 계층 구조를 이루는 outline이었지만,

 

HTML5?

 HTML5에서는 시맨틱(semantic) 태그가 등장하고, 이를 통해서 웹이 구성되는 시맨틱 웹이 탄생하였다. 기존의 HTML4에서 outline을 나누면서 사용한 div 태그에 의미를 부여해서 웹페이지를 만드는 시도가 반영된 것이다.

 

 이를 통해서, 내가 개발하고 있는 웹 페이지의 구조를 한눈에 볼 수 있기 때문에 가독성이 증가하고 유지 보수가 수월하게 된 것이다.

시맨틱 태그

각각의 영역은 각각 다른 내용들을 표시한다.

header	사이트의 소개나 네비게이션 등을 표시
nav	사이트의 내비게이션 항목을 표시
article	독립적인 콘텐츠를 표시, 뉴스기사, 블로그의 글
section	일반적인 문서나 애플리케이션 영역을 표시, 섹션의 제목을 나타내는 <h1>~<h6>도 함께 사용
aside	주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠 표시
footer	사이트의 제작자나 저작권 정보 등을 주로 표시

 2)  멀티미디어 태그  - 플러그인 없이 멀티미디어 재생 가능

 다음은 HTML5가 되면서 추가된 태그 중에 눈에 띄는 변화를 보여주는 예시 태그이다. 

 

   (1) audio : 오디오 재생

  (2) video : 비디오 재생

 멀티미디어 콘텐츠를 사용하기위한 요소이고 API를 제공하여 콘텐츠를 제어할 수 있도록 하고 있다. 브라우저도 제어를 위한 인터페이스를 제공한다. 여러 타입의 원본을 제공하려면 source 요소를 이용할 수 있다.

 (3) HTML5에서 추가된 태그들

• track: video 요소의 텍스트 트랙을 나타낸다.
• embed: 플러그인 콘텐츠를 표현한다.
• mark: 참조를 위한 표시를 하기 위해 사용한다. 텍스트에 형광펜을 칠한 것과 같은 강조 효과를 준다.
• progress: 진행상황을 표기하기 위해 사용한다.
• meter: 측정값을 표시하기 위해 사용한다.
• time: 날짜나 시간을 표시하기 위해 사용한다.
• ruby, rt, rp: 루비 표현을 위해 사용한다.
• bdi: 좌에서 우, 우에서 좌로 기술되는 언어를 표기할 때 사용한다.
• wbr: 개행을 할 수 있다는 표시를 할 때 사용한다.
• canvas: 웹 상에서 그래픽 표시, 자바스크립트 및 API와 같이 사용해서 다양한 어플리케이션을 만들 수 있다.
• datalist: input 요소의 list 속성으로 연결해서 콤보박스를 표현한다.
• keygen: 생성된 키 쌍을 나타낸다. 비밀키는 로컬, 공용키는 서버에 저장한다.
• output: 출력내용을 표현한다.
• command : 사용자 실행 명령어를 표시한다.
• figure : 설명글을 붙일 대상을 정의한다.

(4) input 요소에 새로 추가된 속성

• tel: 전화번호
• search: 검색
• url: 웹 주소
• email: 이메일
• date: 날짜
• time: 시간
• number: 숫자
• range: 범위
• color: 색상

5) HTML5에서 변경된 태그

• address: 가장 가까운 article이나 body 조상 요소로 범위가 정해진다.
• b: 강조의 의미는 사라지고 주목해야 할 단어를 표기하도록 변경되었다.
• blocquote: 여전히 다른 출처의 인용을 의미하고 footer나 cite로 인용을 표시할 수 있다.
• dl: 이름-값 그룹을 나타내는데 사용된다. 대화 목록을 기술하는데에는 더 이상 적합하지 않다.
• hr: 문단 수준의 주제 구분에 사용된다.
• i: 다른 분위기나 어조, 보통의 서술과 구분되어야 하는 텍스트를 지칭할 때 사용한다.
• label: 레이블을 클릭했을 때 포커스를 이동하는 기능이 플랫폼의 표준 인터페이스와 다를 경우 브라우저가 더 이상 포커스를 이동시키지 않는다.
• noscript: 더 이상 직전 script 요소와 연관되지 않는다.
• s: 정확하지 않거나 관련이 없는 내용을 나타낸다.
• script: 스트립트나 커스텀 데이터를 넣기위한 용도로 사용된다.
• small: 작게 출력해야 하는 사이드 코멘트를 나타낸다.
• strong: 강한 강조보다는 중요함을 나타낸다.
• u: 불충분한 내용을 나타내는데 사용된다.