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