HTML5 시맨틱 웹

  시맨틱 웹(Semantic Web)의 사전적 정의는 기계가 이해할 수 있고 처리할 수 있는 웹 콘텐츠를 만드는 것으로, 1998년 월드와이드웹(WWW)의 창시자인 팀 버너스 리(Tim Berners Lee)에 의해 개발되고 정의된 개념입니다.

 

  HTML4에서는 웹 페이지 구조에 해당하는 머리말, 메뉴, 본문, 하단부를 만들 때(div)태그에 CSS를 적용하는 방식으로 작업을 했습니다. 그러다 보니 <div> 태그만 봐서는 그 의미를 잘 알수 없다는 문제가 있었습니다.

 

  따라서 HTML5에서는 이 문제를 보와하기 위해 의미있는 구조를 나타낼 수 있는 태그들을 추가하여 가독성을 높였습니다. HTML5에 추가된 태그를 정리하면

태그	설명
<header>	머리말을 나타내는 태그
<hgroup>	제목과 부제목을 묶는 태그
<nav>	메뉴 부분을 타나내는 태그
<section>	제목별로 나눌 수 있는 태그
<article>	개별 콘텐츠를 나타내는 태그
<aside>	왼쪽 또는 오른쪽에 위치하는 사이드 바를 나타내는 태그
<footer>	하단의 정보를 표시하는 태그

쉽게 그려 본다면 시맨틱 웹의 자체 태그를 이용해 구성한 레이아웃입니다.

<header>
<aside>	<section>
	<article>
	<article>
<footer>