semantic web, semantic tag

devMarco·2022년 3월 28일
0

semantic web

시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해주는 것을 의미합니다.
그러기 위해서는 기계가 웹 페이지를 이해할 수 있도록 해주어야 합니다.
그런 의미에서 과거의 웹 문서는 많은 정보를 담지 못했습니다.
(사전적인 의미:시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.)

non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

semantic tag

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 : 푸터를 의미한다

0개의 댓글