시맨틱 웹(Semantic Web)이란?

■시맨틱 웹이란?

• 시맨틱(Semantic)이란?
  • '의미의', '의미론적인'이란 뜻의 영단어이다.
•  등장배경
  • 2022/6/17 기준, 인터넷 사용자 수 약 53억 명, 총 웹사이트 수 약 20억으로, 웹사이트는 무수히 많다.
  • 웹사이트는 무수히 많지만, 검색엔진에 노출되지 않는 사이트는 묻혀서 아무도 볼 수 없다.
  • 수많은 사람들이 자신의 웹사이트가 검색엔진에 노출되어, 많은 사람에게 보여지기를 바란다.
• 시맨틱 웹이란?

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

• • 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터의 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
  • HTML 요소는 '시맨틱 요소'와 '비시맨틱 요소'로 구분할 수 있다.
  • 비시맨틱 요소란?
    • div, span 등이 있으며, 콘텐츠에 대해 어떤 설명도 하지 않는다. 
    • 예를 들어 1행은 의미론적으로 어떤 의미도 가지고 있지 않고, 단지 폰트 크기와 폰트 굵기의 메타데이터만 브라우저에 알리고 있다.
    • 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 있다.
  • 시맨틱 요소란?
    • form, table, img 등이 있으며, 콘텐츠의 의미를 명확히 설명한다.
    • 예를 들어 2행의 h1은 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있다.
    • 검색엔진에 있어서의 유익
      • 시맨틱 요소로 구성된 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있다.
      • 검색엔진은 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.
      • 검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고, 인덱스에 포함시킬 확률이 높다.
    • 개발자에게 있어서의 유익
      • 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.
      • 코드의 가독성을 높이고, 유지보수를 쉽게 한다.
      • 코드의 의미를 명확히 알 수 있다.
  • 시맨틱 태그란?
    • 시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
    • 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고, 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
• HTML5에서 새롭게 추가된 시맨틱 태그

태그	설명
header	헤더를 의미한다.
nav	내비게이션을 의미한다.
aside	사이드에 위치하는 공간을 의미한다.
section	본문의 여러 내용(article)을 포함하는 공간을 의미한다.
article	본문의 주 내용이 들어가는 공간을 의미한다.
footer	풋터를 의미한다.

•  배경지식
  • SEO(Search Engine Optimization)
    • 검색엔진 최적화
    • 웹사이트를 검색하기 알맞은 구조로 조정하는 것이다.
    • 검색엔진이 웹사이트 정보를 어떻게 수집하는지 알아야 한다.
  • 로봇
    • 웹사이트의 정보를 수집하는 프로그램이다.
    • 로봇을 통해 웹사이트 정보를 수집하는 행위를 '크롤링'이라고 한다.
  • 인덱스
    • '색인'이라는 뜻이다.
    • 인덱스가 생성될 때 사용되는 정보는, 검색 로봇이 수집한 HTML 코드이다.
  • 인덱싱
    • 검색 사이트 이용자가 검색할만한 키워드를 미리 예상, 키워드에 대응하는 인덱스를 만들어 두는 행위이다.
    • 검색엔진의 인덱서가 수행한다.
  • 시맨틱 요소
    • 콘텐츠에 의미 즉, 메타 데이터를 부여한 요소이다.
    • 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
    • 검색엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데, 이 때 시맨틱 요소(Semantic element)를 해석하게 된다.

출처 : https://poiemaweb.com/html5-semantic-web

Semantic Web | PoiemaWeb