HTML4와 HTML5의 요소와 속성 차이

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