HTML5의 특징, 시맨틱 웹(Semantic Web)

HTML5의 특징, 시맨틱 웹 입니다.

시맨틱 웹(Semantic Web)이란,

웹에 존재하는 수 많은 페이지들의 메타데이터를 부여하여,

그저 데이터의 집합- 이었던 웹 페이지를

'의미'와 '관련성'을 가지는 거대한 데이터베이스(DB)로 구축하고자 하는 발상

입니다.

(의미 그대로, 의미론적인 웹 이란 뜻인 것 같습니다.)

이를 위하여 구분되어진 것이

시맨틱 요소, 시맨틱 태그 입니다.

이는 브라우저, 검색엔진, 개발자 모두에게

콘텐츠의 의미를 명확히 설명하는 역할을 합니다.

시맨틱 웹 에 대하여 검색하면 나오는 가장 대표적인 계층 구조일 것입니다.

아직 우리에게 조금 어려운 구조이지만,

'의미와 개념을 찾아 원하는 값을 돌려주는 것'을 목표로 하는 구조라고 생각하면

추후에 다시 공부하는 데 도움이 될 것 같습니다.

이런 시맨틱 웹이 HTML5에서 적용되는 모습은 다음과 같습니다.

<header>

<h1>제목영역</h1>

</header>

<section>

<article>

<p>내용 영역</p>

</article>

</section>

<aside>

<p>사이드 영역</p>

</aside>

<footer>

<p>하단 영역</p>

</footer>

제목 부분을 <header>로, 보통 추가 설명이 들어가는 

하단 부분을 <footer>로 표기 하는 등,

태그만 보고도 무슨 기능을 하는, 어떤 영역인지 알아볼 수 있도록 하는 것입니다.

이전까지는,

<div id = "header">

<h1>제목영역</h1>

</div>

<div id = "section">

<div id = "article">

<p>내용 영역</p>

</div>

</div>

<div id = "aside">

<p>사이드 영역</p>

</div>

<div id = "footer">

<p>하단 영역</p>

</div>

이렇게 하나 하나, division을 나누어 하나하나 id값을 부여해 주어야 했습니다만,

훨씬 효율적으로 변하게 된 셈입니다.

눈에 보이도록 영역을 만들어 보았습니다.

이름만 가지고도 손쉽게 만들 수 있는 HTML5의 강력한 기능

시맨틱 태그,

적극 활용하지 않을 수 없겠죠?