HTML5 태그의 활용에 대해서 정리를 해달라는 요청이 있어서 W3C의 초안 문서인 HTML5 differences from HTML4에서 요소와 속성을 중심으로 정리를 해 보았다. 실전 HTML5 가이드를 만들때에도 같은 작업을 했었는데 그 이후로 많이 변경된 것 같다.

좀 급하게 작업을 해서 오역이나 오류가 있을 수도 있고 시간이 지나면서 변경될 수 있는 부분도 많다. 그냥 현재 이런 상황이구나하는 정도만 참조하면 좋을 것 같다. WHATWG에서 dialog 요소를 만드는 작업을 하고 있는 것을 눈여겨 볼 필요가 있을 것 같다.

HTML5에서 새롭게 추가된 태그

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

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

새로운 용도로 추가된 태그

• video, audio: 멀티미디어 콘텐츠를 사용하기위한 요소이고 API를 제공하여 콘텐츠를 제어할 수 있도록 하고 있다.
• source: video, audio 요소에서 사용할 미디어 파일을 기술한다.
• track: video 요소의 텍스트 트랙을 나타낸다.
• embed: 플러그인 콘텐츠를 표현한다.
• mark: 참조를 위한 표시를 하기 위해 사용한다.
• progress: 진행상황을 표기하기 위해 사용한다.
• meter: 측정값을 표시하기 위해 사용한다.
• time: 날짜나 시간을 표시하기 위해 사용한다.
• data: 기계가 읽어들이는 데이터를 표시한다(WHATWG HTML).
• dialog: 다이얼로그를 표시한다(WHATWG HTML).
• ruby, rt, rp: 루비 표현을 위해 사용한다.
• bdi: 좌에서 우, 우에서 좌로 기술되는 언어를 표기할 때 사용한다.
• wbr: 개행을 할 수 있다는 표시를 할 때 사용한다.
• canvas: 비트맵 그래픽을 표현하기 위해서 사용한다.
• command: 사용자 수행 명령을 기술한다.
• details: 사용자의 인터랙션에 의해서 보여지는 추가적인 정보를 나타낸다.
• summary: detail 요소의 요약을 제공할 때 사용한다.
• 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 요소와의 일관성을 유지하기 위해서 area 요소에 추가되었다.
• target: a 요소와의 일관성을 유지하기 위해서 base 요소에 추가되었다.
• charset: 문서의 캐릭터셋을 표현하기 위해서 meta 요소에 추가되었다.
• autofocus: 페이지가 로딩될 때 포커스를 할당할 수 있다. input(type이 hidden인 경우는 제외), select, textarea, button 요소에 추가되었다.
• placeholder: 입력값에 대한 힌트 텍스트를 제공할 수 있다. input, textarea 요소에 추가되었다.
• form: 연관된 form 요소를 지정할 때 사용할 수 있다. input, output, select, textarea, button, label, object, fieldset 요소에 추가되었다.
• required: 필수 입력 사항을 표시한다. input(type이 hidden이거나 버튼인 경우는 제외), select, textarea 요소에 추가되었다.
• disabled: 서식의 일부분을 비활성화하기 위해서 fieldset 요소에 추가되었다. name 요소도 추가되었다.
• autocomplete, min, max, multiple, pattern, step: 입력값의 제한을 위해서 input 요소에 추가되었다.
• list: datalist 요소와 연결을 위해서 input 요소에 추가되었다.
• width, height: type이 image인 요소의 크기를 지정하기 위해서 input 요소에 추가되었다.
• maxlength, wrap: 최대 글자수와 라인 래핑 방법을 정의하기 위해서 textarea 요소에 추가되었다.
• novalidate: 유효성 검사를 막기 위해서 form 요소에 추가되었다.
• formaction, formenctype, formmethod, formnovalidate, formtarget: input 요소나 button 요소에 지정할 경우 form 요소의 action, enctype, method, novalidate, target 속성을 변경할 수 있다.
• inputmode: input과 textarea 요소에 추가되었다(WHATWG HTML).
• 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 요소에 추가되었다.
• srcset: 서로다른 뷰포트에 따라서 다양한 해상도의 이미지를 제공하기 위해서 img 요소에 추가되었다(WHATWG HTML).

재 정의된 전역 속성

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

새로 추가된 전역 속성

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

이벤트 관련 속성

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

HTML5에서 변경된 요소

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

HTML5에서 변경된 속성

• accept: input 요소에서 사용될 때 audio/*나 video/*, image/*를 사용할 수 있다.
• accesskey: 브라우저가 선택할 수 있도록 여러 문자를 할당할 수 있게 되었다.
• action: form에 사용할 때 빈 URL을 사용할 수 없다.
• method: dialog 키워드가 추가되었다(WHATWG HTML).
• border: table 요소에 사용될 때 1과 빈문자만 사용할 수 있다. WHATWG HTML에서는 border 요소가 폐지되었다.
• 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 요소로의 유효한 해쉬-이름 참조값을 사용한다.

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

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

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 요소.

표현을 다루는 속성

• 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 요소에서 폐지.