HTML5 Markup

새로운 표준 HTML5이 등장했습니다. 그 전엔 html4.01, xhtml1.0이 표준이었습니다.

W3C가 XHTML1.0을 구체화하기 위해 XHTML2.0 작업을 진행중이었으나 하위 호환상에 치명적인 문제가 있었습니다.

XHTML2.0의 실패 후 HTML을 개발하면서 WHATWG(애플, 모질라 재단, 오페라 소프트웨어가 공동으로 설립한 공개 그룹 / W3C와 별개로 Web Application 1.0과 Web Forms 2.0을 만들어 냄)의 표준안을 대부분 수용하여 HTML5가 탄생하게 됐습니다. 한마디로 W3C가 백기투항하고 주객전도 돼서 Vender가 개발하면 그 표준을 W3C에서 적용을 시키게 됩니다.

 

HTML4.01, XHTML1.0과 HTML5의 차이점은 새롭게 등장한 콘텐츠 모델입니다. 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화했는데, 이를 HTML5의 콘텐츠 모델이라고 합니다.

예를 들어 비순서형 목록을 그리려고 합니다. ul 태그 안에 li 태그가 들어가게 됩니다. 둘 사이에 부모와 자식 관계가 생기게 됩니다. 그런데 ul 태그 안에 div 태그를 넣고, 그 div 태그 안에 li 태그를 넣게 되면 HTML5 콘텐츠 모델에 어긋나게 됩니다. 또 다른 예시로 a 태그 안에 p 태그를 사용하는 것은 되는데, a 태그 안에 button 태그를 사용하는 것도 콘텐츠 모델에 어긋납니다. 그래서 콘텐츠 모델에 대해서도 공부를 해야 하고 mark up 할 때 마다 문법 체크를 해주어야 합니다.

 

HTML5의 커다란 변화 중 하나로 다양한 API의 추가를 들 수 있습니다. HTML5 API는 자바스크립트 기술을 좀 더 편리하게 이용할 수 있도록 도와줍니다.

 

또한 HTML5에서는 암묵적으로 사용됐던 아웃라인 알고리즘을, section과 article 등의 태그를 사용해서 명시적으로 사용됩니다.

 

HTML5는 종료 태그도 생략할 수 있습니다. 예를 들어 XHTML1.0에서 <p></p>로 쓰였던 것이 <p>로도 쓸 수 있습니다. 하지만 기존 XHTML1.0의 규칙처럼 시작과 종료 태그를 명시하여 정형식 구조로 마크업 하는 것을 추천합니다. attribute를 대문자와 소문자 둘 다 사용할 수 있는데, 이 또한 기존 XHTML1.0 규칙처럼 소문자를 사용할 것을 권장합니다. <img /> 태그와 같은 빈 요소 또한 <img>로 슬래시를 생략할 수 있습니다.

 

이 외에도 HTML5로 넘어오면서 생긴 특성들이 많습니다. HTML5를 계속적으로 공부하는 습관을 들여야겠습니다.