시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해주는 것을 의미합니다.
그러기 위해서는 기계가 웹 페이지를 이해할 수 있도록 해주어야 합니다.
그런 의미에서 과거의 웹 문서는 많은 정보를 담지 못했습니다.
(사전적인 의미:시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.)
non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.
HTML태그의 의미를 명확하게 할 수 있다는 것이다.
<!-- 시맨틱 태그 미사용 예 -->
<div>
<div style="font-size: 2em; font-weight: bolder">
귀여운 강아지
</div>
</div>
<!-- 시맨틱 태그 사용 예 -->
<header>
<h1>
귀여운 강아지
</h1>
</header>
div로만 묶이 코드는 귀여운 강아지가 무엇인지 알수가 없다.
그렇지만 아래에 header와h1 으로 묶여진 태그는 명확한 의미가 있어 코드의 가독성을 높이고 정확한 핵심요소를 파악하게 해준다.
tag Description
header : 헤더를 의미한다
nav : 내비게이션을 의미한다
aside : 사이드에 위치하는 공간을 의미한다
section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다
article : 분문의 주내용이 들어가는 공간을 의미한다
footer : 푸터를 의미한다