[HTML5] 의미있는 문서, 시맨틱(Semantic) 요소

의미 있는 문서?
전 세계에 퍼져 있는 웹 문서의 수는 어마어마하다.
구글 검색을 통해 찾지 못할 정보가 없을 만큼 방대한 웹 문서들이 존재한다

웹 문서를 온라인에 등재하는 목적은,초기에도 그랬지만 현재에도 그리고 미래에도 마찬가지로
정보 공유, 정보 전달에 궁극적인 목적이 있다

웹에 문서를 표현하기 위해 문서 규칙을 마크업 형태로 정의한 것이 HTML 이다
초기 웹, 그리고 웹을 위한 HTML 문서는 약속된 몇명 만을 위한 것이었지만 시간이 갈수록 웹을 기반으로 하는 정보 공유와 취득의 요구는 기하급수적으로 늘어났다. 지금은 웹 없는 정보란 상상할 수 없을 정도이다.

이렇듯 자료가 방대해지는 것은 정보의 소스가 다양해 진다는 긍정적인 측면이 있는 반면,
너무 방대한 자료로 인해 원하는 정보를 정확하게 찾기 힘들다는 부정적인 측면도 존재하는 것이다
특히 모호한 표현과 일관되지 않는 문서구조는 정확한 정보 검색에 걸림돌이 된다

이러한 흐름에 따라 정확하고 가치 있는 정보 탐색을 위한 요구사항이 점점 늘어나고 있는데,
웹 세상에 방대하게 퍼져있는 웹 문서를 보다 쉽게 탐색하고 보다 정확하게 해석하고 보다 의미있게
구분하고 보다 쉽게 조합하기 위한 시맨틱 웹(Semantic Web)도 이런 요구에 부응하기 위해 탄생한
개념이다

시멘틱 웹을 위해서는 정보를 표현하는 문서의 구조가 규칙적이고 일관되어야 한다
HTML5 에서는 문서 구조를 위한 새로운 마크업들이 추가되었는데 이는 바로
시멘틱 웹의 실현을 위한 시멘틱 요소의 추가이다


기존 웹 문서의 한계
HTML5 이전의 웹 문서 즉 HTML 문서는 구조보다는 표현을 위한 수단에 가까웠다
Table 태그, ul, li 태그, div 태그 등으로 문서 구조를 정의할 수 있지만 이것은 의미있는 구조라기
보다는 표현을 위한 구조 잡기에 가까웠다. 다시 말해 각 태그들은 일관된 목적을 위해 사용되는 것이 아니라 문서를 Display하기 위해 제각각의 형태로 사용되어진게 사실이다.

다시 말해 HTML5 이전의 문서 표현 태그들은 문법적 규칙은 있었으나 구조의 규칙은 존재하지 않았다

이러한 문서는 사람이 읽기에는 적합하지만 자동으로 문서 구조를 파악하고 분류 및 탐색하기에는 힘든 구조이다. 즉 시맨틱스럽지 못하다는 것이다

참고로 의미있는 구조의 대표적인 형태가 XML 문서이다
XML 의 탄생 자체가 논리적인 문서 구조를 위한 것이며 텍스트 기반의 표준화된 형식이기 때문에
매우 시맨틱스럽다고 할 수 있다. SOAP, RSS 등에 XML이 이용되는 것도 바로 이러한 측면 때문이다

W3C에서는 이러한 XML의 특징을 HTML로 녹여서 시맨틱 웹을 실현하고자, XHTML 이라는 스펙을 내 놓기도 했다. XHTML은 HTML을 XML형식으로 기술할 수 있도록 하여 XML 자체의 장점인 데이터의 구조화 및 의미화 그리고 확장성을 웹 문서에 적용하기 위한 기술이다

W3C는 한때 XHTML 을 차세대 웹 표준으로 추친하고자 했으나 기대만큼 널리 보급되지 못해 중지되었지만 시맨틱 웹을 향한 의지는 꺼지지 않았다


HTML5에 추가된 시맨틱 요소
XHTML 의 보급 실패 이후 제안된 것이 바로 HTML5 이다
XHTML 에 이어 HTML5에서도 시맨틱을 향한 의지가 포함되어
머리글, 바닥글, 탐색줄, 사이드바와 같은 문서 구조를 위한 시멘틱 태그들이 추가되었다

이러한 시멘틱 태그들은 문서의 구조와 영역 그리고 범위를 명확히 함으로써 웹 페이지의 전체 또는 부분에 의미를 부여할 수 있게 하여 HTML 문서를 보다 시맨틱하게 구성할 수 있도록 한다

그럼 이제부터 HTML5에 새로 추가된 시맨틱 태그들을 알아 보자
<header>
웹 문서의 머리글을 정의한다. 페이지 전체 머리글이나 일부분의 머리글을 정의하는데 사용한다

<footer>
웹 문서의 바닥글을 정의한다. 페이지 전체 바닥글이나 일부분의 바닥글을 정의하는데 사용한다

<section>
사전적 의미 그대로 웹 문서의 한 부분, 한 장을 구분하는데 사용한다
문서 내 영역의 범위를 한정하며 문서의 아웃라인을 구성한다

<article>
문서에서 독립적인 하나의 콘텐트을 구분하는데 사용한다
뉴스 항목, 블로그 본문과 같이 자체적으로 배포될 수 있는 독립된 영역을 지정한다

<nav>
문서 전체 혹은 섹션의 네비게이션 영역을 표현한다.
웹 페이지의 탐색 링크를 위한 컨테이너 역할을 한다

<aside>
문서의 주요 콘텐트와는 별개의 영역을 정의하는데 사용한다.
광고 블럭과 같이 주변의 콘텐트와 별도로 다뤄지는 영역을 지정한다

<hgroup>
문서의 제목을 그룹화 하는데 사용한다.  예를 들어 제목과 부제가 동시에 존재하는 문서의 경우 <h1>요소와 <h2> 요소로 제목, 부제목을 정의하며 이들 제목들은 <hgroup>로 그룹화 된다. 이렇게 하여 여러개의 제목을 묶어 하나의 제목으로 취급할 수 있다

<address>
문서를 제공하는 필자의 연락처 정보 등의 부가 정보를 표현한다

<time>
문서를 제작한 시점, 공개한 시점을 지정하는데 사용한다

<blockquote>
문서에서 인용부분을 정의하는데 사용한다

이외에도 도표 영역을 위한 <figure> 와 입력 필드를 그룹화 하는 <fieldset> 등이 추가로 존재한다
HTML5에 새로 추가된 요소들은 다음의 링크를 통해 확인하도록 하자
http://www.w3schools.com/html5/html5_new_elements.asp


브라우저 지원현황
HTML5의 구조 표현을 위한 시맨틱 태그를 지원하는 브라우저 현황을 살펴 보자

그림1. 브라우저별 hTML5 구조태그 지원 현황 (출처: http://caniuse.com/)

표를 보면 IE 9.0 이전버전을 제외하고는 모든 브라우저에서 이를 지원하고 있다는 것을 알 수 있다
그 만큼 시맨틱은 자연스러운 흐름이며 브라우저간 세부 구현의 차이도 크게 존재하지 않는다

IE(Internet Explorer) 를 위한 대안
표에서도 나와 있듯이 IE 8 을 포함한 이전버전에서도 HTML5 의 시멘틱 요소를 지원하지 않는다
IE8에서(그리고 그 이전 버전에서) <section> 이나 <article>와 같은 태그를 사용하면 브라우저는 이를 인식하지 못할 뿐더러 이들 태그에 부여된 스타일도 적용되지 않는다. 따라서 이들 요소에 스타일이 정상적으로 표현되기 위해서는 createElement() 함수를 이용해 새로운 태그를 정의해야 한다

문서에 정의된 HTML5 요소 모두에 이 처리를 다 해주어야 하는데 이를 도와주는 스크립트가 구글 코드를 통해 제공되고 있다 => html5.js 파일 다운로드

이 스크립트를 다운로드 하여 웹 페이지 head 영역에 다음과 같이 정의한다

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 
이렇게 하면 IE8 이전 버전에서도 의도했던 스타일이 적용될 것이다

이와 관련된 다음의 글을 참고하기 바라며
http://blog.whatwg.org/supporting-new-elements-in-ie
http://blog.whatwg.org/styling-ie-noscript

IE8에서 이 스크립트를 적용한 예와 그렇지 않은 예는 다음과 같다

IE에서 HTML5 시멘틱 요소를 사용하고 그 요소에 스타일을 적용했는데
html5.js 를 적용한 것과 그렇지 않은 것을 실행한 화면이다

이 데모는 다음의 URL에서 확인 가능하다
http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/section4.html

- html5.js 미 적용

- html5.js 적용

 
시맨틱 태그 데모
HTML5 시맨틱 태그를 활용하여 문서 구조를 정의하는 것은 어떤 획일적인 규칙이 존재하는 것은 아니다. 문서 구조에 맞도록 입맛대로 구성하면 되는 것이다. 다만 각 태그들이 의미하는 바, 정의하는 범주에 맞도록만 구성하면 된다. 따라서 다른 API들 처럼 사용법이 정해진 것이 아닌 만큼 다양한 형태가 있을 수 있으므로 정해진 데모 보다는 일종의 가이드를 제시하는 것으로 대신하고자 한다

일단 시맨틱 요소들의 의미를 정확히 이해하고 문서 구조를 잡아야 한다
요서에 맞도록 문서 구조를 정했다면 배치와 표현을 위해 스타일시트를 활용할 것을 권장한다
아래 그림은 시맨택 요소를 활용한 문서 구조 가이드를 위한 그림이다

출처: http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

그리고 잘 만들어진 HTML5 문서 구조와 스타일 적용사례는 다음의 링크에서 제공하는 템플릿으로 학습하기를 바란다 => FreeHTML5Templates

이 사이트는 일전에 소개한 바 있는데, HTML5 로 제작된 무료 템플릿을 제공해 주는 사이트이다
실 사례에 가까운 템플릿인 만큼 참조할 만한 충분한 가치가 있다


참고 자료>
http://www.alistapart.com/articles/previewofhtml5
http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html
http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/