IT_Programming/HTML&CSS

HTML4와 HTML5의 차이점

JJun ™ 2015. 10. 21. 09:48


출처: https://hyeonseok.com/soojung/w3c/2015/10/20/781.html



이전에 한번 정리한 적이 있는데 다시 정리해야지 하다가 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-ｅquiv: 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를 사용할 수 있다.


저작자표시 비영리 변경금지

'IT_Programming > HTML&CSS' 카테고리의 다른 글

[html5] Web Storage 사용 ( Session Storage, Local Storage )  (0) 2016.07.05
하드웨어 가속에 대한 이해와 적용  (0) 2015.08.31
[펌] 모바일 웹 사이트에서 바로가기 아이콘 만들기  (0) 2015.03.13
[펌] 다양한 모바일 웹 디버깅 방법 및 사례  (0) 2014.08.25
[펌] Sass 프로젝트를 위한 아키텍처  (0) 2014.08.20

'IT_Programming/HTML&CSS'의 다른글

  • 현재글HTML4와 HTML5의 차이점

관련글

티스토리툴바