시맨틱 웹(Semantic Web)

시맨틱 웹은 '의미론적인 웹'이라는 뜻으로, 문서나 파일 등에 대한 정보와 자원 사이의 관계-의미를 컴퓨터가 처리할 수 있는 온톨로지 형태로 표현하는 기술이다.

웹사이트의 목적 중 하나는 유망한 검색엔진에 노출되는 것이다. Google, Naver, Daum과 같은 검색사이트는 로봇(Robot)이라는 프로그램을 이용해 여러 웹사이트 정보를 수집하면서, 이용자가 검색할 키워드에 대응하는 인덱스(Index)를 미리 만든다. 이때 사용하는 정보는 웹사이트의 HTML 코드이며, 그 중에서도 의미가 인지되는 시맨틱 요소(Semantic element)를 해석한다.

시맨틱 요소

HTML 요소는 두 가지로 구분할 수 있다.

종류	설명
non-semantic	<div>, <span> 등의 태그로 content에 대한 설명 없음
semantic	<form>,<table>,<img> 등의 태그로 content의 의미를 명확히 설명

두 코드 모두 같은 형태를 띄지만, 1행의 요소는 아무런 의미 없이 그저 사이즈와 볼드를 표현한 non-semantic element다. 반면, 2행의 경우, 가장 상위 제목(header)을 의미하는 semantic element로, 검색 엔진의 로봇은 해당 요소를 웹문서의 중요 제목으로 인식해 인덱싱할 확률이 높다. 개발자 및 이용자도 직관적으로 알 수 있어 코드의 가독성과 이용의 편의성 모두 높일 수 있다. 즉, 시맨틱 테그란 브라우저, 검색엔진, 개발자 모두에게 content의 의미를 명확히 설명하는 역할을 한다.

주요 시맨틱 태그

MDN에 따르면, 사용가능한 시맨틱 태그는 백 여개 정도의 요소들이 있다고 한다. 그 중 본문을 표현하는 몇 개의 시맨틱 태그를 코드로 옮겨 봤다.

---

참고
poiemaweb.com 시맨틱 요소와 검색 엔진
MDN 시맨틱 태그