오늘날, 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

+ Recent posts