HTML5 - Semantic Tag

From. 반응형 웹디자인

HTML5의 새로운 시맨틱 요소

시맨틱의 사전적 의미는 '의미의, 의미론적인'이다. 우리의 목적상 시맨틱은 마크업에 의미를 부여하는 과정이다. 왜 이렇게 중요한 걸까? '그리고 우승자는 아니다...' 사이트의 현재 마크업 구조를 살펴보자.

							<body>
								<div id="wrapper">
									<div id="header">
										<div id="logo"></div>
										<div id="navigation">
											<ul>
												<li><a href="#">Why?</a></li>
											</ul>
										</div>
									</div>
									<!-- the content -->
									<div id="content">
										
									</div>
									<!-- the sidebar -->
									<div id="sidebar">
										
									</div>
									<!-- the footer -->
									<div id="footer">
										
									</div>
								</div>
							</body>	 
						

대부분의 마크업 개발자에게 div 요소에 header, content, sidebar 같은 ID를 사용하는 것은 일반적인 관례다. 그러나 코드 자체는 어떤 유저 에이전트(웹 브라우저, 스크린 리더, 검색 엔진 등)도 각 div 섹션의 목적이 무엇인지 명확히 알 수 없었다. HTML5는 이런 문제를 해결하고자 새로우운 시맨틱 요소를 도입했다. 아래에서는 구조적인 관점에서 이들을 설명한다.



<section>

<section> 요소는 문서나 애플리케이션의 일반적인 섹션을 정의하는 데 사용된다. 예를 들어 한 섹션은 연락처 정보, 다른 섹션은 뉴스 피드와 같은 식으로 콘텐츠를 몇 개의 섹션으로 나누어 구성할 수 있따. <section> 요소는 스타일일 적용 목적으로 도입되지 않았다는 사실을 명심하라. 단순히 스타일을 적용하기 위해서라면, 이전처럼 <div>를 계속 사용하는 편이 좋다.



<nav>

<nav> 요소는 페이지 내에서 다른 페이지나 페이지의 다른 부분으로 이동하기 위한 주요 내비게이션 블록을 정의하는데 사용된다. 주요한 내비게이션 블록을 정의하기 위한 요소이기 때문에 엄격하게 말하면 공통적으로 다른 페이지를 여연결하기 위한 그룹을 정의하는데 사용되고, 푸터(비록 사용할 수는 있지만)에서는 사용하지 않는 게 좋다.



<article>

<article> 요소는 <section> 요소와 그 차이를 구분하기가 쉽지 않다. 둘의 차이를 충분히 이해하기 위해 W3C의 규격을 여러 번 읽어야 했다. <article> 요소는 콘텐츠의 독립적인 부분을 나타내는 데 사용된다. 페이지를 구조화할 때 <article> 태그로 사용될 콘텐츠가 그 자체로 의미를 지니고, 다른 사이트에 붙어 넣어을 때도 의미를 그대로 유지하는지를 스스로에게 물어보기 바란다. 또 다른 방법은 <article>의 콘텐츠가 RSS 피드에서 실제로 불리된 기사를 구성할 수 있는지 생각해 보는 것이다. <article> 요소를 사용할 수 있는 확실한 다른 예제는 블로그 게시물이다. <article> 요소를 중첩해서 사용할 경우, 중첩된 <article> 요소는 바깥쪽의 기사와 연관되어 있다고 여겨진다는 사실에 주의하라.



<aside>

<aside> 요소는 메인 콘텐츠와 연관되는 부가 콘텐츠를 나타내는 데 사용된다. 실질적인 관점에서 나는 <aside>를 종조종 사이드바를 구성하는 데 사용한다(적절한 내용을 포함하고 있는 경우). 또한 인용문이나 광고, (블로그 롤Blog roll 같은) 내비게이션 요소의 그룹에 적합니다.



<hgroup>

여러 개의 머리글이나 h1, h2, h3 같이 이어지는 부제가 존재하는 경우 <hgroup>의 사용을 고려해볼 수 있다. 이렇게 하면 HTML5의 개요 알고리즘에서 두 번째 요소는 제외하고 <hgroup>의 첫 번째 헤딩 요소만으로 문서의 개요를 작성할 수 있다.



HTML5의 개요 알고리즘

HTML5는 각 섹션의 컨테이너가 자체적으로 독립적인 개요를 갖게 할 수 있다. 이것은 현재 헤더 태그의 레별을 계속해서 고민할 필요가 없음을 의미한다. 예를 들어 블로그 내에서 블로그의 제목을 <h1> 태그로 지정하고 포스트 제목도 <h1> 태그로 지정할 수 있다. 즉 다음과 같은 구조를 고려할 수 있다.

							<hgroup>
								<h1>Ben's blog</h1>
								<h2>All about what I do</h2>
							</hgroup>

							<article>
								<header>
									<hgroup>
										<h1>A post about something</h1>
										<h2>Trust me this is a great read</h2>
										<h3>No, not really</h3>
										<p>See. Told you.</p>
									</hgroup>
								</header>
							</article>
						

여러 개의 <h1>과 <h2> 태그가 있지만, 문서의 개오는 다음과 같이 표시된다.

>> Ben's blog
>>>> A post about something

따라서 사용해야 할 제목 태그를 추적할 필요가 없다. 콘텐츠의 섹션 내에서 원하는 어떤 수준의 제목 태그를 사용해도, HTML5 개요 알고리즘이 순서에 따라 정리해 준다.

다음 URL에서 HTML5를 이용한 문서 개요를 테스트해 볼 수 있다.

http://gsnedders.html5.org/outliner
http://hoyois.github.com/html5outliner



<header>

<header> 요소는 HTML5의 개요 알로리즘과 무관하기 때문에 섹션 콘텐츠에 사용할 수 없으며, 대신 콘텐츠를 소개할 때 사용된다. 실질적으로, <header>는 사이트 헤더 영역의 '마스터헤드(masthead)'나 <article>요소처럼 다른 콘텐츠를 소개하는 용도로 사용한다.

W3C HTML5 규격에서 <header> 요소는 다음 URL을 확인한다.
http://dev.w3.org/html5/spec/Overview.html#the-header-element



<footer>

<header> 요소처럼 <footer> 요소도 개요 알고리즘과 무관하기 때문에 섹션 콘텐츠에 사용할 수 없고, 대신 섹션에 대한 정보를 포함하는 데 사용한다. 예를 들어 여타 문서나 저작권 정보 관련 링크를 포함할 수 있다. <header> 요소와 마찬가지로, 필요한 경우 페이지에서 여러 번 사용할 수 있다. 예를 들어, 블로그의 푸터뿐만 아니라 블로그 포스트 <article>의 푸터를 표시하기 위해 사용할 수 있다. 그러나 규격에 의하면 블로그 포스트 작성자의 정보는 <address> 요소를 사용해서 표시해야 한다.



<address>

<address> 요소는 <article>이나 <body> 요소의 연락처 정보를 표시하기 위해 명시적으로 사용된다. 그러나 콘텐츠 내에서 언급된 연락처 정보가 아닌 이상, 우편 주소를 표시하기 위해 사용하는 요소는 아님을 염두에 두자. 대신에 우편 주소나 임의의 연락처 정보는 <p> 태그로 표시한다.