Let's CheolGyu

HTML5로 넘어오면서 많은 변화가 있었는데, 그 중 의미적으로는 가장 큰 변화이지만 와닿지 않는 것이 '시맨틱 태그(Semantic tag)'의 도입이 아닐까 생각한다.
어떤 변화가 있으면 그 변화 내용을 아는 것도 중요하지만, 그 변화의 의미를 알아야 실제로 그 의도에 맞게 변화된 내용을 받아들이고 사용할 수 있으므로, HTML5가 등장하면서 변화가 생긴 태그들에 대해서 한번 쯤은 알아 볼 필요가 있겠다.

HTML5에 시맨틱 태그가 도입됨으로써 사용자에게 보이는 화면 뿐만 아니라, 그 화면을 구성하는데 사용되는 소스 레벨에서도 의미를 가지게 된다. 어떻게 보면 사용자의 입장에서는 태그가 의미를 가진다는 것이 큰 차리를 나타내지는 않겠지만, 검색 엔진의 레벨에서는 전혀 다른 차원의 문제가 된다. 검색 엔진은 사용자에게 보이는 화면이 아니라 소스를 대상으로 정보를 검색하기 때문에, 소스가 의미를 가지게 되면 검색 엔진은 더 정확한 검색 결과를 내놓을 수 있을 것이다.

시맨틱 태그의 도입으로 HTML5의 태그에 어떤 변화가 있는지, 그리고 이것들의 의미가 무엇인지 간단하게 정리해보자.


1. 문서 구조를 정의하는 태그

HTML4에서는 문서를 구분할 때, <div></div>태그를 사용하고, 각 div 태그에 id나 class 속성을 부여해서 CSS를 적용했다. 예를 들어, 헤더 부분에는 <div id='header'>, 푸터 부분에는 <div id='footer'>, 본문 부분에는 <div id='contents'>등을 사용하는 식이었다.

HTML5에서는 다음과 같은 태그가 추가되었다.

• header : 헤더 부분. 사이트 소개, 로고, 메뉴, 머리글 등
• footer : 푸터 부분. 사이트 제작자나 저작권 관련 정보 등
• nav : 네비게이터 부분. 사이트내의 메뉴 등
• section : 실제 문서 내용 등
• article : 문서 내용이 많을 경우 하나의 section을 여러개의 article로 나눔
• aside : 블로그 등에 있는 사이드 바와 같은 형태

위와 같은 태그들의 도입으로 검색 엔진은 실제로 필요한 부분만을 대상으로 검색을 실행할 수 있게 된다.

예를 들어 설명하면, HTML4에서는 메뉴에 있는 'HTML5'라는 단어와 본문에 있는 'HTML5'라는 단어의 중요도를 검색 엔진이 판단할 수 없었지만, HTML5에서는 메뉴에 있는 'HTML5'라는 단어는 <nav></nav>태그 사이에 존재하고, 본문에 있는 'HTML5'라는 단어는 <article></article> 또는 <section></section> 내에 존재하므로 어떤 단어가 더 중요한 의미를 가지는 지 알 수 있다. 즉, 검색 엔진은 필요에 따라 <nav></nav>태그 사이에 존재하는 'HTML5'라는 단어는 결과에서 제외할 수도 있다. 이와 같이 HTML5의 시맨틱 태그를 사용하면 검색 엔진의 입장에서는 불필요한 검색 결과를 걸러낼 수 있으므로, 더 정확한 검색 결과를 내놓을 수 있게 된다.


HTML5에는 제목, 부제목 등을 묶어주는 <hgroup> 태그도 있다. <header> 태그가 문서의 구조적인 면을 정의하는 태그라면, <hgroup> 태그는 문서의 내용적인 면을 정의하는 태그라고 할 수 있다.

즉, <header>태그는 그 내부에 메뉴를 나타내는 <nav>태그를 가지기도 하고, 문서의 제목, 부제목을 나타내는 <hgroup>태그를 가질 수도 있다. <hgroup>태그는 필요에 따라 <h1>,<h2> 태그를 이용해 주제목, 부제목을 나타내기도 한다.

물론 <hgroup>태그는 문서 뿐만 아니라 하나의 <section>이나 <article>의 제목, 부제목을 나타내기 위해 사용될 수 도 있다. 이처럼 <hgroup>태그를 이용하면 그 페이지나 본문이 나타내는 바를 명확하게 할 수 있으며, 활용하기에 따라서는 다수의 페이지나 본문을 대상으로 인덱스 페이지를 생성해 내도록 할 수도 있다.

2. 의미를 명확히 하는 태그

(1) <figure>, <figurecaption> 태그

HTML5에서는 이미지와 그 이미지에 해당하는 캡션을 묶어서 관리할 수 있는 태그가 제공된다. HTML4에서는 이미지를 첨부하고 그 상하단에 관련 설명을 첨부하여도 검색 엔진의 입장에서는 알아낼 수 없었지만, HTML5의 <figure> 태그와 <figurecaption>태그를 이용한 페이지에서는 검색 엔진이 포함된 이미지가 어떤 것인 가에 대해서 보다 정확하게 알 수 있다.



(2) <time>태그와 <address>태그
HTML5에서는 페이지나 본문을 작성한 시각을 나타낼 때에는 <time>태그를 사용하고, 사이트 제작자나 본문 작성자의 이메일 주소나 우편 주소 등을 나타낼 때에는 <address> 태그를 사용한다. 마찬가지로 검색 엔진은 페이지 내에서 <time>태그를 만나면 그 시각을 페이지 작성 시각 또는 본문 작성 시각으로 인식하고, <address> 태그를 만나면 그 이후를 우편 주소나 이메일 주소로 인식을 한다.


(3) 문자열 관련 태그 : <mark>, <b> & <strong>, <i> & <em>
위의 태그 모두 본문의 내용 중 일부분을 강조하는데 사용되지만, 약간씩 역할과 효과가 다르다. 우선 다음의 예제를 보자.


결과만을 놓고 본다면 간단하게 다음과 같이 분류 할 수 있다.

• <storng>, <b> : 굵은 글씨
• <i>, <em> : 기울어진 글씨
• <mark> : CSS를 이용한 강조 표시

HTML5에서는 <strong> 태그는 의미적으로도 중요한 의미를 가진다는 것을 나타낼 때 사용되고, <i> 태그는 외국어, 전문 용어, 대명사, 인용문 등을 나타낼 때 사용된다. 즉, 사용자에게는 동일한 굵은 글씨, 기울어진 글씨로 보일지 모르지만 검색 엔진은 <strong>태그와 <i>태그로 둘러쌓인 내용을 더 비중있게 처리하게 된다.



더 많은 내용이 있지만, 기본적으로 가장 눈에 띄는 내용들은 위와 같다. 세부적인 예를 몇 가지 들었지만, 공통적인 흐름은 태그 자체가 의미를 가지게 되어서 문서 구조나 내용을 정확하게 분석할 수 있게 되었다는 점이다.

그동안 생성되는 정보의 양은 엄청나게 증가해왔지만, 이 정보들에서 유용한 정보를 추출해내는 기술은 상대적으로 발달이 더딘 것이 사실이었다. 하지만 HTML5가 적용되면 해당 문서에 대한 기계적 분류 작업이 훨씬 용이해 질 것이도, 잘 디자인(well designed)된 문서의 수가 늘어날 수록 잘 정련된(well refined) 정보의 수와 그의 질 또한 늘어날 것이다.