[HTML5 1차]웹 표준이란?

추천정보

공부도 다시 할겸 웹 기술에대해 기초부터 정리해 볼까 한다. 첫번째로 웹 표준에 대해 알아보자. 웹 표준이라는 말이 나온지는 꽤 되었

다. W3C에서 HTML5로 표준을 정하면서 웹 표준이라는 말이 등장하였으며, 현재 다양한 분야에서 웹 표준 기술이 사용되고 있다. 비 전공

자도 알 정도면... 말다했지? 

웹 표준의 의미를 살펴보면 다음과 같다. 

웹 표준이란 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다.

 

 수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도 

하며 이러한 표준들은 직간접적으로 웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다. 이러한 것들 모두 "웹 표준"이라고 부르지만 

웹 표준으로 이동하는 것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더 높은 수준의 표준에 초점을 두는 경향이 있

다. 더 넓은 뜻의 웹 표준은 다음을 이룬다: 

• W3C (World Wide Web Consortium)

• 국제 인터넷 표준화 기구 (IETF)가 출판한 인터넷 표준 (STD) 문서

• 국제 인터넷 표준화 기구 (IETF)가 출판한 RFC (Request for Comments) 문서

• 국제 표준화 기구(ISO)가 출판한 표준들

• Ecma 인터내셔널 (이전 이름은 ECMA)이 출판한 표준들

• 유니코드 컨소시엄이 출판한 유니코드 표준과 다양한 유니코드 기술 보고서 (UTR)

• 인터넷 할당 번호 기관 (IANA)이 운영하는 이름과 번호 레지스트리

 

 웹 표준의 일반적인 이용                          

 

웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML, CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 

것을 뜻한다. HTML은 접근성과 시맨틱 HTML의 가이드라인을 충족해야 한다. 웹 표준을 논할 때 일반적으로 다음의 것들이 중요성이 있

는 것으로 보인다:

HTML, XHTML, SVG, XForms와 같은 마크업 언어의 W3C 권고

스타일시트, 특히 CSS의 W3C 권고

흔히 자바스크립트나 ECMA스크립트로 불리는 Ecma 인터내셔널 표준

문서 객체 모델의 W3C 권고

웹 접근성은 일반적으로 W3C의 Web Accessibility Initiative가 출판한 웹 콘텐츠 접근성 가이드라인에 기반을 두고 있다.

(출처 : 위키백과)

 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: 날짜나 시간을 표시하기 위해 사용한다.

• ruby, rt, rp: 루비 표현을 위해 사용한다.

• bdi: 좌에서 우, 우에서 좌로 기술되는 언어를 표기할 때 사용한다.

• wbr: 개행을 할 수 있다는 표시를 할 때 사용한다.

• canvas: 비트맵 그래픽을 표현하기 위해서 사용한다.

• summary 요소를 사용해서 요약이나 범례, 캡션을 나타낼 수 있다.

• datalist: input 요소의 list 속성으로 연결해서 콤보박스를 표현한다.

• keygen: 생성된 키 쌍을 나타낸다.

• output: 출력내용을 표현한다.

 

input 요소에 추가된 속성

• tel: 전화번호

• search: 검색

• url: 웹 주소

• email: 이메일

• date: 날짜

• time: 시간

• number: 숫자

• range: 범위

• color: 색상

 

HTML5에서 변경된 요소

• address: 가장 가까운 article이나 body 조상 요소로 범위가 정해진다.

• b: 강조의 의미는 사라지고 주목해야 할 단어를 표기하도록 변경되었다.

• blocquote: 여전히 다른 출처의 인용을 의미하고 footer나 cite로 인용을 표시할 수 있다.

• dl: 이름-값 그룹을 나타내는데 사용된다. 대화 목록을 기술하는데에는 더 이상 적합하지 않다.

• hr: 문단 수준의 주제 구분에 사용된다.

• i: 다른 분위기나 어조, 보통의 서술과 구분되어야 하는 텍스트를 지칭할 때 사용한다.

• label: 레이블을 클릭했을 때 포커스를 이동하는 기능이 플랫폼의 표준 인터페이스와 다를 경우 브라우저가 더 이상 포커스를 이동시키지 않는다.

• noscript: 더 이상 직전 script 요소와 연관되지 않는다.

• s: 정확하지 않거나 관련이 없는 내용을 나타낸다.

• script: 스트립트나 커스텀 데이터를 넣기위한 용도로 사용된다.

• small: 작게 출력해야 하는 사이드 코멘트를 나타낸다.

• strong: 강한 강조보다는 중요함을 나타낸다.

• u: 불충분한 내용을 나타내는데 사용된다.

 

HTML5에서 변경된 속성

• alt: 보다 정교하게 기술될 필요가 있고 생략도 가능하다.

• accept: input 요소에서 사용될 때 audio/*나 video/*, image/*를 사용할 수 있다.

• accesskey: 브라우저가 선택할 수 있도록 여러 문자를 할당할 수 있게 되었다.

• action: form에 사용할 때 빈 URL을 사용할 수 없다.

• 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-equiv: 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 요소로의 유효한 해쉬-이름 참조 값을 사용한다.

 

웹을 공부하는 학생, 혹은 웹퍼블리셔, 디자이너 등과 같은 직업을 갖고 있는 사람이라면 HTML4, 4.xx.... 버전에 HTML5 표준안이 채택되

면서 바뀐 내용을 파악하고 적용해야 할 것이며, 웹표준 부합하는 페이지를 설계 개발할 수 있어야 할 것이다.