- WhatWG
- 새로운 것?
새 구조: aside, figure, section
새 인라인요소: time, meter, progress
새로운 내장요소:video, audio
새로운 대화형요소: details, datagrid, command
- HTML5 == Web Application 1.0
- namespace, schema 가 없다. 태그 안닫아도 된다. 브라우저 오류에 관대하다.
- 추가된 것?
( div + section ).append( header, footer, nav )
( em, code, strong ).append( meter, time, m )
(img, embed).append( video, audio )
- 브라우저가 html5를 지원하지 않는 경우 그레이스풀하게 자신의 버전을 낮춘다.
- 구조적 블록 요소
section : html의 heading 내용
header : 머리글, head 요소와 다름
footer : 바닥글, 전자편지 서명
nav : 링크 모음
article : 개별 항목
4에서는 div 남발로 복잡해보임 vs 5에서는 구조적
5에서는 더 이상의 div 필요없다. class 속성으로 구역종류 표시할 필요없다. 표준 이름이 구역을 나타내기 때문. 오디오, 모바일, 기타 비표준 브라우저에서 중요해질 수 있다.
- 의미적 블록 요소
aside : 흐름에서 벗어나는 문장(참고, 팁, 사이드바, 독립인용, 괄호 삽입구등..)
4에서는 사이드바를 흔히 표로 구현 but 5에서는 aside 이용해 합리적 구현 가능
사이드 바가 놓일 위치는 css에서 힌트를 얻어 브라우저가 판단함.
figure : 이미지 블록과 제목 표현
5에서 figure 요소 사용시 브라우저는 (특히, 스크린 리더는) 이미지와 이미지 제목을 분명하게 연관짓게 된다.
이미지 외에도 audio, video, iframe, object, embed 요소 제목 붙일때도 사용하면 편리.
dialog : 여러 사람 간에 일어나는 대화 표현
5에서 dt는 연설자로 dd는 연설로 중복정의함. 정확한 문법은 아직 논의가 분분.
- 의미적 라인 요소
4에서는 var, code, kbd, tt, samp 라는 소스 코드 살짝 병경한 인라인 요소 5개
기술자와 저작자 간의 불균형 해소.
mark : 강조는 아니지만 '주목' 정도. (예, 구글의 저장된 페이지)
time : 특정시간 표현, 요소 내용은 어떤 형식도 가능, but datetime 속성을 사용해 시스템이 인식하는 시각형식 지정해야 함. 검색엔진, 달력 프로그램과 같은 응용프로그램에서 시각을 인식 용이해진다.
meter : 특정 범위 숫자 값 표현. 속성은 value, min, low, high, max, optimum 사용하여 시스템이 인식하는 숫자 값을 지정해야 한다.
progress : 현재 진행 중 상태 표시, 속성은 value는 현재값, max는 최대 값
- 내장된 미디어
video : 비디오 재생 요소
현재의 웹 비디오 플레이어는 각각의 독점적 기술을 사용하낟. 유투브는 플래시, MS는 윈도우미디어, 애플은 퀵타임을 사용한다. 그래서 모든 브라우저에서 돌아가는 비디오 내장 마크업이 없다. 그래서 video 나옴.
특정 형식과 코덱 선호 여부는 아직 논의중. 결국 시장에 의해 판가름 될꺼라 판단됨.
audio : 음악 재생 요소, autoplay 속성은 사용자 요청없이 재생. loop는 반복횟수
- 상호작용
HTML 5는 Web Application 1.0의 그늘에 속함. 다음의 새 요소의 추가로 웹페이지와 유저간의 상호작용을 높힌다. 아래 요소는 유저 선택과 동작에 따라 페이지 내용이 바뀌지만 새페이지를 읽기위해 서버와 통신하지 않는다.
details : 기본적으로 표시되지 않는 상세정보. 각주나 후주 용도이다. legend 요소로 상세정보 요약해도 좋다.
open 속성(디폴트 펼침) 지정 가능하다.
datagrid : 그리드 컨트롤 제어, 기존의 정적 자료 표현과 달리 스크립트가 동적으로 갱신하는 트리, 목록, 표에 사용. dataglid 초기 자료를 table, select 내용에서 가져온다. 행과 열셀 선택, 축소, 편집, 삭제등 자료를 직접 조작할 수 있는 인터페이스가 추가되었다. (DOM HTMLDataGridElemnt)
초기자료를 DataGridDataProvider 개체를 이용해 나중에 동적으로 추가해도 상관없다. db로 부터 ajax 통신할수 있는 어느 곳이든 가능하다.
menu & command : menu가 4에서 없어졌다가 5에 다시 컴백했다. 대신 command를 달고 돌아왔는데 각 요소는 동작을 유발한다. checked 속성, radiogroup 속성을 지정할 수 있다.
위의 간단한 명령 목록 외에도 툴바나 팝업 컨텍스트 메뉴에도 menu요소를 사용한다. type속성을 toolbar, pop으로 지정한다. icon속성은 버튼에 이미지. label: 메뉴제목
- 결론
HTML5는 마크업을 더욱 간단하고 명료하게 만든다(유연성은 어떨지 잘 모르겠다..) 아마 div/span 사용이 줄어들 것이다. 구버전 htm만 지원하는 브라우저라도 HTML5를 읽기에는 무리가 없다. 왜냐면 인식하지 못하는 요소는 기본적으로 무시되는 HTML방식 때문이다. 모두가 사용하기 쉽도록 상호운영성을 충분히 고려하여 신중하게 요소를 정의했다고 한다.
자세한 내용은 아래 url을 참고하자.
refer to :
