오늘날, HTML4.01내 약간의 element는 사용되어서는 안되거나 고의적으로 사용되지 않는 것처럼 쓸모없어진 것이 있다. 인터넷에서 더 나은 사용을 위해 HTML5는 더 나은 구조, 더 나은 폼 다루기, 그리기 그리고 미디어 컨텐츠에 대한 것을 포함한다.
HTML5는 더 나은 구조를 위해 새로운 element를 제공한다.
- 새로운 element
태그 | 정의 |
<bdi> | 다른 텍스트 외부로 부터 한가지 다른 지시내에서 초기화되어진 텍스트의 한 부분을 격리시킨다 |
<command> | 사용자가 호출할 수 있는 하나의 커맨드 버튼을 정의. |
<details> | 사용자가 보거나 숨길수 있는 추가적인 디테일을 정의. |
<summary> | 하나의 <details> element에 대해 눈에 보이는 타이틀을 정의. |
<figcaption> | <figure> element를 위한 캡션을 정의 |
<mark> | 표시되거나 하일라이트 되는 텍스트를 정의 |
<meter> | 알려진 범위 내에서 스칼라 측량을 정의(게이지) |
<progress> | 작업 절차를 재표현 |
<ruby> | 루비 표기를 정의(동아시아 문자에 대해) |
<rt> | 문자의 설명/발음을 정의(동아시아 문자에 대해) |
<rp> | 루비 표기를 지원하지 않는 브라우저에 무엇인가를 보여줄 때 정의 |
<time> | 하나의 날짜/시간을 정의 |
<wbr> | 가능한 라인-브레이크 정의 |
HTML5에서 달라지는 가장 대표적인 특징은 웹 어플리케이션 개발용 스펙들이다.
가장 대표적인 것이 Web Form(웹 양식을 지원하는 태그를 폼 태그)에서 다양한 속성들을 추가한 것이다. <input> 태그에 datetime 속성을 넣어주면 웹 브라우저가 자동으로 달력을 표시해 준다. 또한 IE에서만 사용 가능 했던 contenteditable 속성이 표준화 되어 모든 HTML 요소를 사용자가 직접 편집할 수 있게 된다. 특히 innerHTML, embed 같이 많이 사용하면서도 비 표준 영역에 있었던 것들이 대거 포함 된다.
* 새로운 미디어 element
태그 | 정의 |
<audio> | 사운드 콘텐트를 정의 |
<video> | 비디오나 영화를 정의 |
<source> | <video>와 <audio>에 대한 다중 미디어 자원을 정의 |
<embed> | 외부 응용 프로그램이나 인터렉티브 콘텐트에 대한 하나의 컨테이너를 정의(하나의 플러그인) |
<track> | <video>와 <audio>를 위한 텍스트 트랙을 정의 |
- HTML5는 미디어 콘텐츠를 위해 새로운 element를 제공한다.
*새로운 <canvas> element
태그 | 정의 |
<canvas> | 그래픽을 그릴 때 사용(대게는 자바스크립트) |
*새로운 Form element
태그 | 정의 |
<datalist> | 입력 컨트롤을 위해 사전 정의된 옵션의 리스트를 특징 짓는다. |
<keygen> | 하나의 키-쌍 추가 필드를 정의(forms을 위해) |
<output> | 계산 결과를 정의 |
뿐만 아니라 HTML 요소의 드래그앤 드롭, 오디오 비디오 표시, 벡터 그래픽 표시를 위한 각종 요소들을 새로 도입 했다. 그러면서도 <b>, <i> 같은 대표적인 HTML 요소는 없애지 않고 각각 제품명 키워드 같은 강조 요소와 동식물 학명 같은 이탤릭체에 사용하도록 재정의 했다.
input type | 의미 | input type | 의미 |
<input type="search"> | 검색 | <input type="email"> | 이메일 |
<input type="number"> | 숫자 | <input type="date"> | 일 |
<input type="range"> | 범위 | <input type="month"> | 월 |
<input type="color"> | 색상 | <input type="week"> | 주 |
<input type="tel"> | 전화번호 | <input type="datetime"> | 날짜와 시간 |
<input type="time"> | 시간 | <input type="datetime-local"> | 현재 있는 곳의 날짜와 시간 |
<input type="url"> | URL |
* 기존의 속성들 중에 변경된 것
border | img 요소의 border 속성은 “0”값을 지정해야 한다. CSS를 사용하는것이 더 권장된다. |
language | script 요소의 language 속성은 “javascript" 값 (대소문자 구분 없음) 을 지정해야 하고 type 속성의 값과 일관되어야 한다. 특별한 목적이 있지 않는 한 language 속성은 생략할 수 있다. |
name | a 요소의 name 속성보다는 id 속성을 사용하는것이 권장된다. |
summary | table 요소의 summary 속성은 HTML5의 다른 대안을 이용해서 표시하는 것이 더 권장된다. |
* 기존의 변경된 요소
a | href 속성이 없는 a 요소를 사용하여 링크 자리(placeholder link)를 표시 할 수 있다. a 요소 안에는 버튼과 같은 상호작용하는 요소가 없다면 전체 문단, 리스트, 표, 섹션 등을 모두 포함할 수 있다. 전체 섹션을 하나의 a 요소로 rkaTK고 배너로 활용할 수 있다. |
address | address 요소가 문서 구조(sectioning)상에서 특정 범위에 적용된다. |
b | b 요소는 문서상에서 중요한 의미는 없지만 문체적으로 다르게 나타내어져 하는 텍스트를 위해서 사용된다. 예를 들어서 상품 설명 안에서의 상품의 이름이나 문서에 특정 키워드를 나타낼 때 사용할 수 있다. |
hr | hr 요소는 문단 수준의 나눔을 의미하게 되었다. |
i | I 요소는 어조나 분위기 또는 다른 일반 텍스트와 구분을 해야 하는 텍스트를 표시하는데 사용된다. 예를 들어서 특정 구분이나 기술적인 용어, 다른 언어 표현, 생각, 배의 이름 등과 같은 것을 표현할 때 사용된다. 사용 언어에 따라서 많은 차이가 있을 수 있다. |
label | label 요소를 클릭 했을 때 포커스를 이동하는 기능이 플랫폼 수준에서의 표준이 아닌 이상 더 이상 포커스를 콘트롤로 이동시켜서는 안된다. |
menu | menu 요소가 툴바나 컨텍스트 메뉴를 위해서 개선되었다. |
small | small 요소는 추가적인 코멘트나 법적인 표현 등과 같이 작게 출력되어야 하는 내용을 나타낸다. |
strong | strong 요소는 강한 강조가 아니라 중요함을 나타낸다. |
* 삭제된 element
태그 | 속성 | 태그 | 속성 |
<acronym> | NATO, NASA, GUI등 영문 축약형 | <frame> | 프레임 |
<applet> | 임베디드 애플릿 | <frameset> | 프레임부속태그 |
<basefont> | 글꼴의 형태 | <noframes> | 프레임부속태그 |
<big> | 글꼴의 크기 | <strike> | 글꼴 취소 효과 |
<center> | 텍스트 가운데 정렬 | <tt> | 글꼴 타자기 효과 |
<dir> | 디렉토리 리스트 | <u> | 글꼴 언더라인 효과 |
<font> | 글꼴 | <xmp> | pre 태그와 동일 |
* 모바일에서 중요한 HTML5 요소들
1. Offline 지원 : Web Storage ( Local &Session ) , Web Database , App Cache 2. 미디어 처리 : Video , Audio , Canvas 3. 입력 지원 : Advanced Forms 4. 위치 정보 : GeoLocation ( 연계표준 ) |
모바일에서 HTML5 가 특별히 다른 태그를 활용하는 것은 아니다.
다만 API 중 몇 개가 모바일에 더욱 쓰기 좋은 형태일 뿐이다.
Offline 지원의 경우 항상 인터넷에 연결되어 있는 데스크탑과 달리 모바일 환경은 꼭 3G 와 같은 네트웍에 항시 연결되어있지 않은 WIFI 전용 기기 ( iPod Touch , iPad ) 들도 있으며, 3G 환경이라 할지라도 네트웍 트래픽을 최소화 하는 것이 아주 중요하다. 또한 HTML5 의 중요 스펙중 몇 가지는 아직 모바일용 주요 브라우저에서도 지원되지 않는다 ( iOS 4 , Android )
'공부 > HTML5' 카테고리의 다른 글
웹표준 및 웹 접근성 지침 & 가이드 (0) | 2016.03.08 |
---|---|
세션 스토리지 삭제 (0) | 2015.09.11 |
label 태그 checkbox, radiobox (0) | 2015.09.08 |
HTML5 소개 (0) | 2015.01.30 |
HTML5의 등장배경 (0) | 2015.01.30 |