추가된 요소(Element)
HTML5 에서는 기존에 사용하던 Tag 와 별개로 추가된 Tag Element 가 있으며, 기존에 사용하던 Tag 의 의미가 달라진 것과 Tag 의 속성들 역시 추가된 것과 삭제된 것들이 있습니다. 이외에 API(Aplication, 애플리케이션) 역시 추가된 내용이지요. 우선 추가된 Tag 와 의미가 달라진 Tag 에 대해 알아보겠습니다.
참고 문서 :: http://channy.creation.net/project/html5/html4-differences/#new-elements
새롭게 추가된 엘리먼트들
태그 자체에 의미를 부여해서 태그만 보더라도 용도를 짐작할 수 있도록 만들어진 엘리먼트들입니다.
| 엘리먼트 | 설명 | 관련 속성 |
| <article> | article : 독립적인 컨텐츠, 구역을 설정할 때 사용 | Global Attributes |
| <aside> | outside the main flow of the narrative : 메인 컨텐츠 이외의 남는 부분을 설정할 때 사용 | Global Attributes |
| <audio>, <video> | video : 멀티미디어 콘텐츠를 표시 | src | poster | autobuffer | autoplay | loop | controls | width | height |
| <bb> | invoked user agent : 유저 에이전트 호출 | type |
| <canvas> | canvas area : 그래픽의 범위. 웹상에 그래픽을 표현 | width | height |
| <command> | command button : 사용자의 실행 명령어를 표시 | checked | default | disabled | hidden | icon | label | radiogroup | type |
| <datagrid> | data in a tree, list or tabular : 트리, 리스트, 테이블의 데이터를 표시 | disabled |
| <datalist> | dropdown list : 드롭다운 리스트로 선택할 수 있는 값을 목록으로 표시 | Global Attributes |
| <details> | details of an element : 요소의 세부 항목으로 추가적인 정보나 내용을 펼치거나 닫을 수 있음 | open |
| <dialog> | dialog(conversation) : 대화나 회화 형식을 표현 | Global Attributes |
| <embed> | external interactive content or plugin : 외부 인터렉션 콘텐츠 또는 플러그인 추가 | width | height | src | type |
| <figure>, <figcaption> | group of media content, and their caption : 그림이나 미디어 콘텐츠 그룹들의 제목을 붙임 | Global Attributes |
| <footer> | footer for a section or page : 섹션 또는 페이지 풋터에 사용 | Global Attributes |
| <header> | header : 섹션 또는 페이지의 헤더. 사이트의 소개나 내비게이션등을 표시 | Global Attributes |
| <hgroup> | heading section : 헤딩 섹션으로 제목과 그에 따른 부제목을 하나로 묶음 | Global Attributes |
| <keygen> | keygen : 폼을 전송 시에 한 쌍의 키로 만들어 주키(private key)는 로컬에 공용키(public key)는 서버에 저장함 | Global Attributes |
| <mark> | marked text : 텍스트에 형광펜으로 칠한 강조효과 | Global Attributes |
| <meter> | measurement within a predefined range : 정의된 범위내에서의 측정값 | Global Attributes |
| <nav> | navigation links : 페이지 내의 링크 요소를 나타냄 | Global Attributes |
| <output> | some types of output : 출력의 몇가지 형식들로 수학적 계산의 결과 값 표현 | form |
| <progress> | progress : 작업과정을 막대로 표시 | Global Attributes |
| <ruby> | ruby annotations : 루비 문자 주석 | Global Attributes |
| <rp> | provide parentheses around a ruby text : 루비 문자 주위로 괄호를 생성 | Global Attributes |
| <rt> | ruby text component : 루비 문자 콤포넌트 표현 | Global Attributes |
| <section> | section : 문서나 애플리케이션 영역을 표시 | cite |
| <sound> | sound content : 사운드 컨텐츠 | autobuffer | autoplay | controls | loop | src |
| <source> | media resources : 미디어 소스 | media | src | type |
| <time> | date / time : 날짜나 시간을 표시 | Global Attributes |
새롭게 추가된 속성들
HTML 5는 기존 HTML 4 내의 요소에 대해 여러 가지 새 속성들을 제공 하고 있습니다.
참고 문서 :: http://channy.creation.net/project/html5/html4-differences/#new-attributes
| 추가된 속성 | 적용되는 태그 | 설명 |
| media | a, area | link와 함께 사용 가능 |
| ping | a, area | 새 속성을 통해 하이퍼 링크에 대해 ping 정보를 보내야하는 URI 목록에 대해 한칸 공백으로 분리해서 제공할 수 있습니다. 이 속성은 사용자 에이전트가 어떤 URI에 ping 정보를 보냈는지 사용자에게 알려 주거나 개인 정보를 우려하는 사용자를 위해 기능 끄기도 제공 합니다. |
| hreflang, rel | area | 링크되는 대상과의 언어나, 관계를 지정 |
| target | base, a, area, iframe | 링크 타겟 정의 |
| value | li | 항목의 값 순서를 재정의 |
| start | ol | 목록의 항목 값 순서를 재정의 |
| charset | meta | 문서를 위한 문자 인코딩을 적용 하므로 지원을 시작 합니다. |
| autofocus | input (type이 hidden일 때를 제외), select, textarea, button | 문서를 읽는 동안 폼 콘트롤을 지정하는 선언적 방식을 제공합니다. 이 기능은 사용자가 원하지 않을 경우 제공하지 않는 설정을 제공 함으로서 사용자 경험을 보장 해 주어야 합니다. |
| placeholder | input, textarea | 입력필드에 힌트 내용을 제공 |
| form | input, output, select, textarea, button, fieldset | 한 개 이상의 폼 양식과 함께 사용하도록 지원 |
| required | input (type 속성이 hidden, image, submit 같은 버튼 일 때 제외), textarea | 폼을 제출하기 위해서는 이 항목을 사용자가 꼭 입력해야 하는 필수입력 필드를 지정 합니다. |
| disabled | fieldset | 내부 콘텐츠에 대해 사용 |
| autocomplete, min, max, multiple, pattern, step | input | 자동완성 기능, 초대/최소 값 지정, 다중 값 지정, 조건을 사용한 일반식, 숫자나 범위를 지정할 때 조절 단계 지정 |
| list | datalist, select | 폼의 항목 지정 |
| novalidate | form | 폼을 제출할 때 유효성 검증을 거치지 않도록 지정 |
| formaction, formenctype, formmethod, formnovalidate, formtarget | input, button, form | action, enctype, method, novalidate, target 속성들을 재정의(Override)할 수 있습니다. |
| type, label | menu | 이들 속성은 전역 contextmenu 속성과 함께 문맥 메뉴를 제공할 때나 전형적인 메뉴 사용자 인터페이스를 제공하는 데 사용 할 수 있습니다. 즉, 메뉴의 종류를 toolbar나 context 형태로 지정하고, 메뉴의 이름을 지정 |
| scoped | style | 지정한 스타일 시트를 사용하는 데 사용합니다. style 요소에서 지정된 스타일 규칙은 내부 트리에서만 적용할 수 있습니다. 이 속성을 사용하지 않으면 문서 전체가 대상이 됩니다. |
| async | script | 스크립트를 불러오고 실행하는 방식을 지정. 사용하면 즉시 비동기적으로 실행됩니다. |
| menifest | html | 오프라인 웹 애플리케이션과 함께 사용해서 캐쉬 명세를 정의할 수 있습니다. |
| sizes | link | rel에서 icon이 정의되면 아이콘 크기를 정할 수 있습니다. |
| reversed | ol | 항목을 역순으로 정렬할 때 사용합니다. |
| seamless, sandbox | iframe | 문서의 일부인 것처럼 끼워 넣거나 iframe 내에 플러그 인이나 폼, 스크립트 같은 특정 기능을 적용합니다. 예) 블러그 답글 |
새롭게 추가된 전역 속성들
HTML 5는 기존 HTML 4 내의 요소와 함께 모든 요소에 적용할 수 있는 전역속성들이 추가되었습니다.
참고 문서 :: http://channy.creation.net/project/html5/html4-differences/#new-attributes
| 전역 속성 | 기존/추가 | 설명 |
class, dir, id, lang, tabindex, title. |
기존 | |
| contenteditable | 추가 | 편집 가능한 영역임을 표시하는 속성입니다. 사용자들은 마크업과 내용을 바꿀 수 있습니다. (역자 주. 본 기능은 상용 표준이었음.)
|
| contextmenu | 추가 | 저작자에 의해 제공되는 컨텍스트 메뉴를 지정하는 데 사용할 수 있습니다. |
| data-* | 추가 | 저작자가 정의 할 수 있습니다. data-라는 예약어를 통해 향후 HTML 버전과 충돌하지 않고도 사용자 정의 태그로 이용하거나 브라우저 벤더가 사용할 수 있습니다. |
| draggable | 추가 | 새 드래그앤 드롭 API에 사용할 수 있습니다. |
| hidden | 추가 | 요소가 아직 없거나 존재하지 않을 때 사용합니다. |
| item, itemprop, subject | 추가 | 시맨틱 주석(Annotation)을 붙여 기계가 처리할 수 있는 라벨로서 사용합니다. HTML 5 초안의 마이크로 데이터 기능입니다. (역자주: 마이크로 포맷을 범용으로 만든 것임.) |
| role, aria-* | 추가 | 접근성을 위한 지원 기능에 사용 합니다.
|
| spellcheck | 추가 | 맞춤법 검사 기능을 제공할 지 여부를 정해 줍니다. |
* HTML 5는 'on 이벤트명'으로 사용되던 HTML 4의 모든 이벤트 핸들러를 사용할 수 있습니다. 또한, 원격 문서 메시지 API 사용하는 message 같은 새 이벤트를 위한 이벤트 핸들러에도 사용할 수 있습니다.
