HTML4와 HTML5의 차이점

dev | 2015-10-20

이전에 한번 정리한 적이 있는데 다시 정리해야지 하다가 2년이 훌쩍 지나가 버렸다. 이제 HTML5도 권고안이 되었으니 한번 더 정리하는 것이 의미가 있을 것 같다. HTML5가 권고안이 된 다음에 나온 문서를 기준으로 전에 정리한 문서와 비교해서 내용을 가감, 요약했다. 개인적으로 별로 중요하지 않다고 생각되는 내용이나 잘 모르겠는 내용은 과감히 생략했기 때문에 뭔가 이상하면 원본 문서 확인을 권장한다.

HTMLWG HTML와 HTML5.1의 내용이 제외되면서 애매하고 이상한 스펙들은 다 다시 빠졌다. scoped가 사라진 것은 매우 아쉽다. longdesc은 귀환했지만 alt는 생략 가능한 경우가 생겼다. 이제는 이런 스펙에 연연하지 말고 보조기술을 발전시켜야 하는 때라고 생각하기 때문에 큰 의미는 없다고 본다. 콘텐트 모델과 API 등은 뭔소린지 잘 모르겠고 귀찮아서 안했다.

구문

HTML4와 XHTML1과 거의 호환되지만 일부 SGML 구문과는 호환되지 않는다.
XML 구문을 사용할 수 있지만 XML 미디어 타입으로 제공되어야 한다.
인코딩을 선언해야 하고 다음 세가지 방법을 사용할 수 있다. 1) HTTP의 Content-Type 헤더를 사용하는 방법, 2) 파일의 BOM을 이용하는 방법, 3) meta 요소의 charset 속성을 사용하는 방법
브라우저가 표준 모드로 동작하도록 doctype을 선언해야 한다. <!DOCTYPE html>
MathML과 SVG를 사용할 수 있고 네임스페이스 선언은 생략할 수 있다.

HTML5에서 새롭게 추가된 태그

구조를 기술하기위해 추가된 태그

section: 문서의 섹션을 의미하며 문서의 구조를 기술하기 위해서 h1, h2, h3, h4, h5, h6 요소를 함께 사용해야 한다.
article: 블로그 글이나 신문 기사와 같이 독립적인 문서를 의미한다.
main: HTML5, HTML5.1에서는 한 문서에 하나만 쓸 수 있으며 페이지의 본문같이 주요 내용을 포함하는 요소로 사용할 수 있다.
aside: 본문페이지와 연관이 작은 추가적인 콘텐츠를 의미한다.
hgroup: 섹션의 헤더를 의미한다.
header: 소개나 네비게이션 영역을 나타낸다.
footer: 섹션의 푸터를 의미하며 저자나 저작권등의 정보를 표시한다.
nav: 네비게이션을 위한 섹션을 의미한다.
figure: 본문에서 참조할 수 있는 독립적인 사진과 같은 콘텐츠를 의미한다. figcaption 요소를 선택적으로 캡션으로 사용할 수 있다.
template: 스크립트에서 활용할 수 있는 HTML 조각을 선언하는데 사용한다.

새로운 용도로 추가된 태그

video, audio: 멀티미디어 콘텐츠를 사용하기위한 요소이고 API를 제공하여 콘텐츠를 제어할 수 있도록 하고 있다. 브라우저도 제어를 위한 인터페이스를 제공한다. 여러 타입의 원본을 제공하려면 source 요소를 이용할 수 있다.
track: video 요소의 텍스트 트랙을 나타낸다.
embed: 플러그인 콘텐츠를 표현한다.
mark: 참조를 위한 표시를 하기 위해 사용한다.
progress: 진행상황을 표기하기 위해 사용한다.
meter: 측정값을 표시하기 위해 사용한다.
time: 날짜나 시간을 표시하기 위해 사용한다.
data: 기계가 읽어들이는 데이터를 표시한다(WHATWG HTML, HTML5.1).
dialog: 다이얼로그를 표시한다~~(WHATWG HTML)~~.
ruby, rt, rp: 루비 표현을 위해 사용한다.
bdi: 좌에서 우, 우에서 좌로 기술되는 언어를 표기할 때 사용한다.
wbr: 개행을 할 수 있다는 표시를 할 때 사용한다.
canvas: 비트맵 그래픽을 표현하기 위해서 사용한다.
command: 팝업 메뉴에서 사용자가 실행할 수 있는 명령을 나타낸다.
details: 사용자의 인터랙션에 의해서 보여지는 추가적인 정보나 컨트롤을 나타낸다. summary 요소를 사용해서 요약이나 범례, 캡션을 나타낼 수 있다.
datalist: input 요소의 list 속성으로 연결해서 콤보박스를 표현한다.
keygen: 생성된 키 쌍을 나타낸다.
output: 출력내용을 표현한다.

input 요소에 새로 추가된 속성

tel: 전화번호
search: 검색
url: 웹 주소
email: 이메일
datetime: 날짜 및 시간
date: 날짜
month: 달
week: 주
time: 시간
datetime-local: 로컬 시간
number: 숫자
range: 범위
color: 색상

HTML5에서 새롭게 추가된 속성

HTML4에 이미 존재했던 속성

media: link 요소와 일관성을 유지하기 위해서 a와 area요소에 추가되었다. download, ping 속성도 논의중이다.
hreflang, type, rel: a와 link 요소와의 일관성을 유지하기 위해서 area 요소에 추가되었다.
target: a 요소와의 일관성을 유지하기 위해서 base 요소에 추가되었다.
charset: 문서의 캐릭터셋을 표현하기 위해서 meta 요소에 추가되었다.
autofocus: 페이지가 로딩될 때 포커스를 할당할 수 있다. input(type이 hidden인 경우는 제외), select, textarea, button 요소에 추가되었다.
placeholder: 입력값에 대한 힌트 텍스트를 제공할 수 있다. input, textarea 요소에 추가되었다. label 요소를 대체하는 용도로 사용해서는 안된다.
form: 연관된 form 요소를 지정할 때 사용할 수 있다. input, output, select, textarea, button, label, object, fieldset 요소에 추가되었다.
required: 필수 입력 사항을 표시한다. input(type이 hidden, image이거나 submit 버튼인 경우는 제외), select, textarea 요소에 추가되었다. select 요소의 경우 첫번째 option 요소에 빈 value 값을 지정해야 한다.
disabled, name: 서식의 일부분을 비활성화하기 위해서 fieldset 요소에 추가되었다. name 요소도 추가되었다.
autocomplete, min, max, multiple, pattern, step: 입력값의 제한을 위해서 input 요소에 추가되었다. datalist 요소의 경우 list 속성을 사용할 수 있고 type=image일 경우 width와 height를 사용할 수 있다.
dirname: 컨트롤의 방향을 나타낼 수 있도록 input과 textarea 요소에 추가되었다.
maxlength, minlength, wrap: 최대 글자수와 라인 래핑 방법을 정의하기 위해서 textarea 요소에 추가되었다.
novalidate: 유효성 검사를 막기 위해서 form 요소에 추가되었다.
formaction, formenctype, formmethod, formnovalidate, formtarget: input 요소나 button 요소에 지정할 경우 form 요소의 action, enctype, method, novalidate, target 속성을 변경할 수 있다.
minlength: input 요소에 추가되었다.
inputmode: input과 textarea 요소에 추가되었다(WHATWG HTML, HTML5.1).
type, label: menu 요소를 기본 메뉴 UI로 사용할 수 있게 해주고 contextmenu 속성도 사용할 수 있게 되었다.
scoped: 특정 범위에 스타일을 적용하기 위해서 style 요소에 추가되었다.
async: 스크립트 로딩과 실행 시점을 제어하기 위해서 script 요소에 추가되었다.
manifest: 오프라인 웹 어플리케이션에서 사용하는 API를 위해서 html 요소에 추가되었다.
sizes: 아이콘의 크기를 지정하기 위해서 link 요소에 추가되었다.
reversed: 목록을 역순으로 출력하기 위해서 ol 요소에 추가되었다.
sandbox, ~~seamless,~~ srcdoc: 실행문맥 제어를 위해서 iframe 요소에 추가되었다.
typemustmatch: 외부 콘텐츠를 안전하게 포함하기 위해서 object 요소에 추가되었다.
crossorigin: canvas API에서 사용하기 위해서 img 요소에 추가되었다.

재 정의된 전역 속성

accesskey, class, dir, id, lang, style, tabindex, title 속성이 전역 속성이 되었다. 추가적으로 xml:space 속성도 XHTML의 전역 속성이 되었다.

새로 추가된 전역 속성

contenteditable: 요소를 수정가능하게 만들 때 사용한다.
contextmenu: 컨텍스트 메뉴를 지정할 때 사용한다.
data-*: 저작자가 속성을 추가하고자 할 때 사용한다.
draggable, dropzone: 드래그 & 드롭 API와 함께 사용하게 된다.
hidden: 요소를 없는 상태로 만들 때 사용한다.
inert: 다이얼로그 요소를 만들기 위해 추가되었다(WHATWG HTML, HTML5.1).
role, aria-*: 보조기기에서 사용할 정보를 나타내기 위해서 사용한다.
spellcheck: 문법 검사를 사용할지를 나타낸다.
translate: 콘텐츠가 번역되어야 하는지 나타내기 위해서 사용한다.

이벤트 관련 속성

HTML4의 이벤트를 전역 속성으로 사용할 수 있고, onplay 등과 같은 HTML5 API에서 사용하기위한 속성이 추가되었다.

HTML5에서 변경된 요소

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

HTML5에서 변경된 속성

alt: 보다 정교하게 기술될 필요가 있고 생략도 가능하다.
accept: input 요소에서 사용될 때 audio/*나 video/*, image/*를 사용할 수 있다.
accesskey: 브라우저가 선택할 수 있도록 여러 문자를 할당할 수 있게 되었다.
action: form에 사용할 때 빈 URL을 사용할 수 없다.
method: dialog 요소를 닫기 위한 dialog 키워드가 추가되었다(WHATWG HTML).
border: table 요소에 사용될 때 1과 빈문자만 사용할 수 있다.
colspan: th와 td 요소에 사용될 때 0보다 커야한다.
coords: 원형인 area 요소에 사용될 때 더이상 퍼센트 단위를 넣을 수 없다.
data: object에 사용될 때 더이상 codebase 속성과 관련이 있지 않다.
defer: script 요소에 사용하면 스크립트가 페이지 파싱이 끝난 후에 실행된다.
dir: auto 값을 쓸 수 있다.
enctype: form 요소에 사용할 때 text/plain을 값을 쓸 수 있다.
width, height: img, iframe, object 요소에 사용할 때 퍼센트 값을 사용할 수 없다. 이미지의 비율을 변경하는 용도로 사용할 수 없다.
href: link 요소에 사용할 때 더이상 빈 URL을 사용할 수 없다.
href: base 요소에 사용할 때 상대 URL을 사용할 수 있다.
URL을 값으로 같는 모든 속성: 문서의 인코딩이 UTF-8이나 UTF-16이면 IRI를 사용할 수 있다.
http-equiv: meta 요소에 사용될 때 더이상 HTTP 서버에 의해서 참조되지 않고 브라우저에 의해서만 참조된다.
id: 단일하기만 하고 빈값만 아니면 어떤 값이든 다 사용할 수 있고 빈문자는 허용되지 않는다.
lang: 빈 문자열을 사용할 수 있다.
media: link 요소에 사용할 때 미디어 쿼리 목록을 사용할 수 있고 기본값은 all이다.
이벤트 핸들러: 스크립트 언어로 JavaScript를 항상 사용한다.
value: li 요소에서 더이상 폐지되지 않았고 표현을 나타내지 않는다. start, type도 ol 요소에서 더이상 페지되지 않았고 표현을 나타내지 않는다.
style: 스타일 언어로 CSS를 항상 사용한다.
tabindex: 음수값을 지정할 경우 포커스는 갈 수 있지만 탭으로 가지 못함을 의미한다.
taget: a와 area 요소에서 더이상 폐지되지 않았다.
type: JavaScript와 CSS를 사용할 경우 script와 style 요소에서 더이상 필수 속성이 아니다.
usemap: img 요소에 사용할 때 더이상 URL을 사용하지 않고 map 요소로의 유효한 해쉬-이름 참조값을 사용한다.

HTML5에서 폐지된 요소

표현을 다루는 요소

basefont
big
center
font
strike
tt

사용성, 접근성을 해치는 요소

frame
frameset
noframes

자주 사용안되거나 혼란을 주거나 다른 요소로 대체 가능한 요소

acronym: 혼란을 유발하기 때문에 폐지되었고 abbr을 대신 사용할 수 있다.
applet: object 요소가 대신할 수 있기 때문에 폐지되었다.
isindex: 대신 폼 서식을 사용할 수 있고 폐지되었다.
dir: ul 요소를 사용하도록 폐지되었다.

noscript

HTML 구문에서만 사용할 수 있게 되었다.

HTML5에서 폐지된 속성

rev, charset: link, a 요소.
shape, coords: a 요소.
longdesc: ~~img,~~ iframe 요소.
target: link 요소.
nohref: area 요소.
profile: head 요소.
version: html 요소.
name: img 요소. id 요소로 대체.
scheme: meta 요소.
archive, classid, codebase, codetype, declare, standby: object 요소.
valuetype, type: param 요소.
axis, abbr: td, th 요소.
scope: td 요소.
summary: table 요소.
accept: form 요소.
usemap: input 요소.

표현을 다루는 속성

align: caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr 요소에서 폐지되었다.
alink, link, text, vlink: body 요소에서 폐지되었다.
background: body 요소에서 폐지되었다.
bgcolor: table, tr, td, th, body 요소에서 폐지되었다.
border: object 요소에서 폐지되었다.
cellpadding, cellspacing: table 요소에서 폐지되었다.
char, charoff: col, colgroup, tbody, td, tfoot, th, thead, tr 요소에서 폐지되었다.
clear: br 요소에서 폐지되었다.
compact: dl, ~~menu,~~ ol, ul 요소에서 폐지되었다.
frame: table 요소에서 폐지되었다.
frameborder: iframe 요소에서 폐지되었다.
height: td, th 요소에서 폐지되었다.
hspace, vspace: img, object 요소에서 폐지되었다.
marginheight, marginwidth: iframe 요소에서 폐지되었다.
noshade: hr 요소에서 폐지되었다.
nowrap: td, th 요소에서 폐지되었다.
rules: table 요소에서 폐지되었다.
scrolling: iframe 요소에서 폐지되었다.
size: hr 요소에서 폐지되었다.
type: li,, ul 요소에서 폐지되었다.
valign: col, colgroup, tbody, td, tfoot, th, thead, tr 요소에서 폐지되었다.
width: hr, table, td, th, col, colgroup, pre 요소에서 폐지되었다.

사용할 수는 있지만 권장되지 않는 속성

border: img 요소에 0을 값으로 사용해야 한다. 대신 CSS를 사용한다.
language: script 요소에 사용할 때 "JavaScript"라는 값을 사용해야 하고 type 속성과 다른 값을 가질 수 없다.
name: a 요소에 사용할 때 대신 id를 사용할 수 있다.

Comments

이요한 2016-06-20
취소선(line-throuth)으로 된 것은 어떻게 이해해야 할까요? 최종 표준안 확정되었을 때 삭제되었다고 이해해도 되는지요?
신현석 2016-06-20
추가, 취소된 내용은 이전에 정리했던 20121025 버전과 비교해서 변경된 부분입니다. 표준안에 반영하지 않거나 반영이 나중으로 미뤄진 내용들입니다. 20141209가 최종 버전이니 말씀하신대로 이해하셔도 무방합니다.
이요한 2016-06-20
감사합니다^^
이승헌 2017-07-06
App Cache같이 5.1 에서는 폐지된 API 를 사용하면 안된다는 건가요? 이미 적용된 사이트에서는 대체 API 로 바꿔야 하는 건지. 그냥 둬도 되는 건지. 최신 브라우저에서만 안되는건지...
신현석 2017-07-08
표준에서 없어져도 실제로 구현체가 브라우저에서도 사라지려면 시간이 좀 걸려요. 브라우저에서 언제 폐지시킬지를 주의깊게 봐야 할 것 같아요.
chloe 2018-01-03
출처를 남기며 퍼가도 괜찮을까요?
신현석 2018-01-03
chloe님, 안남기고 퍼가셔도 됩니다.